[转]基于gulp和webpack的前端工程化

本文样例代码 ：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，不刷新实时替换修改