Gulp 筆記:安裝、撰寫 Task、監看、例外錯誤處理和套件使用

Gulp 是一套任務管理工具,讓前端的工作能自動化處理,例如:js 和 css 最小化、瀏覽器檢視、通知、檔名變更、加入版號等等。這裡做一些簡單筆記。

安裝

撰寫 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)

列舉一些常用套件。

References


這篇文章的原始位置在這裡-Gulp 筆記:安裝、撰寫 Task、監看、例外錯誤處理和套件使用

由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。

gulp