Gulp部署

（本文是基於HKUST的NodeJS課程Gulp部分的學習筆記）
首先，Grunt和Gulp都是一種工作流設計的模式，分別採用了兩種有代表性的的工作流模型。
Grunt的工作是基於配置文件的。Grunt中各個module實現其各自的功能，並生成其對應的輸出結果。下一個module將之前生成的輸出結果作爲輸入文件使用。在整個流程完成後，文件系統中將遺留臨時文件。（與SAP BI Platform的管理工具的原理類似）
Gulp與Grunt不同，在於其代碼式的流程控制，而非配置式的。而且，Gulp借鑑了UNIX中Pipe的思想——A流程模塊的輸出將被直接Pipe到下一個流程模塊中，不產生中間文件。

在開始之前，項目一級目錄下有app文件夾包含了所有的web頁面信息，另外包含package.json配置文件，初始配置如下：

{
  "name": "gulpTest",
  "private": true,
  "devDependencies": {

  },
  "engines": {
    "node": ">=0.10.0"
  }
}

第一步，安裝gulp到NodeJS全局環境中，

npm install -g gulp

在項目一級目錄下執行命令：

npm install gulp --save-dev

第二步，安裝需要的gulp plugins，這將花費幾分鐘時間：

npm install jshint gulp-jshint jshint-stylish gulp-imagemin gulp-concat gulp-uglify gulp-minify-css gulp-usemin gulp-cache gulp-changed gulp-rev gulp-rename gulp-notify  browser-sync del --save-dev

關於這15個module的具體功能解釋，請參考gulp項目文檔。

第三步，編寫gulp代碼如下：

var gulp = require('gulp'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
uglify = require('gulp-uglify'),
usemin = require('gulp-usemin'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
changed = require('gulp-changed'),
rev = require('gulp-rev'),
browserSync = require('browser-sync'),
del = require('del');

gulp.task('jshint',
function() {
    return gulp.src('app/scripts/**/*.js').pipe(jshint()).pipe(jshint.reporter(stylish));
});

// Clean
gulp.task('clean',
function() {
    return del(['dist']);
});

// Default task
gulp.task('default', ['clean'],
function() {
    // the usemin, imagemin and copyfonts are running at the same time
    gulp.start('usemin', 'imagemin', 'copyfonts');
});

// the jshint task will be done before usemin assigned by the follow line code
gulp.task('usemin', ['jshint'],
function() {
    // core procedure
    return gulp.src('./app/index.html').pipe(usemin({
        css: [minifycss(), rev()],
        js: [uglify(), rev()]
    })).pipe(gulp.dest('dist/'));
});

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

gulp.task('copyfonts', ['clean'],
function() {
    gulp.src('./bower_components/font-awesome/fonts/**/*.{ttf,woff,eof,svg}*').pipe(gulp.dest('./dist/fonts'));
    gulp.src('./bower_components/bootstrap/dist/fonts/**/*.{ttf,woff,eof,svg}*').pipe(gulp.dest('./dist/fonts'));
});

// Watch
gulp.task('watch', ['browser-sync'],
function() {
    // Watch .js files
    gulp.watch('{app/scripts/**/*.js,app/styles/**/*.css,app/**/*.html}', ['usemin']);
    // Watch image files
    gulp.watch('app/images/**/*', ['imagemin']);

});

gulp.task('browser-sync', ['default'],
function() {
    var files = ['app/**/*.html', 'app/styles/**/*.css', 'app/images/**/*.png', 'app/scripts/**/*.js', 'dist/**/*'];

    browserSync.init(files, {
        server: {
            baseDir: "dist",
            index: "index.html"
        }
    });
    // Watch any files in dist/, reload on change
    gulp.watch(['dist/**']).on('change', browserSync.reload);
});

由於最近工作緊張，再次略去代碼解釋。希望下次回顧的時候能看懂……

最後，在一級目錄下運行命令：

gulp

可以看到dist文件夾成功生成。
在一級目錄下運行命令：

gulp watch

現在可以看到瀏覽器打開了本地的3000端口，刷新後index頁面出現。在文件系統中修改index文件，可以看到瀏覽器同步刷新該修改。