[转]基于gulp和webpack的前端工程化
2016-10-20 00:37
169 查看
本文样例代码 :https://github.com/demohi/learning-gulp
本文主要简单介绍一下基于gulp和webpack的前端工程化。
reFlux
Node.js
基于React.js的组件化开发(JSX)
为保证组件的复用,css需要打包到js中
有国际化需求,静态文件需要部署在CDN上面
webpack(前端文件打包工具,支持CommonJS、JSX、css等多种文件混合)
生产模式主要增加了文件压缩、文件md5名修改、上传cdn、替换html等操作
这样的好处就是上线非常方便,一个命令即可更新线上,而且不存在缓存问题。
增加livereload,不要再刷新
使用react-hot-loader,不刷新实时替换修改
本文主要简单介绍一下基于gulp和webpack的前端工程化。
技术栈
React.jsreFlux
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,不刷新实时替换修改
相关文章推荐
- Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
- webpack gulp 实现完整前端工程化
- 基于gulp+webpack的"约定大于配置"的构建方案探讨
- 基于webpack搭建前端工程解决方案探索
- Vue ES6 Jade Scss Webpack Gulp
- 基于webpack的前端工程化开发解决方案探索(二):代码分割与图片加载
- 基于webpack的前端工程化开发解决方案探索(三):webpack-dev-server
- 前端工程工具(Gulp、Browerify、Webpack、Bower、Yeoman)
- 做一个gulp+webpack+vue的单页应用开发架子
- 基于Vue 和 webpack的项目实现
- webpack与gulp的区别及实例搭建
- webpack&gulp集成简介
- NetBeans Visual Web Pack 5.5以可视方式快速构建基于标准的 Web 应用程序。
- webpack如何与gulpfile联合的使用
- 基于webpack和vue.js搭建开发环境
- 基于webpack使用ES6新特性(转载)
- 基于webpack搭建前端工程解决方案探索
- 基于webpack搭建前端工程解决方案探索
- React gulp、Browserify、Webpack实例
- Gulp和webpack的区别,是一种工具吗?