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就緩緩飄過了。

怎麼安裝

全局：npm i gulp -g
工程內部：npm i -D gulp
工程根目錄下創建gulpfile.js，它是配置文件。一個任務類似gulp.task('a',function(){});
在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

gulp是什麼？

爲什麼要使用它？

和grunt、webpack的區別

爲什麼要用4.0？

npm包管理

怎麼安裝

幾個API

gulp.src(globs[, options])

gulp.dest(path[, options])

gulp.watch(glob[, opts])

基本插件

明星插件

es6裝飾器異步使用

持續集成之測試篇

gulp小結

docker小結

持續集成之.gitlab-ci.yml篇

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結