摘要：概述最近研究了下工作流，先說一下我司的情況，我司現(xiàn)在是端用直出，用構建，部分就不進行描述了，因為網(wǎng)上的構建方法都是很成熟的了。

最近研究了下工作流，先說一下我司的情況，我司現(xiàn)在是pc端用php直出，h5用vuejs構建，vuejs部分就不進行描述了，因為網(wǎng)上的構建方法都是很成熟的了。
以下是php直出，需要向后臺同學提供html文件的構建方法。調試都是在本地調試的，調試完成后打包生成html交付給后臺同學。

http-server 模擬數(shù)據(jù)，調試ajax

webpack 打包js，模塊化管理

gulp打包css，壓縮css, 壓縮圖片

|- apps //html文件  
|- dist  
    |- css //存放壓縮打包后的css  
    |- js //webpack 自動打包的js  
    |- images //壓縮后的圖片  
    //這里還有打包后的html文件  
|- mock //模擬數(shù)據(jù)，json  
|- ssi //生成的ssi頁面片  
|- js //js源文件  
    |- common 公共模塊  
    |- 業(yè)務js  
|- css   
    |- sass //sass源文件  
        |- common 公共sass函數(shù)  
        |- 業(yè)務css  
    |- stylesheets //編譯后的css 開發(fā)時引入 compass編譯  
|- images  
    原圖片  

因為rev默認生成的版本號是加在靜態(tài)文件文件名上的，如main-d3id7340.js這樣會造成服務器上有n多的js，所以我們希望生成main.js?v=233333這樣的版本號，在配合ssi就能很好的維護，以后如果只涉及修改靜態(tài)文件的時候，就只用重新上傳靜態(tài)文件和ssi頁面片就可以了，不需要再去改php中的引用，所以在網(wǎng)上找到了一個方法。

打開node_modulesgulp-revindex.js

第133行 manifest[originalFile] = revisionedFile;
更新為: manifest[originalFile] = originalFile + "?v=" + file.revHash;

打開nodemodulesgulp-revnodemodulesrev-pathindex.js

10行 return filename + "-" + hash + ext;
更新為: return filename + ext;

打開node_modulesgulp-rev-collectorindex.js

31行 if ( path.basename(json[key]).replace(new RegExp( opts.revSuffix ), "" ) !== path.basename(key) ) {
更新為: if ( path.basename(json[key]).split("?")[0] !== path.basename(key) ) {

gulpfile.js如下

var gulp = require("gulp");
var minicss = require("gulp-cssmin");
var useref = require("gulp-useref");
var imagemin = require("gulp-imagemin");
var pngquant = require("imagemin-pngquant");
var gulpif = require("gulp-if");
var yargs = require("yargs");
var rev = require("gulp-rev");
var revCollector = require("gulp-rev-collector");
var replace = require("gulp-replace");
var runSequence = require("run-sequence");

var output = "dist";
//獲取輸入的參數(shù)
var argv = yargs.argv,
  name = argv.name,
  type;

if(argv.type == "pub"){
  type = "";
}else if(argv.type == "test"){
  type = ".test"
}

//合并html里用到的css
gulp.task("csscombine",function(){
  return gulp.src("apps/"+name+"/*")
    .pipe(useref())
    .pipe(gulpif("*.css", minicss()))
    .pipe(gulp.dest("dist"));

});

//壓縮css,生成css版本號
gulp.task("css", function(){
  return gulp.src("dist/css/"+name+"/*.css")
    .pipe(rev())
    .pipe(gulp.dest("dist/css/"+name))
    .pipe( rev.manifest() )
    .pipe( gulp.dest( "rev/css" ) );
});

//生成js版本號
gulp.task("js", function(){
  return gulp.src("dist/js/"+name+"/*.js")
    .pipe(rev())
    .pipe(gulp.dest("dist/js/"+name))
    .pipe( rev.manifest() )
    .pipe( gulp.dest( "rev/js" ) );
});

//壓縮圖片
gulp.task("imagemin", function(){
  return gulp.src("images/"+name+"/*")
    .pipe(imagemin({
      progressive: true,
      svgoPlugins: [{removeViewBox: false}],
      use: [pngquant()]
    }))
    .pipe(gulp.dest(output + "/images/"+name));
})

//生成cssi頁面片
gulp.task("cssi",function(){
  return gulp.src(["rev/**/*.json","ssi/cssi/cssi.html"])
  .pipe(replace("{name}",name))
  .pipe(replace("{type}",type))
  .pipe( revCollector())
  .pipe(gulp.dest("ssi/cssi/"+name));
});

//生成jsi頁面片
gulp.task("jsi", function(){
  return  gulp.src(["rev/**/*.json","ssi/jsi/jsi.html"])
    .pipe(replace("{name}",name))
    .pipe(replace("{type}",type))
    .pipe( revCollector())
    .pipe(gulp.dest("ssi/jsi/"+name));
});

//替換html里的路徑
gulp.task("replacehtml",function(){
  var scriptReg = new RegExp("