gulp4.0升級小記

zorpan 發(fā)布于2019-08-23 18:12 / 2376人閱讀

摘要：前言周日在公司的新電腦在以前配置的目錄按下時發(fā)現(xiàn)報(bào)了錯，百度了一下得知原來已經(jīng)到了版本，就花了一點(diǎn)時間去升了個級，順便記下我個人使用到的配置文件新版本的不同點(diǎn)，文筆和水平有限，多多見諒新引入新引入的可替換老版的和，代碼更簡潔是任務(wù)監(jiān)聽是任務(wù)

前言

周日在公司的新電腦在以前gulp3.9配置的目錄按下npm install時發(fā)現(xiàn)報(bào)了錯，百度了一下得知原來gulp已經(jīng)到了4.0版本，就花了一點(diǎn)時間去升了個級，順便記下我個人使用到的配置文件新版本的不同點(diǎn)，文筆和水平有限，多多見諒

1. 新Api引入

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

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

// 新引入的src,dest可替換老版的gulp.src和gulp.dest，代碼更簡潔
// watch是任務(wù)監(jiān)聽
// series是任務(wù)按順序執(zhí)行

2. 新的創(chuàng)建任務(wù)方式

// 下面以壓縮圖片插件 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"))
}

// 新版本使用了函數(shù)和return進(jìn)行任務(wù)設(shè)置，函數(shù)名不能和引入的插件變量名稱重復(fù)

3. 執(zhí)行任務(wù)方式

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

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

// 新版本的export.xxxx，這個xxxx就是在控制臺中g(shù)ulp執(zhí)行任務(wù)的名稱，可以同時export設(shè)置多個任務(wù)
// 例如export.dev= dev()，想執(zhí)行dev函數(shù)中返回的任務(wù)就在控制臺輸入gulp dev加回車！，如果是export.build = build()，則在控制臺輸入gulp build加回車！，如果是export.default = default()，直接輸入gulp回車即可，以此類推

4. watch和series Api

// v3.9,老版本好像要安裝一個queue的插件才可以實(shí)現(xiàn)按順序執(zhí)行任務(wù)
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即可實(shí)現(xiàn)任務(wù)監(jiān)聽功能，不用安裝插件
// series也可以配合watch按順序執(zhí)行設(shè)置的任務(wù)函數(shù)

5. 插件gulp-autoprefixer配置變化

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

// v4.0，需要在package.json文件添加browserslist鍵名或者在根目錄添加一個.browserslistrc文件進(jìn)行g(shù)ulp-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"
]

其他的配置感覺新版本和老版本都是大同小異，暫時就是發(fā)現(xiàn)了這么多,親測可用 后記： 我是使用sass + gulp-autoprefixer進(jìn)行開發(fā)的，無意發(fā)現(xiàn)當(dāng)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 */之間的代碼不會被刪除