↓Skip to main content

Gulp

Dev
Table of Contents

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 鏈接