前端项目构建

项目介绍

这是一个单页面应用，技术选型为：react+react-router+redux+es6。由于使用了阿里出品的dva前端框架（基于redux、redux-saga和react-router轻量级前端框架），构建工具配套使用了阿里出品的roadhog。

构建工具

刚开始用过grunt，后面了出现了gulp之后，grunt就失宠了。
gulp是一个基于流的自动化构建工具，通过代码优于配置的策略，gulp 让简单的任务简单，复杂的任务可管理。

接着，又出现了webpack（roadhog的底层实现用到了webpack）。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。

相对于grunt/gulp侧重于前端开发的整个过程的控制管理，webpack的侧重于提供模块打包。所以，很多人 webpack + gulp来构建项目。

构建需求

1. 预编译：包括es6/7语法转译、sass预编译css
2. js、css的合并压缩
3. js、css的版本管理
4. 开发环境的热更新
5. 测试环境和正式环境的title区分开来
6. 一键发布到测试/正式环境

其中，roadhog满足了1、2、4的需求。

对于第3个需求，有人喜欢把时间戳当作版本号，更合理的应该是使用文件的md5值来做版本号。当文件没有任何变化时，版本号（md5值）不变，浏览器继续使用缓存。我采用了gulp-static-hash插件来实现。

而第4个需求相对简单，使用gulp-replace插件进行文本替换就行了。

var gulp = require('gulp');
var staticHash = require('gulp-static-hash');
var replace = require('gulp-replace');

gulp.task('test', function () {
  console.log("测试环境构建");
  gulp.src(['dist/index.html'])
    .pipe(replace("小幺鸡", "测试版-小幺鸡"))
    .pipe(staticHash({
      exts: ['js', 'css'],
      asset: "dist" //相对路径
    }))
    .pipe(gulp.dest(function (file) {
      return file.base;
    }));
});

剩下一键发布的构建需求。我对电脑做了免密码登录服务器的设置，接着在package.json文件里自定义build命令，只要执行命令npm run build，项目就会进行编译并且发布到测试服务器。

"scripts": {    
    "build": "roadhog build", //使用roadhog进行项目构建
    "postbuild": "gulp test;scp -r  -P 63377 ./dist/* work@测试服务器ip地址:/data/openresty/hosts/xiaoyaoji/"   //执行gulp test命令，然后同步文件到测试服务器
  },

遗留问题

随着项目变得复杂，roadhog的构建时间超过了1分钟，这性能让人难以忍受啊。但roadhog目前并没有提供配置优化的方法（https://github.com/sorrycc/roadhog/issues/108 ）， 蛋疼。