gulp

133 阅读6分钟

一、gulp是什么

gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率。在 Web 前端开发工作中有很多“重复工作”,比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律,并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。

二、安装gulp

使用 gulp 需要全局安装和本地安装。

1、全局安装

全局安装的意思就是以后在电脑的每一个位置都可以使用 gulp 的命令,全局安装也只用进行一次,安装成功后,以后再次使用无需安装。

键入如下命令:

cnpm install gulp -g

image.png

2、本地安装

本地安装是如果你需要使用 gulp,每次都要进行安装的,这里新建一个 gulp-demo 文件夹用于演示。

命令行切换到 gulp-demo 目录,用如下命令创建一个配置文件:

npm init --yes

已经初始化好配置文件了,键入如下命令本地安装 gulp:

cnpm install gulp --save-dev // 因为 gulp 是开发依赖,所以使用 --save-dev

image.png

完毕,如果成功的话,就可以在刚刚生成的配置文件 package.json 中,看到安装信息了:

image.png

三、使用gulp

安装好 gulp 之后,就可以使用它来压缩代码了。

1、压缩js

压缩 js 文件是需要安装 gulp-uglify 这个插件的。

cnpm install gulp-uglify --save-dev

安装完毕,为了演示,初始化了一下目录结构,如下:

|--gulp | |--share | |--src | |--js | |--test.js | |--gulpfile.js | |--package.json | |--node_modules

 逐一介绍下每个文件夹的作用,src 文件夹就是源文件,目录下 js 文件夹用于放置 js 文件,目前放置了一个 test.js,用于测试;dist 文件夹用于待会放置经过 gulp 压缩后的 js 代码;gulpfile.js 文件是一个只要使用 gulp 就必须存在的一个配置文件,且名字不能更改;

下面是 gulpfile.js 文件的内容:

image.png

上面代码首先引入了 gulp 和 gulp-uglify,然后就可以使用 gulp 对象的方法了,

  • task(...):新建一个任务,第一个参数为字符串,值随意,最好取一个有意义的名字,这里这个任务的作用就是用来压缩 js 代码的,所以叫 min-js 好了。第二个参数是一个函数,也就是配置 min-js 任务的具体内容。
  • src(...):对哪个目录里面的哪些文件进行处理,上面的 'src/js.js' 代表了对 'src/js' 目录下的所有 js 文件进行处理。
  • pipe(uglify()):把压缩 js 的任务加入队列。
  • pipe(gulp.dest('share/js'):把压缩后的 js 文件输出到 'share/js' 目标目录。

2、压缩css

压缩 css 文件是需要安装 gulp-clean-css 插件的,来键入如下命令安装一下:

cnpm i gulp-clean-css -D // -D 是 --save-dev 的简写,说明是开发依赖

image.png

image.png

接着,就可以在命令行执行压缩 css 文件的命令了。

gulp min-css

3、编译less

less 是可以方便我们书写 css 样式的,但是浏览器是不认识的,必须经过编译成普通的 css 文件,才会被浏览器认识,使用 gulp 也可以做到,首先安装 gulp-less 插件:

cnpm i gulp-less -D

image.png

最后,就可以进行编译了:

gulp compile-less

sass使用gulp-sass,安装:

npm install --save-dev gulp-sass
var gulp = require('gulp'), 
sass = require("gulp-sass"); 
gulp.task('compile-sass', 
    function () { gulp.src('sass/*.sass') 
        .pipe(sass()) 
        .pipe(gulp.dest('dist/css')); 
    }
);

4、自动监测文件的改变

手动执行gulp命令,是可以进行压缩,编译等功能,但是并不时实时的,也就是说,如果希望我改变了一些代码,会自动进行压缩,编译等时,需要编写gulpfile.js文件,编写实时监测的代码,如下:

image.png

现在,就可以执行 gulp 命令,进行实时监控了:

gulp

5.利用gulp将ES6转化ES5

安装gulp-babel,babel-core 和babel-preset-es2015

cnpm install gulp-babel@7.0.1 babel-core babel-preset-es2015 --save-dev

注:gulp-babel版本不能超过8.0.0,否则会error

.babelrc文件中写入

{ "presets": ["es2015"]}

image.png

6. 压缩 html 文件,可以压缩页面 javascript,css,去除页面空格,注释,删除多余属性等操作。

1.安装

cnpm install --save-dev  gulp-load-plugins gulp-htmlmin

image.png

7 图片压缩

可以使用gulp-imagemin插件来压缩jpg、png、gif等图片。安装:npm install --save-dev gulp-imagemin

var gulp = require('gulp'); 
var imagemin = require('gulp-imagemin'); 
var pngquant = require('imagemin-pngquant'); //png图片压缩插件 
gulp.task('default', 
    function () { 
        return gulp.src('src/images/*') 
        .pipe(imagemin({ progressive: true, use: [pngquant()] //使用pngquant来压缩png图片 })) 
        .pipe(gulp.dest('dist')); 
    }
);

gulpfile.js文件代码

/*  * @Author: your name  
    * @Date: 2021-11-30 11:56:09  
    * @LastEditTime: 2021-12-01 16:14:36  
    * @LastEditors: shh  
    * @Description: 
*/
let gulp = require('gulp')

let uglify = require('gulp-uglify')

let cleanCss = require('gulp-clean-css')

let less = require('gulp-less')

let babel = require('gulp-babel')

let htmlmin = require('gulp-htmlmin')

let sass = require('gulp-sass');

let runSequence = require('run-sequence')

plugins = require('gulp-load-plugins')() // 装载插件

;(imagemin = require('gulp-imagemin')),

  (pngquant = require('imagemin-pngquant')),

  //确保本地已安装gulp-cache [cnpm install gulp-cache --save-dev]

  (cache = require('gulp-cache'))

// ;(runSequence = require('run-sequence')),

//   (rev = require('gulp-rev')),

//   (revCollector = require('gulp-rev-collector'))

// gulp.task('dev-js', async() => {

//   gulp.src('src/js/*.js').pipe(uglify()).pipe(gulp.dest('share/js'))

// })

gulp.task('dev_less', async () => {

  gulp.src('src/css/*.less').pipe(less()).pipe(gulp.dest('share/css'))

})

gulp.task('dev_sass', async () => {

  gulp.src('src/css/*.sass').pipe(sass()).pipe(gulp.dest('share/css'))

})

gulp.task('dev_css', async () => {

  gulp.src('src/css/*.css').pipe(cleanCss()).pipe(gulp.dest('share/css'))

  // .pipe(rev.manifest())

  // .pipe(gulp.dest('share/css'))

})

gulp.task('glo_css', async () => {

  gulp.src('src/global/*.css').pipe(cleanCss()).pipe(gulp.dest('share/global'))

})

gulp.task('dev_js', async () => {

  gulp

    .src('src/js/*.js')

    .pipe(babel())

    .pipe(uglify())

    .pipe(gulp.dest('share/js'))

  // .pipe(rev.manifest())

  // .pipe(gulp.dest('share/js'))

})

// //Html替换css、js文件版本

// gulp.task('revHtmlCss', function () {

//   return gulp

//     .src(['./src/css/*.json', './shalen/zhuye.html'])

//     .pipe(revCollector()) //替换html中对应的记录

//     .pipe(gulp.dest('./share')) //输出到该文件夹中

// })

// gulp.task('revHtmlJs', function () {

//   return gulp

//     .src(['./src/js/*.json', './yes/zhuye.html'])

//     .pipe(revCollector())

//     .pipe(gulp.dest('./share'))

// })

gulp.task('dev_html', async () => {

  var options = {

    removeComments: true, // 清除 HTML 注释

    collapseWhitespace: true, // 省略空白

    collapseBooleanAttributes: true, // 省略所有标签内的布尔属性

    removeEmptyAttributes: true, // 清除所有标签内值为空的属性

    removeScriptTypeAttributes: true, // 清除 <script> 标签内的 type 属性

    removeStyleLinkTypeAttributes: true, // 清除 <style> 和 <link> 标签内的 type 属性

    minifyJS: true, // 压缩 html 页面内的 js 代码

    minifyCSS: true, // 压缩 html 页面内的 css 代码

  }

  return gulp

    .src('src/*.html')

    .pipe(plugins.htmlmin(options))

    .pipe(gulp.dest('share/'))

})

gulp.task('dev_img', async () => {

  gulp

    .src('src/images/*.{png,jpg,gif,ico}')

    .pipe(

      cache(

        imagemin({

          progressive: true,

          svgoPlugins: [{ removeViewBox: false }],

          use: [pngquant()],

        })

      )

    )

    .pipe(gulp.dest('share/images'))

})

gulp.task('copy', async () => {

  gulp.src('src/Library/*.*')

    .pipe(gulp.dest('src/Library'))

});

gulp.task('dev', gulp.series('dev_js', 'dev_css', 'dev_less','glo_css','dev_img','dev_html','copy'));

gulp.task('auto', function() {

  // gulp.run('dev_js', 'dev_css', 'dev_less', 'dev_sass','glo_css','dev_img','dev_html','copy');

  gulp.watch('src/js/*.js', gulp.series('dev_js'))

  gulp.watch('src/css/*.css', gulp.series('dev_css'))

  gulp.watch('src/css/*.css', gulp.series('dev_less'))

  gulp.watch('src/css/*.css', gulp.series('dev_sass'))

  gulp.watch('src/global/*.css', gulp.series('glo_css'))

  gulp.watch('src/images/*.*', gulp.series('dev_img'))

  gulp.watch('src/*.html', gulp.series('dev_html'))

  gulp.watch('src/Library', gulp.series('copy'))

})

gulp.task('default', gulp.series('auto'))

总结:可能会碰到的错误

运行gulpfile文件时报错

  •     报错内容: TypeError: gulp.on(…).on(…).on(…).on(…).start is not a function
  •     问题分析:一般这种情况是因为gulp版本引起的。
  •     解决方法:gulp4.0.0更新变动较大,可以考虑把本地版本和全局版本都切回3.9.1版本。也有其他解决方法,
    npm install --save-dev gulp@3.9.1
    npm install -g gulp@3.9.1

gulp-uglify压缩js文件时报错之 punc(()

  •     报错内容: gulp SyntaxError: Unexpected token: punc (()
  •     问题分析: 这种大多是js代码中包含ES6语法的函数声明方式。报错提供的行号不一定准确,只能自己找到使用ES6语法的位置,改成ES5。
  •     解决方法: 把ES6代码替换成ES5代码。

gulp-uglify压缩js文件时报错之 Unexpected token name

  •     报错内容: _Unexpected token name «p», expected punc «
  •     问题分析: 问题原因同上,也是ES6语法引起的。不过这个是声明变量let的原因。
  •     解决方法: 把let改成var。

gulp-htmlmin

  •     报错内容: throw er; // Unhandled ‘error’ event ^ Error: Parse Error: <= 95% </spa<div
  •     问题分析: 遇到html压缩时的解析错误,此处是因为小于号<引起的。
  •     解决方法: 小于号<改用编码方式<。