Gulp及其外掛程式介紹

2021-08-01 14:19:52 字數 1483 閱讀 9564

gulp是乙個前端的自動化構建工具，可以完成對前端資源的壓縮、合併、格式化以及版本管理，也可以監聽前端資源的變化去做一些自動化的構建工作

gulp也是乙個基於nodejs的自動任務執行器，所以使用gulp的時候要有一套node的環境，這裡對node的安裝就不再贅述了。結合社群裡好多優秀的gulp外掛程式可以實現前端資源自動整合打包版本管理的功能，這裡是gulp的官方:

使用npm進行安裝

npm install --global gulp
（也可以裝在本地，建議裝在全域性裡)

gulp.task(『default』, function


()
執行gulp：可以直接執行「gulp」指令來執行default任務（當單獨執行gulp的時候會執行default任務），如果想執行其他任務：「gulp 」，例如有兩個任務叫dev和rev，執行「gulp dev rev」（先執行dev）

gulp.task(『dev』, function())

主要參考：

這個是用來獲取檔案流的，將引數中匹配出來的檔案分別讀成檔案流，語法如下

//globs引數是檔案匹配的字串，符合glob語法


gulp.src(globs[, options]);
具體的glob語法：

這個方法用來新建乙個任務

第乙個引數是任務名

第二個引數可選，是在這個任務執行之前要執行的任務的集合

第三個引數為任務的具體操作函式

gulp.task(name[, deps], fn)


gulp.task(『filecopy』, function())


//將src下邊的所有js檔案複製到dist目錄下
這個方法是用來將檔案流寫到指定的位置，結合上面的例子，把所有js檔案複製到dist目錄下

gulp


.dest(path


[,options])
這個方法是用來監聽檔案變化的，當檔案變化要進行一些操作，算是gulp的乙個特殊的任務。

gulp


.watch(glob


[, opts], tasks)
第乙個引數是檔案匹配的字串，和src一樣，也遵循glob語法

第二個引數可選，一般不用

第三個引數是檔案變化之後要執行的任務的集合。

gulp.task(『dispose』, function


())；


gulp.task(『reload』, function


())；


gulp.watch(「/src/*.js」, [「dispose」, 「reload」])


//當src目錄下的js檔案變化了，執行dispose和reload兩個任務
常見的外掛程式請參考總結：

gulp常用外掛程式

本人就職於一家網際網路小公司，根據自己的專案紀錄一下常用的gulp外掛程式，專案不是很大！文章目錄 1.gulp load plugins 2.yargs 3.del 4.gulp filter 5.gulp header 6.run sequence 7.gulp uglify 8.gulp mi...

gulp常用外掛程式整理

1.gulp sass sass編譯 3.gulp autoprefixer 新增css3字首 4.gulp clean css 壓縮css 5.gulp include 檔案包含 6.gulp concat 檔案合併 7.del 檔案刪除 8.gulp uglify 壓縮js 9.gulp.spr...

gulp外掛程式功能總結

總結一下gulp外掛程式的功能用法 1.gulp less less轉css功能 2.gulp autoprefixer 給css新增瀏覽器私有化字首 3.gulp cssmin加粗樣式 壓縮css,把注釋換行消除 4.gulp rename 重新命名檔名 5.gulp imagemin 壓縮功能 ...