基于gulp和webpack的前端工程化

我的GitHub: https://github.com/demohi

微博:@mdemo

本文样例代码 :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,不刷新实时替换修改
: ) boke.io