前端构建的意义与实践课件

1、前端构建的意义与实践github博客园站酷（程序猿小卡）前端构建的意义项目实践问题/思路前端构建的意义代码拷贝代码拷贝代码拷贝。开发前sass编译vm编译模版编译资源嵌入。开发中sass编译vm编译模版编译CDN替换打包合并文件合并文件压缩资源嵌入版本控制。提测前如此多的工具项目开发前：初始化：代码拷贝项目开发中：sass编译：ruby/sass/compass项目上线前：文件合并：fiddler + qzmin文件打包：require + r.js文件压缩：YUI Compressor、Google Closure雪碧图：cssGaga文件校验：jshint痛在哪里重复劳动平台依赖团队协作一

2、日不完成誓死不恋爱！谁能拯救我们？前端构建工具Grunt / FIS / GulpGrunt / FIS / Gulp相同点 跨平台 可扩展 基于nodeGruntgrunt-cligruntGulp流式构建：task 1的输出，作为task 2的输入取代grunt？FIS内置能力：资源定位、资源嵌入、资源打包GruntGulp从一个例子出发index.htmlstyle.scssstyle.scssstyle.cssstyle.cssstyle.cssreadreplaceindex.htmlindex.htmlindex.htmlwriteread替换sassGruntreplacesrc

3、dist读操作：4写操作：4writedistGulpstyle.scssindex.htmlsassreadindex.htmlstyle.cssreplacereplacesrc替换read读操作：3写操作：2工具构建方式内置构建能力开发规范/流程编码风格grunt基于任务否无任务配置式fis流式构建是有任务配置式gulp流式构建否无编程式不同点入门介绍gulp：入门简介grunt从入门到自定义项目模板fis入门简介相关链接项目实践项目构建例子做了什么编译：scss css资源嵌入：img base64资源定位：js/common/base.js http:/7./edu/js/commo

4、n/base.123abc.js打包：requirejs + r.js版本控制：base.123abc.js其他资源嵌入文件标准化资源定位打包优化构建流程资源标准化sass编译vm编译coffee编译项目变量替。资源嵌入js文件css文件img文件html文件其他资源定位cdn替换本地化打包打包优化合并打包雪碧图版本控制其他preProces缓存检查目录清理其他postProcess资源参考sass编译：grunt-contrib-compasss模板编译：grunt-contrib-velocity、grunt-imweb-tpl-compile资源嵌入：grunt-inlinecdn路径切

5、换：grunt-imweb-abs文件合并：grunt-usemin/grunt-concat - grunt-requirejs文件压缩：grunt-contrib-uglify、grunt-contrib-cssminrequire打包：grunt-contrib-requirejs雪碧图合并：ispriter版本控制：grunt-rev、grunt-usemin错误校验：grunt-contrib-jshint问题 / 思路问题/思路选择：grunt / gulp / fis？grunt：配置复杂？grunt：如何调试？grunt/gulp/fis？工具构建方式内置构建能力开发规范/流程编码风格grunt基于任务否无任务配置式fis流式构建是有任务配置式gulp流式构建否无编程式不同点插件丰富度文档完善度社区活跃度学习/维护成本迁移成本插件名插件数GRUNT3000+GULP600+FIS100+一、适用场景 & 限制1、grunt vs gulp2、grunt/gulp vs fis3、限制来自于？二、迁移必要性1、无法解决的问题？2、成本 vs 收益配置复杂？功能插件化配置项目化功能插件化+CDN替换的例子配置项目化针对插件X针对项目针