gulp+webpack工作流探索

摘要：概述最近研究了下工作流，先说一下我司的情况，我司现在是端用直出，用构建，部分就不进行描述了，因为网上的构建方法都是很成熟的了。

最近研究了下工作流，先说一下我司的情况，我司现在是pc端用php直出，h5用vuejs构建，vuejs部分就不进行描述了，因为网上的构建方法都是很成熟的了。
以下是php直出，需要向后台同学提供html文件的构建方法。调试都是在本地调试的，调试完成后打包生成html交付给后台同学。

http-server 模拟数据，调试ajax

webpack 打包js，模块化管理

gulp打包css，压缩css, 压缩图片

|- apps //html文件  
|- dist  
    |- css //存放压缩打包后的css  
    |- js //webpack 自动打包的js  
    |- images //压缩后的图片  
    //这里还有打包后的html文件  
|- mock //模拟数据，json  
|- ssi //生成的ssi页面片  
|- js //js源文件  
    |- common 公共模块  
    |- 业务js  
|- css   
    |- sass //sass源文件  
        |- common 公共sass函数  
        |- 业务css  
    |- stylesheets //编译后的css 开发时引入 compass编译  
|- images  
    原图片  

因为rev默认生成的版本号是加在静态文件文件名上的，如main-d3id7340.js这样会造成服务器上有n多的js，所以我们希望生成main.js?v=233333这样的版本号，在配合ssi就能很好的维护，以后如果只涉及修改静态文件的时候，就只用重新上传静态文件和ssi页面片就可以了，不需要再去改php中的引用，所以在网上找到了一个方法。

打开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";
//获取输入的参数
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("