Gulp 3.9 升級到 4.0 後的寫法修正

前陣子在升級 Hexo 版本，後也心血來潮地把Gulp版本也升級了，印象中以前一直不敢升級到 4.0 以上，因為原本寫的gulpfile就沒辦法正常運作了，然後當時又沒太多時間研究該怎麼改寫，所以就拖著不理他。不過這次趁著有點空檔就研究了一下，發現沒有想像中的複雜，順利地被我改寫成功了，以此紀錄一下。

Gulp 3.9 與 4.x 的差異

差異一: task 變成 function

大致上原本使用gulp.task變成使用function來定義外，就是原本使用的gulp.src與gulp.dest直接變成src與dest了，要記得把src與dest給引入使用喔！

// v3.9.1 寫法
gulp.task('minify-css', function () {
    return gulp.src('./public/css/*.css')
        .pipe(sourcemaps.init())
        .pipe(cssnano({
            zindex: false
        }))
        .pipe(sourcemaps.write('maps/'))
        .pipe(gulp.dest('./public/css'));
});

// v4.0.2 寫法
// 引入 src 和 dest
var { src, dest } = require('gulp');
function minifyCss() {
    return src('./public/css/*.css')
        .pipe(sourcemaps.init())
        .pipe(cssnano({
            zindex: false
        }))
        .pipe(sourcemaps.write('maps/'))
        .pipe(dest('./public/css'));
}

差異二: default 執行多個任務變成使用 series

原本使用的gulp.task來執行default的任務時，透過一個陣列來填入依序執行的 tasks，變成使用exports.default與series來執行多個 tasks，一樣要記得引入series

// v3.9.1 寫法
gulp.task('default', [
    'minify-html','minify-css','minify-js','images'
]);

// v4.0.2 寫法
// 引入 series, 跟前面一起引入 src 和 dest
var { series, src, dest } = require('gulp');

exports.default = series(minifyHtml, minifyCss, minifyJs, images);

附上當初改好的版本，裡面還把舊的寫法都註解起來了
gulpfile.js