概述

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

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) ) {

gulp打包

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里用到的cssgulp.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("

按需打包

与网上一些不同的是，这个要求开发者输入参数name和type，这样每次打包的时候就不用把整个项目都打包了，只打包需要打包的项目。

合并css部分，需要在html里做下处理

生成ssi部分，要先创建模板文件，根据压缩css和js时生成的版本号，把相应的名字和版本号替换掉，然后在html里把引用脚本的路径改为ssi引用即可

webpack配置

webpack.config.js，仅用于处理js模块依赖

var webpack = require('webpack');var fs = require('fs');var path = require("path");var srcDir = './'function getEntry() {  var jsPath = path.resolve(srcDir, 'js/page');  var dirs = fs.readdirSync(jsPath);  var matchs = [], files = {};  dirs.forEach(function (item) {    matchs = item.match(/(.+)\.js$/);    if (matchs) {      files[matchs[1]] = path.resolve(srcDir, 'js/page', item);    }  });  return files;}module.exports = {  devtool: "source-map",    //生成sourcemap,便于开发调试  entry: getEntry(),         //获取项目入口js文件  output: {    path: path.join(__dirname, "dist/js"), //文件输出目录//    publicPath: path.join("dist/js/"),        //用于配置文件发布路径，如CDN或本地服务器    filename: "[name]/[name].js",        //根据入口文件输出的对应多个文件名  },  module: {    //各种加载器，即让各种文件格式可用require引用    loaders: [       { test: /\.js$/, loader: "babel"},    ]  },  resolve: {    //配置别名，在项目中可缩减引用路径    alias: {      jquery: path.resolve(srcDir, "dist/js/lib/jquery-1.12.4.min.js"),      module: path.resolve(srcDir, "js/module")    }  },  externals: {    // require("jquery") is external and available    //  on the global var jQuery    "jquery": "jQuery"  },  plugins: [    //js文件的压缩    new webpack.optimize.UglifyJsPlugin({      compress: {        warnings: false      }    })  ]};

模拟数据

http-server可以用项目目录生成的url模拟ajax请求(只有get)，直接把json放在里面，然后根据项目目录的url就可以访问。但是交付的时候要记得换掉url，其实也可以自动化一下，要与后台约定好目录结构，然后打包的时候用gulp替换。

总结

在思考工作流的时候，思考最多的就是如何在php直出并且由后端同事写模版文件的情况下做好交付html和后期脱离后端同事进行静态文件维护，好像除了用nginx ssi没什么其他好办法再不改模版文件的情况下更换静态文件（因为要加时间戳防止缓存）。本地调试还是有很多不科学的地方，比如模拟数据这里，可能更换成真实接口的数据会出现其它的意外情况，填充模版后也可能会出现影响js执行的情况，有条件的，还是弄个开发机来调试比较好。