因為會忘,所以要寫下來

Gulp4 與 gulp-cli

2 minutes to read

npm 套件安裝

指令縮寫
npm installnpm i
npm install —savenpm i -S
npm install —save-devnpm i -D

—save 將此文件 安裝到本地資料夾 -dev 將安裝的 gulp 訊息存在 package.json 裡

若要安裝特定版本 npm i -D gulp@4.0.2


gulp 與之前版本的差異 3 到 4 的轉換這次多了 gulp-cli 需在全域裡加裝

gulp4 有什麼新東西

提供了兩種新的 流程控制方法 series()parallel() 取消了 task 的用法

無痛升級 gulp4

先在 cmd 裡查看 node 版本(支援 node8.11.1 以上) npm 版本(支援 5.6.0 以上)

確認 gulp 跟 npm 版本後 再來就是安裝 gulp-cli

npm install --global gulp-cli

npm i gulp-cli -g

安裝完後 確認版本 出現版本資訊 表 示gulp-cli安裝成功


寫法差異

將 task 移除

過去版本寫法

gulp.task('css', function () {
  // doSomething
});
gulp.task('js', function () {
  // doSomething
});
gulp.task('default', ['css', 'js']);

4.0 改為

function css() {
  // doSomething
}
function js() {
  // doSomething
}
var build = gulp.series(css, js);
exports.default = build;

bulid 新增 使用 lastRun()


執行方式

新增series()parallel()

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

function clean(cb) {
  // body omitted
  cb();
}

function build(cb) {
  // body omitted
  cb();
}
function watch(cb) {
  // body omitted
  cb();
}

//單一執行
exports.build = build;

//逐行執行
exports.default = series(clean, build, watch);

//組合執行 (深度執行)(同步執行)
exports.default = series(clean, parallel(build, watch));

排除

資料夾排除

['dist/**', '!dist/noDel', '!dist/noDel/**'];

除了 noDel 外的資料夾,其他通通都會吃到設定!

檔案排除

('src/**/!(_)*.html');

除了 檔案前綴有 _ 外 也都會吃到設定!


以上介紹 有錯歡迎指正

參考文件

對這篇文章有什麼想法嗎?

Copyright © 2023 Mandy. All rights reserved. Build with Astro