gulp4.0升級小記

前言

週日在公司的新電腦在之前gulp3.9配置的目錄按下npm install時發現報了錯，百度了一下得知原來gulp已經到了4.0版本，就花了一點時間去升了個級，順便記下我我的使用到的配置文件新版本的不一樣點，文筆和水平有限，多多見諒

1. 新Api引入

// v3.9
let gulp = require('gulp');

// v4.0
const { series, src, dest, watch } = require('gulp');

// 新引入的src,dest可替換老版的gulp.src和gulp.dest，代碼更簡潔
// watch是任務監聽
// series是任務按順序執行

2. 新的建立任務方式

// 下面以壓縮圖片插件 gulp-imagemin 爲例

let imagemin = require('gulp-imagemin');

// v3.9
gulp.task('imagemin', () => {
  gulp.src('/path')
    .pipe(imagemin())
    .pipe(gulp.dest('/path'))
})

// 4.0
function minImage() {
    return src('/path')
            .pipe(imagemin())
            .pipe(dest('/path'))
}

// 新版本使用了函數和return進行任務設置，函數名不能和引入的插件變量名稱重複

3. 執行任務方式

// v3.9
gulp.task('default', [task1, task2])

// v4.0,taskFn是設置任務的函數名
function defaultTask() {
    return series(taskFn1, taskFn2, taskFn3);  // series讓任務按順序執行
}
export.default = defaultTask() // 輸出控制檯執行任務的名稱

// 新版本的export.xxxx，這個xxxx就是在控制檯中gulp執行任務的名稱，能夠同時export設置多個任務
// 例如export.dev= dev()，想執行dev函數中返回的任務就在控制檯輸入gulp dev加回車！，若是是export.build = build()，則在控制檯輸入gulp build加回車！，若是是export.default = default()，直接輸入gulp回車便可，以此類推

4. watch和series Api

// v3.9,老版本好像要安裝一個queue的插件才能夠實現按順序執行任務
let watch = require('gulp-watch');
gulp.task('watch', () => {
  gulp.watch(['filePath1', 'filePath2'], [task1, task2]);
});

// 4.0
const { watch, series} = require('gulp');
function watchTask() {
    // 注意這裏不須要使用return
    watch(['filePath1', 'filePath2'], series(taskFn1, taskFn2, taskFn3));
}

// 新版本直接引入watch便可實現任務監聽功能，不用安裝插件
// series也能夠配合watch按順序執行設置的任務函數

5. 插件gulp-autoprefixer配置變化

// v3.9
.pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false
}))

// v4.0，須要在package.json文件添加browserslist鍵名或者在根目錄添加一個.browserslistrc文件進行gulp-autoprefixer配置
// 詳情能夠參考：https://github.com/browserslist/browserslist#queries
.pipe(autoprefixer())

// .browserslistrc文件
last 1 version
> 1%
maintained node versions
not dead

// package.json
"browserslist": [
   "last 1 version",
   "> 1%",
   "maintained node versions",
   "not dead"
]

其餘的配置感受新版本和老版本都是大同小異，暫時就是發現了這麼多,親測可用

---

後記：

我是使用sass + gulp-autoprefixer進行開發的，無心發現當autoprefixer碰到-webkit-box-orient: vertical;時會自動把這個樣式給刪了 0.0，折騰了一番找到解決方法以下

-webkit-line-clamp: 3;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
overflow: hidden;

// 在/* autoprefixer: off */和/* autoprefixer: on */之間的代碼不會被刪除