[转]基于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,不刷新实时替换修改
[转]基于gulp和webpack的前端工程化的更多相关文章
- 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML(转)
1.什么是工程化开发 软件工程的工程化开发概念由来已久,但对于前端开发来说,我们没有像VS或者eclipse这样量身打造的IDE,因为在大多数人眼中,前端代码无需编译,因此只要一个浏览器来运行调试就行 ...
- 基于webpack的前端工程化开发解决方案探索(二):代码分割与图片加载
今天我们继续来进行webpack工程化开发的探索! 首先来验证上一篇文章 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML 中的遗留问题:webpack将如何处理按需加载的 ...
- 阿里云无线&前端团队是如何基于webpack实现前端工程化的
背景 前端经历了初期的野蛮生长(切图,写简单的特效)——为了兼容浏览器兼容性而出现的各种类库(JQUERY,YUI等——mv*(饱暖思淫欲,代码多了,也就想到怎样组织代码结构,backbone,ang ...
- 基于webpack的前端工程化开发解决方案探索(三):webpack-dev-server
前两篇中我们使用webpack完成了静态资源(css/js/img)等自动写入HTML模板中,同时还可以为静态资源添加hash版本号,既满足了我们对于静态资源的打包要求,同时又无需开发人员介入打包过程 ...
- webpack + react 前端工程化实践和暂不极致优化
技术结构 webpack + react + react-router 功能实现 关于打包 1.基于react-router的自定义打包code split.2.分包异步按需加载.3.CommonsC ...
- 【前端自动化构建 grunt、gulp、webpack】
参考资料: 用自动化构建工具增强你的工作流程!:http://www.gulpjs.com.cn/ gulp详细入门教程:http://www.ydcss.com/ JavaScript构建(编绎)系 ...
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
- 前端工程化(二)---webpack配置
导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord 继续上一遍的配置,本节主要记录 ...
- 使用webpack+vue.js构建前端工程化
参考文章:https://blog.csdn.net/qq_40208605/article/details/80661572 使用webpack+vue.js构建前端工程化本篇主要介绍三块知识点: ...
随机推荐
- 借助LinkedHashMap实现基于LRU算法缓存
一.LRU算法介绍 LRU(Least Recently Used)最近最少使用算法,是用在操作系统中的页面置换算法,因为内存空间是有限的,不可能把所有东西都放进来,所以就必须要有所取舍,我们应该把什 ...
- 手机的ROM,RAM是各自存放什么?所谓“运行内存”和“机身内存”究竟有什么区别?
手机的内存分为运行内存(RAM)和非运行内存(也叫机身内存.储存空间.ROM) 1.手机的内存,分为存储内存和运行内存,相当于电脑的硬盘和内存条.2.存储内存分为机身内存和存储卡.3.rom是存储内存 ...
- Android中libs目录下armeabi和armeabi-v7a的区别
armeabi默认选项,支持基于 ARM* v5TE 的设备支持软浮点运算(不支持硬件辅助的浮点计算)支持所有 ARM* 设备 armeabi-v7a支持基于 ARM* v7 的设备支持硬件 FPU ...
- poj 1195:Mobile phones(二维线段树,矩阵求和)
Mobile phones Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 14391 Accepted: 6685 De ...
- log4net的配置与使用
log4net解决的问题是在.Net下提供一个记录日志的框架,它提供了向多种目标写入的实现,比如利用log4net可以方便地将日志信息记录到文件.控制台.Windows事件日志和数据库(包括MS SQ ...
- PHP判断当前访问的是 微信、iphone、android 浏览器
<?phpvar ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i)=="micromess ...
- WPF QuickStart系列之样式和模板(Style and Template)
在WPF桌面程序中,当我们想构建一个统一的UI表现时(在不同操作系统下,显示效果一致),此时我们就需要使用到WPF中的样式和模板技术.简单来说,如果我们需要简单的给一个Button设置宽,高,Marg ...
- How to use the Visual Studio
推荐一个提供VS配色方案的一个网站:StudioStyles,域名和网站同名:http://studiostyl.es/ 2. 整行剪切:Ctrl + X.光标不要选中任何文字,然后按这个快捷键就可以 ...
- CoreLocation 下的定位跟踪测速
#import "ViewController.h" #import <CoreLocation/CoreLocation.h> @interface ViewCont ...
- MFC GDI绘图基础
一.关于GDI的基本概念 什么是GDI? Windows绘图的实质就是利用Windows提供的图形设备接口GDI(Graphics Device Interface)将图形绘制在显示器上. 在Wind ...