使用 gulp.js 讓流程自動化

gulp 中文語意是:吞嚥, 我覺得翻譯成 '嗑' 比較貼切. 它就是將東西吞下去. 當我們寫了許多Javascript 要將它整合成一個檔案並將它醜化,需要通過工具程式及一些流程來完成. 當然用Makefile 就可做到, 但寫個 Makefile 很麻煩,要考慮檔案的相關性,用 gulp.js 很直覺就能直接使用,且他是用 Javascript 語法, 對於寫 Javascript 來說相當便利.但 gulp.js 可不只這樣, 他還可以讓各個流程同時進行.先簡單以上述例子來練習. 先用 sudo npm -g 來安裝 gulp 及 requirejs , linux mint 會將它放在 /usr/lib/node_modules 目錄裏面:
                       sudo npm install gulp requirejs -g
再切換到專案目錄,安裝所需要的工具模組(例如串接檔案成單一個, 去醜化等):
                       cd /home/mint/myproject
                       npm install gulp-concat gulp-uglify
接著寫一個 gulpfile.js 讓 gulp 根據文件內容去執行.下面例子是將 1.js, 2.js, 3.js 結合成單一檔案 my.js, gulp.task 用來自訂一個流程, 第一個參數是自定的名稱, 第2個參數是匿名函數,實現
流程化, 在流程化裏面可以直接套用 gulp 的函數諸如 .src .pipe .dest 等等. 通過管線(.pipe)就可以將輸出/入檔案相互串接,達到想要完成的目的(流程).

         // gulpfile.js
         var gulp = require('gulp');
         var concat = require('gulp-concat');
         var uglify = require('gulp-uglify');
         gulp.task('combine', function() {
                  // .src( string_array ) -> .pipe(function( )  ) -> .pipe( function( ) ) -> .pipe( function( ) )
         gulp.src(['1.js', '2.js', '3.js']).pipe(concat('my.js')).pipe(uglify()).pipe(gulp.dest('build/'));
         });

最後要執行該流程時,將流程名稱提供給 gulp, 鍵入以下命令:

         gulp combine

在 build/ 目錄內就會生成一個醜化過後的檔案  my.js
對於其他檔案例如 index.htm 想要複製到 build 目錄裏面時, 也可以自定一個流程將檔案複製過去:
         gulp.task('copy', function() {
                  gulp.src('index.htm').pipe(gulp.dest('build/'));
         });
將所有的流程集合到一個字串陣列,並命名一個 gulp 內定名稱 'default', 就可以讓上述兩個流程同時進行:
          gulp.task('default', ['combine', 'copy']);
完整的內容如下:
         // gulpfile.js
         var gulp = require('gulp');
         var concat = require('gulp-concat');
         var uglify = require('gulp-uglify');
         gulp.task('default', ['combine', 'copy']);
         gulp.task( 'combine', function() {
                gulp.src(['1.js', '2.js', '3.js']).pipe(concat('my.js')).pipe(uglify()).pipe(gulp.dest('build/'));
         });

         gulp.task('copy', function() {
                  gulp.src('index.htm').pipe(gulp.dest('build/'));
         });

要執行上述並行流程並不需要再提供流程名稱, gulp 會先找到 qulpfile.js, 再到檔案裏面找尋 default 這個流程名稱,解析它並自動執行,因此只要鍵入以下命令就可:

          gulp

另外在 linux 下面透過 cat 其實就可以將檔案合併, 透夠管線, 一條指令就可以達到上述同樣功能了:
          cat 1.js 2.js 3.js | ugilfyjs > my.js