gulp4.0升級小記

zorpan 發布于2019-08-23 18:12 / 2377人閱讀

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

前言

周日在公司的新電腦在以前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 */之間的代碼不會被刪除

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/104838.html

Vuex 升級入坑小記

摘要：升級入坑小記場景描述引入的版本為，開啟調試工具默認升級后可以調試。遂升級，發現大量使用失效，報，的中文文檔，沒有及時更新。機票訂單和用戶信息。 Vuex 升級入坑小記場景描述引入Vuex的版本為0.3，開啟調試工具默認升級后可以調試Vuex。給作者一個大大的贊。為提高開發體驗也是操碎了心 (??????)?? (8。安利下(Vue Devtools）。 Vue Devtools ...

ziwenxie 2019-08-19 17:56 評論0 收藏0
react-router 升級小記

摘要：前言最近將公司項目的從版本升到了版本，跟完全不兼容，是一次徹底的重寫。升級過程中踩了不少的坑，也有一些值得分享的點。沒有就會匹配所有路由最后不得不說升級很困難，坑也很多。前言最近將公司項目的 react-router 從 v3 版本升到了 v4 版本，react-router v4 跟 v3 完全不兼容，是一次徹底的重寫。這也給升級造成了極大的困難，與其說升級不如說是對 route...

isLishude 2019-08-21 18:30 評論0 收藏0
使用gulp配置代理，簡單解決前端跨域問題

摘要：配置代理，解決跨域問題簡單的解決跨域問題，有實時重新加載功能，適用于偶爾改個文件，或者活動頁上面有簡單的前后端交互初始化全局安裝本地下載包下載包新建文件實時重新加載啟動時默認瀏覽器打開的文件代理的域名因為升級到了，所以使 gulp配置代理，解決跨域問題簡單的解決跨域問題，有實時重新加載功能，適用于偶爾改個文件，或者H5活動頁上面有簡單的前后端交互 npm init初始化全局安裝gu...

taohonghui 2019-08-26 10:55 評論0 收藏0
async語法升級踩坑小記

摘要：普通的回調函數調用執行后續邏輯使用了以后的復雜邏輯獲取到正確的結果輸出兩個文件拼接后的內容雖說解決了的問題，不會出現一個函數前邊有二三十個空格的縮進。所以直接使用關鍵字替換原有的普通回調函數即可。從今年過完年回來，三月份開始，就一直在做重構相關的事情。就在今天剛剛上線了最新一次的重構代碼，希望高峰期安好，接近半年的Node.js代碼重構。包含從callback+async.w...

VioletJack 2019-08-23 12:10 評論0 收藏0
Django-Oscar小記：如何使用高版本Django開發網頁的SEO模塊

摘要：在使用搜索的插件時，很多插件都沒有更新到，有的插件更新到了的高版本，但是不適用于的。在升級到版本的時候刪除了很多類。正確指令不是，是完畢后，數據庫生成表。我們最終使用到的表就是。有了自己的基類之后，在中配置的父類。在使用Google搜索Django的SEO插件時，很多插件都沒有更新到Python3.x，有的插件更新到了Python的高版本，但是不適用于Django的2.x。 Django在升...

番茄西紅柿 2019-04-23 11:54 評論0 收藏0