攻城獅跳火圈

在前端的開發過程中，目前已經有許多工具，幫助我們提升開發效率，或是網站執行效率等。例如使用JADE製作Template，或是使用CoffeeScript, TypeScript等Script的轉譯語言，以及使用SASS寫CSS。寫完後，又需要將js檔以及css檔進行打包及壓縮等動作。這些繁瑣且重複的工作，都會讓我們的工作過程中斷，阻礙我們的心流。軟體開發的DRY(Don't Repeat Yourself)的原則，其實也可以套用在做事方法上。這些Repeat的工作，我們就不要重做了，通通交給gulp處理。

在ASP.NET MVC中，有一條作為核心的原則，就是DRY(「Don』t Repeat Yourself，中文意思為：不要讓開發者重複做同樣的事情)原則。ASP.NET MVC提倡讓開發者「一處定義、處處可用」。這樣可以減少開發者的代碼編寫量，同時也更加便於代碼的維護。

安裝Gulp

Step 1:全域安裝gulp

跟其他的前端工具一樣，安裝很簡單，使用npm就對了。沒有npm，去Node.js官網下載安裝程式並進行安裝就可以了。之後，在Command Line下這行指令

npm install gulp -g

這會將gulp進行全域安裝，之後，無論在任何目錄中，我們都可以在Command Line中直接執行gulp的指令。

 

Step 2:安裝gulp在專案中

安裝完後，在我們的專案目錄下，再另外執行底下這行指令，安裝gulp在我們的專案參考中(紀錄於package.json)，這樣才可以透過javascript去執行gulp的功能。

npm install  gulp --save-dev

 

Step 3:安裝gulp plug-in(外掛)

gulp可以擁有那麼多功能的support，是因為背後有許多人寫ping-in(外掛)以支援許多功能，這些plug-in可以由官網的plug-in頁面找到，目前已經有1803個plug-in可以用。而這些plug-in也是透過npm就可以安裝了。舉例來說，如果要安裝gulp-Uglify以壓縮js檔，就可以使用以下的指令

npm install  gulp-uglify --save-dev

 

至於有哪些常用的plug-in可用，可以參考Gulp入門指南，它列出了幾個plug-in如下：

 

• 編譯 Sass（gulp-ruby-sass）
• Autoprefixer（gulp-autoprefixer）
• 縮小化（minify）CSS（gulp-minify-css）
• JSHint（gulp-jshint）
• 串接（gulp-concat）
• 醜化（Uglify）（gulp-uglify）
• 壓縮圖檔（gulp-imagemin）
• 即時重整（LiveReload）（gulp-livereload）
• 快取圖片，只有變更的圖檔才會壓縮處理（gulp-cache）
• 通知更動（gulp-notify）
• 清除檔案，有個乾淨的建構環境（del）

 

gulp API

gulp的API只有少少的幾個，但就足以完成大部分的工作。gulp API 說明文件說明的很詳細，這邊就只是簡單的介紹

• gulp.src - 指定要處理的檔案
• gulp.dest - 指定處理後，檔案的存檔路徑
• gulp.task - 定義一個gulp的任務，包含任務名稱、任務內容script
• gulp.watch - 指定監看的檔案，當那些檔案們更新時，就執行某些任務
• gulp.run - 執行指定的任務

gulp.src(globs[, options])

gulp任務一開始一定是要先指定須被處理的檔案或目錄在哪裡，指定位置的語法是使用node-glob。雖然看起來有點小複雜，但看example一下子就瞭解了

gulp.src('src/scripts/**/*.js')

這是把src/scripts目錄底下的所有js檔都當作要處理的目標

gulp.src(globs[, options])回傳的是一個stream，簡單的來說，就是可以透過pipe()來串接處理的程序。而我們還可以在pipe()中使用gulp plug-in(外掛)來執行一些工作。所以，會看到如下方類似的code。

gulp.src('client/templates/*.jade')
  .pipe(jade())
  .pipe(minify())
  .pipe(gulp.dest('build/minified_templates'));

gulp.dest(path[, options])

有開始，就會有結束。gulp.dest()設定了要儲存的路徑，這個function其實也是回傳stream，所以後面還可以繼續pipe()下去，例如把檔案壓縮後，再另存到另一個位置。

gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));

gulp.task(name[, deps], fn)

gulp的一個執行單位就是task，使用gulp.task()就可以定義一個task在gulp的執行環境中。其使用方式如下

gulp.task('somename', function() {
  // Do stuff
});

 

第一個參數是task的名稱，第二個參數是該task要執行的工作內容。可以注意到，第二個參數是function(){}，所以可以使用javascript撰寫要處理的邏輯。通常，就是使用gulp plug-in執行一些工作，就像底下的example

gulp.task('images', function() {  
  return gulp.src('src/images/**/*')
    .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
    .pipe(gulp.dest('dist/assets/img'))
    .pipe(notify({ message: 'Images task complete' }));
});

 

如果執行此task之前，需要先行執行其他的task，則可以插入一個task名稱的陣列的參數在gulp.task()中，如下所示:

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
  // Do stuff
});

gulp.watch(glob[, opts], tasks)

這個function很簡單明確，直接看code就知道了

gulp.watch('src/scripts/**/*.js', ['jobScripts']);

 

這是指當src/scripts目錄下的js檔變動時，就執行名為jobScript的gulp task。

 

開始使用gulp

要使用gulp在專案中，就需要在專案的根目錄下建立一個gulpfile.js，然後在裡面定義我們要執行的task。建立好這個file之後，我們就可以在Command Line視窗中下指令

gulp [task名稱]

只要指定task名稱，就可以執行該task。或是直接下gulp這個指令，gulp就會找名稱為default的task來執行。

底下是一個gulpfile.js的example，做為參考之用

 

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var imagemin = require('gulp-imagemin');
var notify = require('gulp-notify');


gulp.task('js-minify', function () {
   gulp.src('bundle.js')
      .pipe(uglify())
      .pipe(rename('bundle.min.js'))
      .pipe(gulp.dest('./'))
});

gulp.task('image-minify', function() {
  return gulp.src('src/images/**/*')
    .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
    .pipe(gulp.dest('dist/assets/img'))
    .pipe(notify({ message: 'Images task complete' }));
});

gulp.task('default', ['js-minify','image-minify']);

 

---

參考：

• gulp API 說明文件
• Gulp入門指南
• OXXO - Gulp介紹
• Gulp Task and Gulp Pipe
• Slideshare-使用Gulp自動化流程
• Glup整合Visual Studio
• Geting Start with Gulp