Gulp 是我目前最使用的自動化工具，在先前一篇也有介紹有哪些自動化工具，這篇開始會介紹 Gulp 自動化工具如何使用、有哪些推薦的工具以及一些經驗上的分享。而本次系列文都是著重在 CSS 的開發，所以不會介紹 Javascript 的自動化工具。

Gulp 可以做什麼？

Gulp 是一個前端任務管理工具，它可以做到如Fire.app、Prepros、Grunt等等所能做的事情，簡單內容如下：

• 編譯 SASS、Coffeescript
• 壓縮 .CSS, .JS, 甚至圖檔
• web server with Livereload
• 享受自己動手做Task工具的快感
• others..

雖然很多工具，都能做到類似的功能，但是如果需求不足的時候，就要開另一個工具來幫忙；另外許多專案已經在執行中或者是老專案，有些工具就會顯得限制太多，那麼就可以用gulp客製化屬於該專案使用的工具。

快速建置

在開始使用 Gulp 前，需要先安裝 Node.js，Node.js 是一個讓 Javascript 運行在服務端的開發平台。
另外還有 npm，是由 Node.js 官方提供的第三方管理工具，並且是一種在 Node.js 應用程式中建立、分享、重複使用模組，而 npm 在目前的版本，都會隨著 Node.js 的安裝同時安裝好 npm。

簡而言之，我們使用 Node.js 的服務以及透過 npm 管理工具。

這一部分網路上有相當多的文章，本篇就不再贅述。

透過範例來了解如何運行

這邊我準備了一個很簡單的 Gulp Sass 案例：

https://github.com/Wcc723/ironman-gulp-sass/tree/v0.1.sass

下載後，在 Terminal 打開這個專案，並輸入以下指令：

npm install gulp -g
npm install

這就是透過 npm 來安裝相關所需的套件，npm install gulp -g 會在全域環境下安裝 gulp，npm install 則是會安裝專案內的 package.json 所列出的需要元件。

package json 如下，這範例中只會安裝 gulp、gulp-sass。

{
  "name": "gulp-sass",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-sass": "^2.3.2"
  }
}

接下來在執行：

gulp sass

執行後就會將 source/scss/all.scss 編譯到 public/stylesheets/all.css ，此時整個範例流程也就結束。

解說

在一開始下載時檔案結構如下：

|- /source/scss   # 專案資料夾 (sass 位置)
|- .gitignore
|- gulpfile.js    # gulp 腳本檔案
|- package.json   # 套件管理 json

執行完以上步驟後，資料夾結構會如下，node_modules 是運行 gulp 的套件資料工具資料夾，public 就是前端匯出的專案資料夾，在這個範例中我們可以將 public 指定任何的資料夾名稱與後端結構配合。

|- /source/scss   # 專案資料夾 (sass 位置)
|- /mode_modules  # node.js 套件資料夾
|- /public        # 專案匯出的資料夾
|- .gitignore
|- gulpfile.js    # gulp 腳本檔案
|- package.json   # 套件管理 json

gulpfile.js 是整個 gulp 的核心，相當於一齣戲的劇本，開發者可以在腳本中定義自動化的運行流程，這邊用相當簡單的 gulp-sass 來介紹怎麼撰寫一份 gulpfile。

var gulp = require('gulp');  // 將 node_modules 的檔案載入
var sass = require('gulp-sass');

gulp.task('sass', function () {     // 定義 sass 的任務名稱
  return gulp.src('./source/scss/**/*.scss') // sass 的來源資料夾
    .pipe(sass(                     // 編譯 sass
      {outputStyle: 'expanded'}     // sass 的輸出格式
    ).on('error', sass.logError))
    .pipe(gulp.dest('./public/stylesheets')); // sass 編譯完成後的匯出資料夾
});

gulp.task('sass:watch', function () {
  gulp.watch('./source/scss/**/*.scss', ['sass']); 
  // 監控資料夾，當有變化時執行 'sass' 任務
});

範例中的 watch 資料夾有誤，請稍做調整如本文

所以開發者可以定義相當多的 Task，就以本範例中還有一個監控的任務可以使用 gulp sass:watch，如果不想要一直重啟 gulp 來編譯 sass 可以使用此指令。

結語

接下來連續幾篇都會介紹 gulp 以及與 CSS 相關的套件給大家參考。