gulp小結

gulp是什麼？

一個自動化構建工具，基於nodejs的自動任務運行器。

爲何要使用它？

易於使用，易於學習。它能自動化地完成javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。在實現上，她借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操做上很是簡單。

和grunt、webpack的區別

gulp和grunt很是相似，但相比於grunt的頻繁IO操做，gulp的流操做，能更快地更便捷地完成構建工做。前二者定位是工具，webpack則是種模塊化解決方案。

說到 browserify / webpack ，那還要說到 seajs / requirejs 。這四個都是JS模塊化的方案。其中seajs / require 是一種類型，browserify / webpack 是另外一種類型。

seajs / require : 是一種在線"編譯" 模塊的方案，至關於在頁面上加載一個 CMD/AMD 解釋器。這樣瀏覽器就認識了 define、exports、module 這些東西。也就實現了模塊化。

browserify / webpack : 是一個預編譯模塊的方案，相比於上面 ，這個方案更加智能。

gulp也能調用webpack。

爲何要用4.0？

• 組合任務。

  好比之前的gulp對多個異步任務很難控制，必須藉助於第三方模塊，如run-sequence、event-stream等，效果也並不理想。

  如今gulp帶來了兩個新的api：gulp.series【順序】和gulp.parallel【並行】，這兩個革命性的api將幫助開發者解決惱人的任務流程控制問題。

//clear任務執行完後，纔會執行copy
gulp.task("build",
  gulp.series("clear","copy")
 );

//inject:home和inject:list這2個任務同時執行
 gulp.task("inject-all",
  gulp.parallel("inject:home",
    "inject:list"
  )
 );

小技巧：一個任務中須要當即執行一下任務，之前版本有gulp run XX，新的沒有，但能夠這樣：

gulp.parallel('XX')();
gulp.series('XX')();

• 支持異步任務

  有3種方式確認gulp可以識別任務什麼時候完成。後2者重要是return

• 回調
• 返回一個流
• 返回一個Promise

  更多參見這篇文章：http://codecloud.net/10666.html

npm包管理

包管理主要在根目錄下的 package.json文件。
scripts中是一些npm的任務，npm run dev 便可執行。

dependencies是項目中必須的包，目前咱們沒有用到，只有個vue。
devDependencies是開發所用的包，發佈到生產環境不須要的都放在這裏，平時安裝時須要用npm install -save-dev XX，可簡寫做npm i -D XX。

同時安裝多個包能夠這樣：npm install -save-dev aa bb。或者將包複製到package文件裏，直接在根目錄命令行裏npm i或npm install。

包的版本：如"vue": "^2.0.1"

一個完整的版本號組表示爲： [主要版本號，次要版本號，補丁版本號]
~會匹配最新的子版本（中間那個數字），好比~1.2.3會匹配全部的1.2.x版本，但不匹配到1.3.0及以上
^會匹配最新的主版本（第一個數字），好比^1.2.3將會匹配全部的1.x.x版本，2.0.0就緩緩飄過了。

怎麼安裝

1. 全局：npm i gulp -g
2. 工程內部：npm i -D gulp
3. 工程根目錄下建立gulpfile.js，它是配置文件。一個任務相似gulp.task('a',function(){});
4. 在webstorm中右鍵gulpfile.js 選擇Show Gulp Tasks打開Gulp窗口，雙擊任務a便可。

或者在命令行中，輸入gulp a

幾個API

gulp.src(globs[, options])

輸出符合所提供的匹配模式或者匹配模式的數組的文件。將返回一個流，它能夠被 pipe 到別的插件中。

gulp.src('client/templates/*.jade')
 .pipe(jade())
 .pipe(minify())
 .pipe(gulp.dest('build/minified_templates'));

• globs能夠是字符串，也能夠是數組，相對路徑或絕對路徑均可以。舉個例子：

["src/**/*.html", "!src/*.html", "src/play.html"]

表示目標是src下全部的html文件，但不包括根目錄的html文件，卻要包含根目錄下play.html。

• options：經過 glob-stream 所傳遞給 node-glob的參數，可傳可不傳。

options.buffer 類型： Boolean 默認值： true

若是該項被設置爲 false，那麼將會以 stream 方式返回 file.contents 而不是文件 buffer的形式。這在處理一些大文件的時候將會頗有用。

options.read 類型：Boolean 默認值： true

若是該項被設置爲false，那麼file.contents會返回空值（null），也就是並不會去讀取文件。只獲取文件路徑，不須要讀取內容時有用。

options.base

舉個例子感覺一下，好比一個路徑爲 client/js/somedir 的目錄中，有一個文件叫 somefile.js ：

gulp.src('client/js/**/*.js') // 匹配 'client/js/somedir/somefile.js' 而且將 `base` 解析爲 `client/js/`
    .pipe(minify())
    .pipe(gulp.dest('build'));  // 寫入 'build/somedir/somefile.js'

gulp.src('client/js/**/*.js', { base: 'client' })
    .pipe(minify())
    .pipe(gulp.dest('build'));  // 寫入 'build/js/somedir/somefile.js'

gulp.dest(path[, options])

能被 pipe 進來，而且將會寫文件。而且從新輸出（emits）全部數據，所以你能夠將它 pipe 到多個文件夾。若是某文件夾不存在，將會自動建立。

• path 類型： String or Function

文件將被寫入的路徑（輸出目錄）。也能夠傳入一個函數，在函數中返回相應路徑

• options 類型： Object

options.cwd 類型： String 默認值： process.cwd()

輸出目錄的 cwd 參數，只在所給的輸出目錄是相對路徑時候有效。

options.mode 類型： String 默認值： 0777

八進制權限字符，用以定義全部在輸出目錄中所建立的目錄的權限。

gulp.watch(glob[, opts])

舊版本有個參數回調，好比：

gulp.watch('js/**/*.js', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

將變爲：

var watcher = gulp.watch('js/**/*.js' /* 你也能夠在這兒傳入一些選項與/或一個任務函數 */);
watcher.on('all', function(event, path, stats) {
  console.log('File ' + path + ' was ' + event + ', running tasks...');
});

或監聽單獨的事件類型，基本的3種：增、刪、改

watcher.on('change', function(path, stats) {
  console.log('File ' + path + ' was changed, running tasks...');
});

watcher.on('add', function(path) {
  console.log('File ' + path + ' was added, running tasks...');
});

watcher.on('unlink', function(path) {
  console.log('File ' + path + ' was removed, running tasks...');
});

基本插件

• 引用文件夾：require-dir

• 壓縮js：gulp-uglify

  有細節能夠配置

  uglify({
    compress: {
      drop_console:true, //刪除console，默認false
      drop_debugger: false//忽略debugger，默認true
    }
   }

• 合併js：gulp-concat
• 壓縮圖片：gulp-imagemin
• 壓縮html：gulp-htmlmin
• 壓縮css：gulp-clean-css
• 壓縮成zip包：gulp-zip

明星插件

• 簡化書寫gulp插件：gulp-load-plugins

  var $ = require('gulp-load-plugins')();
  gulp.src('from')

  .pipe($.if(condition,$.uglify())//去除前面的'gulp-'
  .pipe($.cleanCss())//原來名字叫gulp-clean-css，以駝峯形式使用
  .pipe(gulp.dest('dist'));

• 重命名：gulp-rename

  gulp.src('from').pipe(uglify())

  .pipe(rename('XX'))
  .pipe(gulp.dest('dist'));

• 條件：gulp-if

返回爲true,調用後面的方法，其它不用。適用於既不肯意壓縮或其它，但又必要將文件複製到指定目錄的狀況。

gulp.src('from')
    .pipe(if(function(file){
        if (file.path.endsWith('.min.js')) {
          return false;
        }
        return true;
    },uglify()))
.pipe(gulp.dest('dist'));

• 緩存：gulp-cache

很是有用，會將方法執行的結果緩存起來，當文件改變後，會從新執行方法，其它文件依然直接從緩存中讀取結果。整個工程壓縮完js須要2分鐘以上，使用緩存後只須要1秒鐘。js、css、圖片這些大件耗時的都要用到。

注意：方法配置修改之後，緩存就沒用了，須要手動刪除緩存文件夾

gulp.src('from')
    .pipe($.cache($.uglify(), {
      fileCache: new Cache({
        "cacheDirName": "test",//緩存文件夾名稱，默認爲gulp-cache
        "tmpDir": "D:\\Documents\\gulp-cache"//指定一個本地的緩存目錄，默認爲C:\Users\Administrator\AppData\Local\Temp，建議換個目錄，由於通常會看成垃圾清除掉
      }),
      name: 'js'//緩存文件夾名稱再下一級的子目錄，本例相似：D:\\Documents\\gulp-cache\\test\\js
    }))
    .pipe(gulp.dest('dist'));

• 系統提醒：gulp-notify

gulp.src('from')
        .pipe($.zip('map.zip'))
        .pipe(gulp.dest('dist'))
        .pipe($.notify({message: 'map壓縮完成'}));

• 文件注入：gulp-inject

gulp.src('from', {cwd: "./src/entry/"})
        .pipe($.inject(gulp.src(['XX'], {read: false, cwd: 'XXdir'}), {
          relative: true,
          starttag: "<!-- start:pluginsJs -->",
          endtag: "<!-- end:pluginsJs -->",
          transform: function(filePath, index){
            return '<script src="' + filePath.substr(index) + '">' + '<' + '/script>';
          }
        }))

• 回調地獄終結者：q

  q就是一個Promise庫，提供額外的接口能夠封裝普通函數爲Promise。

詳見：http://blog.csdn.net/ii1245712564/article/details/51419533