本文样例代码 ：https://github.com/demohi/learning-gulp
本文主要简单介绍一下基于gulp和webpack的前端工程化。
技术栈
- React.js
- reFlux
- Node.js
我们的需求
- 基于CommonJS模块化开发
- 基于React.js的组件化开发(JSX)
- 为保证组件的复用，css需要打包到js中
- 有国际化需求，静态文件需要部署在CDN上面
工程化工具的选择
- gulp(基于stream的构建工具，与grunt相比，速度快且可编程)
- webpack(前端文件打包工具，支持CommonJS、JSX、css等多种文件混合)
工程化流程
开发模式
开发模式比较简单，主要就是监听文件变化，自动进行打包、合并的操作。
生产模式
参考我们的技术栈与需求，我们的静态文件都要发布到cdn上，而且必须有md5版本号，方便快速发布(cdn更新极其缓慢，所以更新必须使用新的文件名)
生产模式主要增加了文件压缩、文件md5名修改、上传cdn、替换html等操作
这样的好处就是上线非常方便，一个命令即可更新线上，而且不存在缓存问题。
代码参考
基于上述流程写了个demo，供大家参考learning-gulp
可优化的点
- 等gulp4发布，可以直接基于gulp来做串行任务
- 增加livereload,不要再刷新
- 使用react-hot-loader，不刷新实时替换修改