Gulp筆記：安裝、撰寫Task、監看、例外錯誤處理和套件使用
Gulp是一套任務管理工具，讓前端的工作能自動化處理，例如：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：lee轉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、監看、例外錯誤處理和套件使用。