gulp靜態資源構建、壓縮、版本號添加

公司移動端商城使用前后分離方案，前台nginx靜態文件，js使用requirejs模式，使用gulp壓縮添加版本號時發現問題，

問題1、在公共的js配置中，引用的路徑是寫死的，緩存會一直存在。

解決方案是添加 urlArgs

構建時用shell腳本替換 'ttversion'為一個隨機數值，我用的是當前時間。

問題2、其他模塊引用的是common，那common.js不變的話，緩存會一直存在。

解決方案：還是用shell腳本，首先更改common.js為common_隨機數.js，再更改所有引用了common.js的文件為新的名字common_隨機數。

以上是針對requirejs的緩存更新，因為是每次構建都會生成新的文件名和版本號，所以這些資源是每次發版本都會更新的。

shell腳本：

DATE=$(date +%Y%m%d%s)
# 將common*.js中urlArgs 的版本變更
sed -i "s/ttversion/$DATE/g" common*.js

#這里不要帶后綴名
NEW_COMMON_JS_NAME=common_$DATE
# 將common.js更名
mv common*.js $NEW_COMMON_JS_NAME.js

# 執行gulp 壓縮js和html
cd /root/xxx/xxx/gulptask
rm -r src/*
cp -r temp/front src
#執行完gulp任務后，更改所有引用了commonjs的文件里的路徑名
gulp && sed -i "s/lib\/common/lib\/$NEW_COMMON_JS_NAME/g" `grep lib\/common -rl ./src/front` 

 知識點：sed -i "s/oldString/newString/g" `grep oldString disDir`  替換disDir目錄下所有文件中的oldString為newString

　　　　 sed -i "s/oldString/newString/g" filename 替換指定文件中的內容

gulpfile.js：

// 引入 gulp
var gulp = require('gulp'); 

// 引入組件
var jshint = require('gulp-jshint'),
  sass = require('gulp-sass'),
  runSequence = require('run-sequence'),
  concat = require('gulp-concat'),
  uglify = require('gulp-uglify'),
  rename = require('gulp-rename'),
  revCollector = require('gulp-rev-collector'),//替換路徑
  rev = require('gulp-rev'),//對文件計算md5並加在文件名后面，需要修改源碼
  gulpif = require('gulp-if'),
  condition = true,
  minifyHtml = require('gulp-minify-html'),
  minifyCss = require('gulp-clean-css'),
  gulpUtil = require('gulp-util');
  //var distDir = '/xx/xxx/front';
  var distDir = 'src/front';

// 檢查腳本
gulp.task('lint', function() {
    gulp.src('src/front/js/**/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// 編譯Sass
gulp.task('sass', function() {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

// 合並，壓縮文件js
gulp.task('miniJs', function() {
    var lastStream = null;
   return  gulp.src('src/front/js/**/*.js')
        .pipe(uglify().on('error', gulpUtil.log))//壓縮
        .pipe(rev())//計算md5
        .pipe(gulp.dest(distDir+'/js'))//輸出壓縮后的
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/js'))//生成rev-mainfest.json
//        .on('end',function(){//一定要在壓縮js執行完成后執行html壓縮，否則會出現rev-mainfest.json還沒生成，html卻已經壓縮完，導致js路徑沒替換
//         lastStream = gulp.src(['rev/**/*.json','src/front/**/*.html'])
//         .pipe(revCollector())
//        .pipe(gulpif(
//              condition, minifyHtml({
//                    empty: true,
//                    spare: true,
//                quotes: true
//              })
//        ))
//         .pipe(gulp.dest(distDir));
//         })
});

gulp.task('miniHtml', function () {
  return gulp.src(['rev/**/*.json', 'src/front/**/*.html'])//讀取rev目錄下的版本映射文件並替換html中的路徑
    .pipe(revCollector())
    .pipe(gulpif(
      condition, minifyHtml({
        empty: true,
        spare: true,
        quotes: true
      })//壓縮
    ))
    .pipe(gulp.dest(distDir));//輸出
});

//壓縮CSS/生成版本號
gulp.task('miniCss', function(){
  return gulp.src('src/front/themes/**/*.css')
      .pipe(gulpif(
            condition, minifyCss({
                    compatibility: 'ie7'
                          })
                              ))
                                  .pipe(rev())
                                      .pipe(gulp.dest(distDir+'/themes'))
                                          .pipe(rev.manifest())
                                              .pipe(gulp.dest('./rev/css'));//生成.json文件
                                              });
//圖片處理
gulp.task('revImg', function(){
  return gulp.src('src/front/themes/**/*.{png,jpg,jpeg,gif,ico}')//知識點：匹配多個后綴
    .pipe(rev())
    .pipe(gulp.dest(distDir+'/themes'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('./rev/img'));
});

// 默認任務,使用runSequence保證任務按順序執行，miniJs和miniCss是並行執行的，miniHtml是在前兩個任務執行完后再執行
gulp.task('default', function (done) {
  runSequence(
     ['miniJs','miniCss'],
     'miniHtml',
  done);
})

 參考：http://www.tuicool.com/articles/UbaqyyJ