前端工程構建之談：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);

這仍是一個簡易的構建腳本，還缺乏一個watch，監聽項目中css、js、html文件的變化，一旦發生變化就觸發對應的方法。gulp服務一直運行着，實時刷新。
我我的認爲，若是是長期維護的項目，仍是能夠考慮擁抱gulp4，畢竟Gulp4的強大，是真香！