@第一步：安裝Node環境

可以在這裡下載node進行安裝 https://nodejs.org/en/download/  

安裝完成後在命令列輸入node -v 可以看到版本號則安裝成功

@第二部：推薦安裝 cnpm

npm伺服器在國外，網路影響大，甚至還會遇到需要翻牆才能下載外掛的情況，因此推薦安裝cnpm。 注：cnpm跟npm用法完全一致，只是在執行命令時將npm改為cnpm

安裝命令:   npm install cnpm -g --registry=https://registry.npm.taobao.org

執行cnpm -v 顯示版本號即安裝成功 

@第三部： 安裝gulp

安裝命令：cnpm install gulp -g

-g表示在全域性環境安裝，以便任何專案都能使用它

執行 gulp -v 顯示版本號即安裝成功 

@第四部：建立一個專案目錄，初始化配置檔案

webapp就是我新建的目錄。

命令列進入到目錄F:\webapp

執行命令 cnpm init 來新建package.json     直接回車預設值即可

注：package.json是基於nodejs專案必不可少的配置檔案.

@第五步：安裝gulp依賴包到專案中

注：全域性安裝gulp是為了執行gulp任務，本地安裝gulp則是為了呼叫gulp外掛的功能 進入你的專案檔案路徑中後，執行cnpm install gulp --save-dev 

@第六步：安裝外掛

cnpm install gulp-load-plugins

cnpm install gulp-clean

cnpm install gulp-rev-collector

cnpm install jshint

cnpm install gulp-minify-html

專案結構

編輯gulpfile.js

var gulp = require('gulp'),
    minifyCss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    clean = require('gulp-clean')
    rev = require('gulp-rev'),
    concat = require('gulp-concat'),
   // revReplace = require('gulp-rev-replace'),
    //useref = require('gulp-useref'),
	minifyHtml = require('gulp-minify-html'),
    revCollector = require('gulp-rev-collector');


	
//gulp-clean 清楚目錄
//gulp-minify-css 壓縮CSS為一行
//gulp-rev 對檔名加MD5字尾 
//gulp-rev-collector 路徑替換
//gulp-jshint 檢查js語法
    
//清空資料夾，避免資源冗餘
gulp.task('clean',function(){
    return gulp.src('dist',{read:false}).pipe(clean());
});


//css檔案壓縮，更改版本號，並通過rev.manifest將對應的版本號用json表示出來
gulp.task('css',function(){
    return gulp.src('app/styles/*.css')
	//.pipe(concat('wap.min.css'))
    .pipe(minifyCss())
    .pipe(rev())
    .pipe(gulp.dest('dist/app/styles/'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev/css'))
});


//js檔案壓縮，更改版本號，並通過rev.manifest將對應的版本號用json表示出
gulp.task('js',function(){
    return gulp.src('app/scripts/*.js')
    //.pipe( concat('wap.min.js') )
    .pipe(jshint())
    .pipe(uglify())
    .pipe(rev())
    .pipe(gulp.dest('dist/app/scripts/'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev/js'))
});


//js檔案壓縮，更改版本號，並通過rev.manifest將對應的版本號用json表示出
gulp.task('img',function(){
    return gulp.src('app/image/*.+(jpg|png|gif)')
    .pipe(rev())
    .pipe(gulp.dest('dist/app/image/'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev/img'))
});


//通過hash來精確定位到html模板中需要更改的部分,然後將修改成功的檔案生成到指定目錄
gulp.task('rev',function(){
    return gulp.src(['dist/rev/**/*.json','app/pages/*.html'])
    .pipe(revCollector())
	.pipe(minifyHtml())
    .pipe(gulp.dest('dist/app/pages/'));
});


//合併html頁面內引用的靜態資原始檔
gulp.task('html', function () {
    return gulp.src('dist/app/pages/*.html')
    .pipe(useref())
    .pipe(rev())
    .pipe(revReplace())
    .pipe(gulp.dest('dist/html/'));
})
 
	minifyHtml = require('gulp-minify-html'),
    revCollector = require('gulp-rev-collector');


	
//gulp-clean 清楚目錄
//gulp-minify-css 壓縮CSS為一行
//gulp-rev 對檔名加MD5字尾 
//gulp-rev-collector 路徑替換
//gulp-jshint 檢查js語法
    
//清空資料夾，避免資源冗餘
gulp.task('clean',function(){
    return gulp.src('dist',{read:false}).pipe(clean());
});


//css檔案壓縮，更改版本號，並通過rev.manifest將對應的版本號用json表示出來
gulp.task('css',function(){
    return gulp.src('app/styles/*.css')
	//.pipe(concat('wap.min.css'))
    .pipe(minifyCss())
    .pipe(rev())
    .pipe(gulp.dest('dist/app/styles/'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev/css'))
});


//js檔案壓縮，更改版本號，並通過rev.manifest將對應的版本號用json表示出
gulp.task('js',function(){
    return gulp.src('app/scripts/*.js')
    //.pipe( concat('wap.min.js') )
    .pipe(jshint())
    .pipe(uglify())
    .pipe(rev())
    .pipe(gulp.dest('dist/app/scripts/'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev/js'))
});


//js檔案壓縮，更改版本號，並通過rev.manifest將對應的版本號用json表示出
gulp.task('img',function(){
    return gulp.src('app/image/*.+(jpg|png|gif)')
    .pipe(rev())
    .pipe(gulp.dest('dist/app/image/'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev/img'))
});


//通過hash來精確定位到html模板中需要更改的部分,然後將修改成功的檔案生成到指定目錄
gulp.task('rev',function(){
    return gulp.src(['dist/rev/**/*.json','app/pages/*.html'])
    .pipe(revCollector())
	.pipe(minifyHtml())
    .pipe(gulp.dest('dist/app/pages/'));
});


//合併html頁面內引用的靜態資原始檔
gulp.task('html', function () {
    return gulp.src('dist/app/pages/*.html')
    .pipe(useref())
    .pipe(rev())
    .pipe(revReplace())
    .pipe(gulp.dest('dist/html/'));
})

在命令列執行   gulp clean 逐個執行任務

前端資源快取與更新

https://my.oschina.net/jathon/blog/404968

http://www.cnblogs.com/1wen/p/5421212.html

參考

http://jingyan.baidu.com/article/14bd256e7f7d7fbb6d2612c4.html

https://segmentfault.com/a/1190000002932998