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));});// Cleangulp.task('clean',function() {    return del(['dist']);});// Default taskgulp.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 codegulp.task('usemin', ['jshint'],function() {    // core procedure    return gulp.src('./app/index.html').pipe(usemin({        css: [minifycss(), rev()],        js: [uglify(), rev()]    })).pipe(gulp.dest('dist/'));});// Imagesgulp.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'));});// Watchgulp.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文件，可以看到浏览器同步刷新该修改。