gulp使用流程及經常使用插件

引用借鑑：https://www.jianshu.com/p/82dfc29e70ab

本篇記錄gulp使用流程及經常使用插件。

1.gulp使用流程：

① 安裝依賴gulp包

全局命令：npm install -g gulp 
項目開發模式：npm install --save-dev gulp
項目生產模式：npm install --save gulp

②在項目根目錄下建立一個名爲 gulpfile.js 的文件

③重構項目文件夾結構，建立src文件夾，放置源代碼文件；建立dist目錄放置構建後文件

④在gulpfile.js文件中編寫任務

⑤下載gulp命令執行工具cli.    npm install gulp -cli -g（注意須要全局安裝）

二、gulp經常使用API（4種）

• ①gulp.src(globs[, options])
  注意：
  1. globs是字符串或數組，表示待處理文件的路徑，注意該路徑相對於gulpfile.js所在位置；
  2. globs寫法中，「app/**/*.js」表示app目錄下的任意子目錄下的後綴爲js的全部文件；

  3. options配置中最經常使用的是base:'somedir'，指定與不指定base的區別在於處理後的文件的位置。請看下圖：

      

     

     base的做用
     
     

     指定了base，那麼在build中構建後的文件目錄結構跟somedir的目錄結構相同

• ②gulp.dest(path[,options])
  注意：
  1. path能夠是路徑字符串或函數，當是函數時，該函數必須返回字符串；
  2. options中能夠配置cwd和mode，用的很少。
• ③gulp.task(name[, deps], fn)
  1. deps數組，表示前置依賴的任務，即在運行name任務以前運行的任務，通常這些任務是異步的（使用一個 callback，或者返回一個 promise 或 stream），大部分狀況下是使用返回stream的形式來實現異步
     
      

     

     stream實現異步
• ④gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])
  監聽文件，一旦文件發生改變就會執行tasks數組中指定的任務，或者執行cb函數，並觸發watcher的change事件

三、gulp簡單插件

壓縮模塊：

• gulp-imagemin 壓縮圖片
• gulp-htmlmin 壓縮html文件
• gulp-csso 壓縮CSS文件
• gulp-uglify 壓縮混淆Javascript文件

語法轉化：

• gulp-less  less語法轉化
• gulp-sass 編譯sass
• gulp-babel 將ES6代碼編譯成ES5

文件操做

• del (替代gulp-clean) 刪除整個文件夾
• gulp-rename 重命名文件
• gulp-concat  合併文件
• gulp-filter 在虛擬文件流中過濾文件。
• gulp-file-include 抽取文件公共代碼

四、複雜插件

• gulp-replace 對指定文件內容進行替換，能夠用正則
• gulp-usemin 將html中外鏈的css和js文件
• gulp-zip 將文件打包成zip
• gulp-sequence 串行執行任務，相對於gulp.task中依賴的任務是並行執行的
• gulp-rev-all 對js或css文件加MD5戳，緩存用
• gulp-postcss 與autoprefixer配合使用
• gulp-open 默認瀏覽器打開指定頁面

五、其餘node模塊

• autoprefixer 自動加瀏覽器前綴
• browser-sync 文件內容變化瀏覽器自動刷新
• yargs 處理node命令傳入的參數

cross-env 跨platform的命令處理，用法：cross-env NODE_ENV=production webpack --config build/webpack.config.js，若不加cross-env，

六、注意點

場景：任務A依賴任務B，C

• 一、前置任務B，C是併發執行的
• 二、前置任務B，C執行完畢後纔開始執行A
• 三、若想讓B，C串行執行，可以使用插件gulp-sequ