Gulp 筆記：安裝、撰寫 Task、監看、例外錯誤處理和套件使用
20 Aug 2016Gulp 是一套任務管理工具，讓前端的工作能自動化處理，例如：js 和 css 最小化、瀏覽器檢視、通知、檔名變更、加入版號等等。這裡做一些簡單筆記。
安裝
- 全域安裝 gulp 套件：
npm install -g gulp - 在個別專案資料夾下安裝 gulp 套件，並只用於開發環境：
npm install --save-dev gulp
撰寫 gulpfile.js
在專案資料夾底下新增 gulpfile.js。執行指令 gulp 後，會執行預設的 Task 「default」。
var gulp = require('gulp');
gulp.task('default', function () {
console.log('執行預設工作。');
});
撰寫 Task
定義不同的工作。
var gulp = require('gulp');
gulp.task('default', function () {
console.log('執行預設工作。');
});
gulp.task('another', function () {
console.log('執行另一個工作。');
});
執行工作「another」。
gulp another
監看（Watch）
監看。意即只要程式碼有變動，就立刻執行某個指定的工作。如下範例，執行指令 gulp，就會執行預設工作「default」。而「default」會依序去執行「scripts」和「watch」。然後，「watch」會 監看 特定資料夾的特定檔案（在這裡是指定 public/javascripts 下的所有 js 檔案），檔案一有變動變執行「scripts」工作。最後，「scripts」工作會將 js 檔案做最小化，並將最小化後的檔案放到 public/javascripts/minify 底下。
var gulp = require('gulp'), gulpUglify = require('gulp-uglify');
gulp.task('default', ['scripts', 'watch']);
gulp.task('watch', function() {
gulp.watch('public/javascripts/*js', ['scripts']);
});
gulp.task('scripts', function() {
gulp.src('public/javascripts/*js')
.pipe(gulpUglify())
.pipe(gulp.dest('public/javascripts/minify'));
});
例外 / 錯誤處理
可使用 gulp-plumber 或 gulp-util 來處理例外或報錯，讓監看不中斷。
套件（Plugins）
列舉一些常用套件。
- gulp-uglify：最小化 js 檔案。
- gulp-less：將 less 轉為 css。
- gulp-changed：只處理有變動的檔案。
- gulp-livereload：自動重新載入頁面。
- gulp-notify：通知。
- browser-sync：瀏覽器同步檢視。
- gulp-rename：將產生的檔案重新命名。
- gulp-rev：加入版號。
- less-plugin-clean-css：less 轉 css 後並最小化 css 檔案。
- gulp-clean-css：最小化 css 檔案。
- gulp-image-optimization：壓縮圖檔。
- gulp-watch-less：監看
.less與 其 import 的檔案。 - gulp-util：報錯處理。
- through2：node stream 的簡單封裝，讓 transform stream 操作更簡單。
- gulp-plumber：報錯處理。
References
這篇文章的原始位置在這裡-Gulp 筆記：安裝、撰寫 Task、監看、例外錯誤處理和套件使用
由於部落格搬遷至此，因此在這裡放了一份，以便閱讀；部份文章片段也做了些許修改，以期提供更好的內容。
