前端工程构建之谈：gulp3要不要升级到Gulp4

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

关于升级还是不升级，这是一个哲学问题。

gulp4的语法更加现代，支持ES6的大部分写法，使用exports的方式去暴露任务组合，更加灵活和便捷。

gulp4同时也提供了很多强大的API，例如parallel()和series()。此外，gulp4不再支持同步任务，所以可以看到编写任务的时候也不再推荐使用.task()方法去编写，而是独立定义一个函数方法，然后用return去返回一个回调函数的结果。例如一个处理的css的任务，定义如下。

function minHeaderCss() { // 这是一个回调函数的返回对象，本身也是异步的 return src([ './static/css/header.css', './static/css/boot.css', './static/css/wrap.css', './static/css/feedback.css', './static/css/pronemove.css' ]) .pipe(minCss()) .pipe(concat('main_header.min.css')) .pipe(dest('./static/css/min/')); }

parallel()是并行执行多个任务（task)，一个任务的错误将整个任务组合都结束，但是其他并行的任务可能执行完，也可能执行完。

series()是顺序执行，任何一个任务出错，所有后续任务都停止，有点单线程的感觉。

这两个方法都可以从gulp里面获得，如下。

const { series, parallel } = require('gulp');

只需要将需要执行的任务添加到series（）或者parallel()里面即可：

const { series, parallel } = require('gulp');function javascript(cb) { // body omitted cb(); }function css(cb) { // body omitted cb(); }exports.build = series(javascript, css);exports.buildParallel = parallel(javascript, css)

如果想执行build任务组合，那么在命令行中执行如下语句：

gulp build

至于使用哪种方式，还是要是否构建过程很漫长。如果构建的步骤多，任务重，时间又长，肯定有限考虑使用parallel（）来并行构建任务组合。

不同的任务组合还可以进行二次组合，可以对一些适合顺序执行的任务使用series()，对一些适合并行的任务使用parallel()。例如一些需要babel编译的Sass和js的任务使用parallel()，一个比较完整的构建脚本如下所示：

const {src, dest, watch, series, parallel, connect} = require('gulp'); const babel=require('gulp-babel'); const revAll = require('gulp-rev-all'); const cssver = require('gulp-make-css-url-version'); const del = require('del'); const htmlmin = require('gulp-htmlmin');// 可以使用ES6 => 语法来编写任务 const babelCss = () => src(['./css/**/*.css']) .pipe(cssver()) .pipe(cleancss({compatibility: 'ie7', format: 'keep-breaks', keepSpecialComments :'*'})) .pipe(dest('./dist/css/')) .pipe(connect.reload());function babelJs() { return src(['./js/**/*.js']) .pipe(babel({presets: ['@babel/env']})) .pipe(uglify({ mangle:true, compress:true}) .pipe(dest('./dist/js/')) .pipe(revAll.manifestFile()) .pipe(dest('./dist/rev/')); }function clean() { return del('./dist'); }function babelHtml() { return src(['./app/tpl/*.html']) .pipe(htmlmin({ removeComments: true, collapseWhitespace: true })) .pipe(dest('./dist/html/')); }// 嵌套使用series和parallel export.build = exports.build = series(clean,parallel(babelJs, babelCss),babelHtml);