前端 gulp 构建项目命令总结

最近做了一个比较 mini 的项目，使用的是原生 JS 和 jQuery，想着平时都是用 webpck 来打包，这次这个简单点，不如试试别的，折腾一下。于是就选了 gulp，以前没用过，对 gulp 还是一知半解，所以折腾了几个小时才搭建好，这里也记录下。

安装

在安装之前，需要有 node 和 npm 的环境，没安装的要记得先安装，参考 node 官网或其他很多很多很多的文章，都有详细的说明。

npm i -g gulp-cli

全局安装命令行工具，接着 cd 进入到你的项目根目录

npm i gulp --save-dev
// 或者使用 yarn
yarn add gulp --dev

--save-dev 的意思是把它写入 package.json 的 devDependencies 下，也就是开发环境依赖。

到这，gulp 就安装好了。目前最新的是 gulp4 ，我在网上搜的一些写法都是 gulp3 的，所以报错比较多。对于 gulp 来说，主要使用一系列异步执行的 task 任务来完成相关操作。用得最多就是 gulp.task 定义一个任务，然后在回调函数里执行我们想做的操作。

插件

gulp.task() 只是创建一个执行任务，真正项目构建过程中，我们需要用到许多的插件来辅助完成一系列操作，比如代码压缩，文件合并等等。这里介绍下常用的插件：

• gulp-jshint
  代码检查，用了这个后有点后悔，配置太麻烦了，建议还是用 eslint 好了
• gulp-sass
  由于用 sass 书写，所以这是编译 sass 的插件，对于 less 或其他来说，也可以去 npm 上搜索相关插件
• gulp-imagemin 图片压缩用的
• gulp-rev
  这个很重要，给 css 和 js 文件添加 hash ，防止缓存。一大堆缓存导致你改了东西都没反应，简直让人抓狂
• gulp-rev-collector
  配合 gulp-rev 用的，自动给 html 文件引入加上 hash 后的 css 或 js 文件
• gulp-htmlmin
  这个是用来压缩 html 文件的，所有文件能压缩的就压缩，节省空间
• gulp-concat
  这个是用来合并文件的，比如将所有 js 都合并为一个大的 js ，再引入
• gulp-uglify
  这个是用来压缩 js 文件的
• gulp-rename
  这个是用来给文件重命名的，比如前面我们将所有 js 文件合并为一个大文件后，可以进行重命名，方便 html 统一写入
• del
  这个是用来清除 dist 目录的，每次打包之前都先把上次打包的 clean 掉，反正新旧混一起，出现什么意想不到的
• browser-sync
  这个也很关键，看名字就知道，是用来启动本地服务的，并且可以做到更改代码后自动刷新浏览器预览最新效果
• opn
  配合 browser-sync 使用，打开特定的网页地址

上述插件可以使用以下命令进行安装：

npm i 插件名字 --save-dev
// 或者
yarn add 插件名字 --dev

至于具体的用法，推荐到 npm 官网去具体查询某个库，里面有详细的介绍和使用说明。

配置文件

gulp 主要是使用 gulpfile.js 文件来进行项目配置，在你的项目根目录下创建这个文件。gulp 通过 task 来创建一个任务，通过 gulp + 任务名来执行一个任务。比如下面这个示例：

var gulp = require('gulp')
var jshint = require('gulp-jshint')
gulp.task('jshint', done => {
  gulp.src('./src/js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
  done() 
});

上述代码首先引入了 gulp ，然后引入了 gulp-jshint 这个插件，记得先 npm install 下，接着使用 taks 定义了一个任务，src() 方法用于获取路径文件，可以使用正则进行快速匹配；pipe() 方法用于管道传输，可以多次调用，执行不同的操作。通过定义名为 jshint 的任务，执行它就会检查 src/js/ 目录下的所有 js 文件，在这之前，你可以在项目根目录下创建 .jshintrc 文件，在里面配置 js 代码的校验规则。这样在提交代码前，打开终端，进到项目目录下，执行 gulp jshint ，就可以检查 js 代码。

这里注意的是，最新的 gulp4 的语法跟之前不同，每一个 task 都是一个异步任务，你可以像上面一个传递一个回调（done）, 在执行完后调用 done 回调表示完成，也可以直接写 async 语法，类似下面这样：

gulp.task('jshint', async() => {
  await gulp.src('./src/js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
});

基本使用就是这样。通常在项目里，我们需要一系列操作，压缩图片，代码，编译 scss/less 之类的，也就相应需要定义多个 task，这里列下我的配置文件，仅供参考：

var gulp = require('gulp'); 
    
// 插件
var jshint = require('gulp-jshint'); //js代码校验 
var sass = require('gulp-sass');    //编译css
var imagemin = require('gulp-imagemin'); //压缩图片
var rev = require('gulp-rev') // 给文件添加 hash,防止缓存
var revCollector = require('gulp-rev-collector')  // 把加 hash 的文件注入到 html 
var gulpHtmlMin = require('gulp-htmlmin')   // html 压缩
var uglify = require('gulp-uglify');  // js 压缩
var cleanCSS = require('gulp-clean-css') //css 压缩

// 浏览器实时预览
var browserSync = require('browser-sync');
var opn = require('opn');

var path = {
  sass: './src/css/*.scss',
  css: './src/css/*.css',
  js: './src/js/*.js',
  html: './src/*.html',
  src: './'
};

// 检查脚本
gulp.task('jshint', done => {
    gulp.src('./src/js/*.js')
      .pipe(jshint())
      .pipe(jshint.reporter('default'));
    done();
});

// 编译Sass
gulp.task('sass', done => {
    gulp.src('./src/css/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('./src/css/'))
      
    done()
});

gulp.task('css', done => {
  gulp.src('./src/css/*.css')
    .pipe(cleanCSS({ compatibility: 'ie8' }))
    .pipe(rev())
    .pipe(gulp.dest('./dist/css'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('./rev/css'))
  done()
})

gulp.task('sass:dev', done => {
  gulp.src('./src/css/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('./src/css/'));
    done()
})

// 压缩图片
gulp.task('imagemin', done => {
    gulp.src('./src/image/*.{png,jpg,gif,ico}')
      .pipe(imagemin({
        optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
        progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
      }))
      .pipe(gulp.dest('./dist/image'));
    done()
 });
// 合并，压缩js文件
gulp.task('scripts', done => {
    gulp.src('./src/js/*.js')
      .pipe(uglify())
      .pipe(rev())
      .pipe(gulp.dest('./dist/js'))
      .pipe(rev.manifest())
      .pipe(gulp.dest('./rev/js'));
    done()
});

gulp.task('revCollector', done => {
  gulp.src(['./rev/**/*.json', './src/*.html'])
    .pipe(revCollector(
      {
        replaceReved: true,
        dirReplacements: {
            'css': './css',
            'js': './js'
        }
      }
    ))
    .pipe(gulpHtmlMin({
      //删除空格    
      collapseWhitespace : true,
      //删除注释
      removeComments : true
    }))
    .pipe(gulp.dest('./dist'))
  done()
})

// 启动服务，在浏览器打开
gulp.task('serve', done => {
  browserSync.init({
      server: {
          baseDir: path.src
      },
      port: 5501,
      open: false
  }, function() {
      var homepage = 'http://localhost:5501/src/index.html';
      opn(homepage);
  });
  // 编译完sass后，无刷新方式更新页面
  gulp.watch(path.sass, gulp.series('sass:dev'));
  // 修改页面和js后，页面刷新，重新加载
  gulp.watch([path.html, path.js, path.sass]).on("change", function() {
      browserSync.reload();
  });
  done()
})

gulp.task('watch', done => {
   gulp.watch('./src/css/*.scss', gulp.series('sass'));
   gulp.watch('./src/js/*.js', gulp.series('jshint', 'scripts'));
   gulp.watch('./src/image/**', gulp.series('imagemin'))
   done()
})
gulp.task('build', gulp.series('jshint', 'sass', 'css', 'scripts', 'imagemin', 'revCollector'))
gulp.task('start', gulp.series('sass:dev', 'serve'))

可以看到，最后两句代码，使用 gulp.task 定义了一个 build 和 start 的任务，使用 gulp.series 将前面定义的任务都串联起来同步执行，所以执行 gulp start ，就可以启动服务，在浏览器实时预览了；执行 gulp build 就可以打包压缩在 dist 目录下。我们可以在 package.json 文件中修改：

"scripts": { 
  "dev": "gulp start",
  "build": "gulp build" 
},

这样就可以执行 npm run dev 运行项目，npm run build 打包项目；如果你使用 yarn 的话，执行 yarn dev 和 yarn build 。

报错

• Did you forget to signal async completion
  解决：就是没有执行回调导致的，通过传入一个回调，比如 done ,结尾执行 done() 即可，或者直接写 async 和 await 。
• AssertionError: Task function must be specified
  解决：主要就是 gulp3 和 gulp4 语法的差异，以前写一个任务是：gulp.task('test', ['a', 'b'], ...) 表示这个 test 任务在 a 和 b 执行完后才执行，这是以前的写法，现在应该用 gulp.series('a', 'b', 'test') 表示依次执行 a、b、test 。

总结

对于 gulp 的话，首先还是熟读官网文档，了解基本的语法和使用示例，然后就可以网上找对应的插件来使用，比如你想压缩图片，那就搜 gulp 相关的图片压缩插件，再去 npm 官网了解插件的具体操作。最后写 task 将这些插件串联起来执行，基本就是这样。

（完）