gulp入門

在Javascript的開發過程當中，常常會遇到一些重複性的任務，好比合並文件、壓縮代碼、檢查語法錯誤、將Sass代碼轉成CSS代碼等等。一般，咱們須要使用不一樣的工具，來完成不一樣的任務，既重複勞動又很是耗時。grunt，gulp都是爲了解決這個問題而發明的工具，能夠幫助咱們自動管理和運行各類任務，不少人認爲，在操做上，它要比Grunt簡單。

安裝

gulp須要全局安裝，而後再在項目的開發目錄中安裝爲本地模塊。先進入項目目錄，運行下面的命令。

npm install -g gulp

npm install --save-dev gulp複製代碼

gulpfile.js

項目根目錄下建立一個名爲 gulpfile.js 的文件，此文件爲gulp的配置文件：

var gulp = require('gulp');

gulp.task('mini', function() {
  // 將你的默認的任務代碼放在這
});複製代碼

而後使用下面命令便可：

$ gulp mini複製代碼

若是任務名爲默認的default，則直接使用gulp命令便可。

思想

gulp.task('js', function () {
  return gulp.src('js/*.js')
    .pipe(jshint())
    .pipe(uglify())
    .pipe(concat('app.js'))
    .pipe(gulp.dest('build'));
});複製代碼

gulp是基於管道的思想，因此能夠看出，gulp首先經過src讀取文件產生數據流，而後通過一系列pipe操做，最後經過dest方法將數據流寫入文件build.js中。

API

src

用於產生數據流，參數爲符合所提供的匹配模式（glob）或者匹配模式的數組（array of globs）的文件。

glob模式是匹配路徑與文件的模式，相似正則表達式。下面爲部分語法：

• *
  匹配該路徑段中 0 個或多個任意字符，

• ?
  匹配該路徑段中 1 個任意字符，

• [...]
  匹配該路徑段中在指定範圍內字符，

• !(pattern|pattern|pattern)
  匹配除所給出的模型之外的狀況，

• ?(pattern|pattern|pattern)
  匹配所給出的模型中的 0 個或任意 1 個，

• +(pattern|pattern|pattern)
  匹配所給出的模型中的 1 個或者多個，

• *(pattern|pattern|pattern)
  匹配所給出的模型中的 0 個或多個或任意個的組合.

• @(pattern|pat*|pat?erN)
  匹配所給出的模型中的任意 1 個，

• **
  與 * 同樣能夠匹配任何內容，但 **不只匹配路徑中的某一段,並且能夠匹配 a/b/c 這樣帶有 / 的內容，因此，它還能夠匹配子文件夾下的文件.

更加詳細的，能夠見glob-primer

dest

將管道的輸出寫入文件，並且這些輸出還能夠繼續輸出，因此能夠屢次調用dest方法，將輸出寫入到多個目錄。目錄不存在，也會被新建。

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

還能夠接受對象做爲第二個參數，其中對象有兩個字段，cwd表示寫入路徑的基準目錄，默認是當前目錄，mode表示權限，默認爲0777（這裏是與linux文件權限相關，不懂能夠見這個）

task

用於定義具體任務，它的第一個參數是任務名，第二個參數是任務函數。

task方法還能夠指定按順序運行的一組任務。

gulp.task('build', ['greet']);複製代碼

這時，build會在後面任務完成以後開始。

watch

watch方法用於指定須要監視符合所提供的匹配模式（glob）或者匹配模式的數組（array of globs）的文件。一旦這些文件發生變更，就運行指定任務。

gulp.task('watch', function () {
   gulp.watch('templates/*.tmpl.html', ['build']);
});複製代碼

上面代碼指定，一旦templates目錄中的模板文件發生變化，就運行build任務。

經常使用插件

• gulp-load-plugins：自動加載 package.json 中的 gulp 插件，避免一個個require插件
• gulp-rename： 重命名
• gulp-uglify：文件壓縮
• gulp-concat：文件合併
• gulp-less：編譯 less
• gulp-sass：編譯 sass
• gulp-clean-css：壓縮 CSS 文件
• gulp-htmlmin：壓縮 HTML 文件
• gulp-babel: 使用 babel 編譯 JS 文件
• gulp-jshint：jshint 檢查
• gulp-imagemin：壓縮jpg、png、gif等圖片
• gulp-livereload：當代碼變化時，它能夠幫咱們自動刷新頁面，除在模塊中須要安裝外，還須要在瀏覽器中安裝。

更多插件，能夠去官網搜索

參考資料

gulp官方文檔
gulp中文文檔
阮老師關於gulp講解
gulp 基礎與原理

---

歡迎訂閱掘金專欄和知乎專欄