<link rel="stylesheet" href="../css/default.css">
<script src="../js/app.js"></script>

<link rel="stylesheet" href="../css/default.css?v=5a636d79c4">
<script src="../js/app.js?v=3a0d844594"></script>
background:url("../images/none.png?v=8f204d4")

npm install --save-dev gulp
npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector
npm install --save-dev gulp-asset-rev
npm install --save-dev run-sequence

//引入gulp和gulp插件
var gulp = require('gulp'),
  assetRev = require('gulp-asset-rev'),
  runSequence = require('run-sequence'),
  rev = require('gulp-rev'),
  revCollector = require('gulp-rev-collector');

//定義css、js源文件路徑
var cssSrc = 'css/*.css',
  jsSrc = 'js/*.js';

//為css中引入的圖片/字體等添加hash編碼
gulp.task('assetRev', function(){
  return gulp.src(cssSrc)  //該任務(wù)針對的文件
   .pipe(assetRev()) //該任務(wù)調(diào)用的模塊
   .pipe(gulp.dest('src/css')); //編譯后的路徑
});

//CSS生成文件hash編碼并生成 rev-manifest.json文件名對照映射
gulp.task('revCss', function(){
  return gulp.src(cssSrc)
    .pipe(rev())
    .pipe(rev.manifest())
    .pipe(gulp.dest('rev/css'));
});


//js生成文件hash編碼并生成 rev-manifest.json文件名對照映射
gulp.task('revJs', function(){
  return gulp.src(jsSrc)
    .pipe(rev())
    .pipe(rev.manifest())
    .pipe(gulp.dest('rev/js'));
});


//Html替換css、js文件版本
gulp.task('revHtml', function () {
  return gulp.src(['rev/**/*.json', 'View/*.html'])
    .pipe(revCollector())
    .pipe(gulp.dest('View'));
});


//開發(fā)構(gòu)建
gulp.task('default', function (done) {
  condition = false;
  runSequence(    //需要說明的是，用gulp.run也可以實現(xiàn)以上所有任務(wù)的執(zhí)行，只是gulp.run是最大限度的并行執(zhí)行這些任務(wù)，而在添加版本號時需要串行執(zhí)行（順序執(zhí)行）這些任務(wù)，故使用了runSequence.
    ['assetRev'],
    ['revCss'],
    ['revJs'],
    ['revHtml'],
    done);
});

//rev目錄下生成了manifest.json對應(yīng)文件
{
 "default.css": "default-803a7fe4ae.css"
}


<link rel="stylesheet" href="../css/default-803a7fe4ae.css">
<script src="../js/app-3a0d844594.js"></script>

<link rel="stylesheet" href="../css/default.css?v=803a7fe4ae">
<script src="../js/app.js?v=3a0d844594"></script>
background:url("../images/none.png?v=8f204d4")

<link rel="stylesheet" href="../css/default.css?v=33379df310?v=803a7fe4ae">
<script src="../js/app.js?v=3a0d844594?v=3a0d844594"></script>

<link rel="stylesheet" href="../css/default.css?v=5a636d79c4">
<script src="../js/app.js?v=3a0d844594"></script>

//引入gulp和gulp插件
var gulp = require('gulp'),
  less = require('gulp-less'),
  assetRev = require('gulp-asset-rev'),
  minifyCss = require('gulp-minify-css'),
  uglify = require('gulp-uglify'),
  htmlmin = require('gulp-htmlmin'),
  rename = require('gulp-rename'),
  imagemin = require('gulp-imagemin'),
  runSequence = require('run-sequence'),
  rev = require('gulp-rev'),
  revCollector = require('gulp-rev-collector');

//定義css、js源文件路徑
var cssSrc = 'css/*.css',
  cssMinSrc = 'dist/css/*.css',
  jsSrc = 'js/*.js',
  jsMinSrc = 'dist/js/*.js',
  lessSrc = 'less/*.less',
  imgMinSrc = 'dist/images/*.{png,jpg,gif,ico}',
  htmlSrc = '*.html';

//編譯less 定義一個less任務(wù)（自定義任務(wù)名稱）
gulp.task('less', function(){
  return gulp.src(lessSrc)  //該任務(wù)針對的文件
   .pipe(less()) //該任務(wù)調(diào)用的模塊
   .pipe(gulp.dest('css'));//編譯后的路徑
});

//為css中引入的圖片/字體等添加hash編碼
gulp.task('assetRev', function(){
  return gulp.src(cssSrc)  //該任務(wù)針對的文件
   .pipe(assetRev()) //該任務(wù)調(diào)用的模塊
   .pipe(gulp.dest('src')); //編譯后的路徑
});

//壓縮css
gulp.task('cssMin', function() {
  return gulp.src(cssSrc)   //壓縮的文件
    .pipe(rename({suffix: '.min'}))  
    .pipe(minifyCss()) //執(zhí)行壓縮
    .pipe(gulp.dest('dist/css'));  //輸出文件夾
});

//CSS生成文件hash編碼并生成 rev-manifest.json文件名對照映射
gulp.task('revCss', function(){
  return gulp.src(cssMinSrc)
    .pipe(rev()) //文件名加MD5后綴
    .pipe(rev.manifest())  //必須有這個方法 生成一個rev-manifest.json
    .pipe(gulp.dest('dist/css'));  //將rev-manifest.json 保存到 dist/css 目錄內(nèi)
});

//壓縮js
gulp.task('uglify',function(){
  return gulp.src(jsSrc)
   .pipe(rename({suffix: '.min'}))
   .pipe(uglify())
   .pipe(gulp.dest('dist/js'));
});

//js生成文件hash編碼并生成 rev-manifest.json文件名對照映射
gulp.task('revJs', function(){
  return gulp.src(jsMinSrc)
    .pipe(rev())
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/js'));
});

//壓縮html
gulp.task('htmlMin',function(){
  var options = {
    collapseWhitespace:true,  //從字面意思應(yīng)該可以看出來，清除空格，壓縮html，這一條比較重要，作用比較大，引起的改變壓縮量也特別大。
    collapseBooleanAttributes:true,  //省略布爾屬性的值，比如：<input checked="checked"/>,那么設(shè)置這個屬性后，就會變成 <input checked/>。
    removeComments:true,  //清除html中注釋的部分，我們應(yīng)該減少html頁面中的注釋。
    removeEmptyAttributes:true,  //清除所有的空屬性。
    removeScriptTypeAttributes:true,  //清除所有script標(biāo)簽中的type="text/javascript"屬性。
    removeStyleLinkTypeAttributes:true,  //清楚所有Link標(biāo)簽上的type屬性。
    minifyJS:true,  //壓縮html中的javascript代碼。
    minifyCSS:true  //壓縮html中的css代碼。
  };
  return gulp.src(htmlSrc)
   .pipe(htmlmin(options))
   .pipe(gulp.dest('dist/html'));
});

//Html替換css、js文件版本
gulp.task('revHtml', function () {
  return gulp.src(['dist/**/*.json', 'dist/html/*.html'])
    .pipe(revCollector())
    .pipe(gulp.dest('dist/html'));
});

//壓縮image
gulp.task('imageMin', function () {
  gulp.src('images/*.{png,jpg,gif,ico}')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'));
});

gulp.task('revImage', function(){
  return gulp.src(imgMinSrc)
    .pipe(rev())
    .pipe(rev.manifest())  //必須有這個方法
    .pipe(gulp.dest('dist/images'));
});

gulp.task('default', function (done) {
  //condition = false;
  runSequence(  //此處不能用gulp.run這個最大限度并行(異步)執(zhí)行的方法，要用到runSequence這個串行方法(順序執(zhí)行)才可以在運(yùn)行g(shù)ulp后順序執(zhí)行這些任務(wù)并在html中加入版本號
    'less',
    'assetRev',
    'cssMin',
    'revCss',
    'uglify',
    'revJs',
    'imageMin',
    'revImage',
    'htmlMin', 
    'revHtml',    
    done);
});