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

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)

列舉一些常用套件。


References


由於部落格搬家了,因此在新落格也放了一份,未來若有增刪會在這裡更新-Gulp 筆記:安裝、撰寫 Task、監看、例外錯誤處理和套件使用

留言