gulp 3 遷移至 gulp 4

從 2018 年 10 月開始，使用 npm 下載 gulp 預設的版本都將為 4，因 gulp 3 與 4 在寫法上有些更新，所以在安裝 4 的情況之下，運行 3 的寫法是有可能會出錯的，因此這篇主要說明 gulp 3 與 4 的差異

若仍需要使用 gulp 3，也可以用此指令安裝 3 的版本

1	npm install gulp@^3.9.1

使用 series() 取代原本 Arrays 任務安排的寫法

Gulp 4 介紹了新的組合任務方法：series()、parallel()

series() 按指定的順序一次運行一個任務
parallel() 以任何順序同時運行任務

舉例：
在 gulp 3

1	gulp.task('default', ['browserSync']);

轉換到 gulp 4

1	gulp.task('default', gulp.series('browserSync'))

兩者也可以混用，例如：

1	gulp.task('build', gulp.series('clean', gulp.parallel('sass', 'vendorJs')));

這樣的寫法也是先執行 clean 後再執行後面的 sass, vendorJS
而 sass, vendorJS 是同時執行的

使用 done() - 當任務結束後的 callback

gulp.task('default',
  gulp.series('clean', gulp.parallel('sass', 'vendorJs'),
  function(done) {
    // 也就是先確保前面都執行完
    gulp.watch(['./source/stylesheets/**/*.sass', './source/stylesheets/**/*.scss'],gulp.series('sass'));
    done();
  })
);

模組化設計 - 將 task 改用一般的函式寫法

好處在於可以更方便的管理使用。

另外建立一個 JS 檔 (ex: vendor.js )，並將 task 改用函式的方式來寫

舉例：

gulp.task('vendorJs', function () {
  return gulp.src([
    './node_modules/jquery/dist/jquery.slim.min.js',
    './node_modules/bootstrap/dist/js/bootstrap.bundle.min.js'
  ])
  .pipe($.concat('vendor.js'))
  .pipe(gulp.dest('./public/javascripts'))
})

改用函式的寫法：

const vendorJs = function(done) {
  gulp.src([
    './node_modules/jquery/dist/jquery.slim.min.js',
    './node_modules/bootstrap/dist/js/bootstrap.bundle.min.js'
    ])
    .pipe($.concat('vendor.js'))
    .pipe(gulp.dest('./public/javascripts'))
  done();
};
exports.vendorJs = vendorJs;

在原本的 JS 檔（主要安排與執行任務的檔案，ex: index.js）將上面寫好的檔案引入

1	const { vendorJs } = require('./vendor.js');

最後將 vendorJs 安排到任務執行

1	gulp.series(vendorJs)

要注意因為是引入的方法，所以這邊安排任務不是使用字串 '' 寫法

gulp 3 遷移至 gulp 4

使用 series() 取代原本 Arrays 任務安排的寫法

使用 done() - 當任務結束後的 callback

模組化設計 - 將 task 改用一般的函式寫法

評論

最新文章

標籤

Your browser is out-of-date!