前端工程化的研究与实践.docVIP

前端工程化的研究与实践 　　摘要：随着前后端分离方案与web前端组件化思想的广泛传播，不断有新的技术方案涌出，在不同的业务场景下很大程度上提升了开发效率。该文提出的前端工程化的一种开发模式，适应大部分的业务需求与场景，经过了多个大中型项目的验证，解决了传统web开发模式带来的各种问题。 　　关键词：Grunt；Yeoman；Node server 　　中图分类号：TP399 文献标识码：A 章编号：1009-3044（2016）25-0224-03 　　所谓工程化，可以简单地认为是完成3项目标，避免重复性的工作，预测一些常遇到问题，提前解决，避免影响后续开发；提高开发效率，使用自动化的工具方法，编写可维护的项目代码，自动化完成调试测试等；完成优化工作，降低框架层面升级带给业务的损耗，帮助业务团队在无感知情况下的优化工作。本文结合多个项目实践中的经验，总结一套前端开发工程化的方案，能够有效的实现前端开发过程的自动化，提升工作效率。 　　1 Grunt，javascript世界的构建工具 　　Grunt，构建工具，实现了项目的自动化。对于需要反复重复的任务，例如压缩，编译，单元测试等，自动化工具能够减轻你的劳动，简化你的工作，当你在gruntfile文件中，正确配置了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。 　　Grunt less任务，less可以让css变得更加简单，更易于维护，它可以定义常量，可以转换单位，还可以计算颜色，而且可以使用嵌套的方式把我们工重复的排列选择器的漩涡中解脱出来。grunt-contrib-less配合grunt-contrib-watch插件，可以实现less的实时编译功能。 　　实现： 　　grunt.initConfig（ { 　　pkg： grunt.file.readJSON（package.json）， 　　watch： { 　　less： { 　　files： [src/less/**/*.less]， 　　taskes：[less] 　　} 　　}， 　　less：{ 　　files： { 　　./src/css/*.css： ./src/less/*.less 　　} 　　} 　　}） 　　Grunt sprite，grunt svgsprite任务。Grunt sprite是一个将css代码中的切片合成sprite图的工具，其主要功能是， 　　1） 使用二叉树排列算法，对css文件进行处理，收集切片系列，生成sprite图。 　　2） 在原css代码的基础上，精准定位，添加background-position属性。 　　3） 生成高清设备的高清sprite图，并在文件末尾追加media query媒体查询代码。 　　4） 在引用sprite的位置打上时间戳 　　5） 在样式末尾追加时间戳 　　实现方式， 　　sprite： { 　　public-icons： { 　　src： src/less/default/public/icons/**/*.png， 　　destImg： src/themes/default/common/images/public/icons.png， 　　destCSS： src/less/default/public/icons.less， 　　padding： 10， 　　cssFormat： less， 　　engine： phantomjs， 　　// More information can be found below 　　cssTemplate： spriteLessTemplate（icons.tmpl， { 　　baseClass： icon-public 　　}）， 　　// OPTIONAL： Manual override for imgPath specified in CSS 　　imgPath： images/public/icons.png， 　　// OPTIONAL： Map variable of each sprite 　　cssVarMap： function （sprite） { 　　// `sprite` has `name`， `image` （full path）， `x`， `y` 　　// `width`， `height`， `total_width`， `total_height` 　　// EXAMPLE： Prefix all sprite names with sprite- 　　sprite.name = icon- + sprite.name； 　　} 　　}