November 18, 2014

Gulp

gulp
gulp.js
The streaming build system
http://gulpjs.com/

爲什麽要用 Gulp 自動化

如果你喜歡用 SASS 寫 stylesheet,每次寫完都要編譯,把 SASS 轉換到 CSS。如果你有用 IDE 或者其他工具(例如:CodeKit),有可能這些工作早就已经自動在後臺完成。如果你沒用這些工具,你需要手動輸入命令行來完成這些編譯/轉換。每次修改一點點,又需要輸入命令行,等待編譯,然後才能重刷游覽器。而每次修改一下,都需要這麽麻煩的過程。這衹是針對 SASS 的編譯,還沒算到優化化圖、照片,并接 CSS、JS。

又或者,你編輯 CSS 文件。一些地方需要 CSS 前綴。當然,Autoprefixer 可以自動幫你完成這個自動添加前綴。但是你每次都需要按一些快捷鍵。這只是添加前缀,還沒有并接(concatenate)、minify CSS文件。

這些過程時不時需要重複幾十次到上百次。爲什麽不把這些過程交給電腦處理呢?

這時你可以使用 Gulp 自動化這些過程。

Gulp.js 流式編譯系統(我叫它懶人系統)。他可以做:

  • 優化壓縮圖片
  • 自動編譯 sass
  • 自動添加 CSS prefix (webkit, moz)
  • 縮小 CSS、Javascript、HTML
  • 看守文件改動,自動重載頁面(開發超好用)。重載前,可以進行編譯,優化縮小,拼接……

Gulp 插件

Gulp 支持的插件不多,但對於前段開發者來説需要用到的都有了。

Gulp 插件:http://gulpjs.com/plugins/

下面是谷歌的 Web 基本法则推薦使用的插件

優化、縮小的插件:

拼接:

其它:

安裝 Gulp

# 系統安裝
$ npm install -g gulp

# 安裝到 package.json
$ npm install --save-dev gulp

# 建立 gulpfile.js 文件到項目的根目錄
$ touch gulpfile.js

*nix 用户需要添加 sudo 才能安装

*nix(Mac)用戶請看官方如何修改安裝 global 權限

默認的任務

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

執行 gulp,默認情況下是 default

$ gulp

執行指定任務

$ gulp TaskName

例子

先做別的任務,再做這個任務

var gulp = require('gulp');

// 需要 cb,這樣系統才知道任務完成了
gulp.task('one', function(cb) {
    // do stuff -- async or otherwise
    cb(err); // if err is not null and not undefined, the orchestration will stop, and 'two' will not run
});


// 做完 one,再執行 two
gulp.task('two', ['one'], function() {
    // task 'one' is done now
});


// 默認任務,執行 one,two,default
gulp.task('default', ['one', 'two']);

擴展閲讀

更新:

  • CSSO 好像沒繼續更新了, 用 gulp-minify-css 代替
  • 添加 yeoman 鏈接