我为何这么强调前端工程化

关键时候有个 bug 要修复——图文无关

没有比工程化推广更迫切的事情了！

历史情况

WEB 前端开发这几年发展很是迅速，很是多的开发框架和构建工具涌现，可能你昨天还在用的工具、插件，到了今天就过期了。在 2 年前，我面试别人的时候，会问一些有没有接触NodeJS、 Grunt、gulp、ES六、Babel 这类技能的问题，超过半数的面试者会回答『没有』，或者说『只是刚刚接触，并非很深刻』。迫于招人急迫，我并不会直接说 NO，而后继续问一些 HTML、CSS、JS 前端三板斧的知识。 然而今年，若是应聘者不会这些技能，那真的很抱歉， 我不会接受一个没有走在前沿的开发者 。任何面试者都不会喜欢一个墨守成规的人。难道没人告诉你，外面的世界已经变了吗？

须要解决的问题

web 开发发展了不少年，已经积累了大量的经验和工具，前辈们的经验已经通过了不少考验，有轮子借鉴参考的时候，必定不要拒绝。对于尚未接触 Gulp/Grunt/Webpack 的人来讲，大家还在石器时代，不建议你继续看下去。

工具和语言虽然差别大，可是解决的都是类似的问题，概括为：

• 扩展 javascript 、html、css 自己的语言能力

• 解决重复工做

• 模板化、模块化

• 解决功能复用和变动问题

• 解决开发和产品环境差别问题

• 解决发布流程问题

何为工程化

全部能下降成本，而且能提升效率的事情的总称为工程化。

在实际的工做和产品研发中，我不以为还有什么事情比下降成本，提升效率更迫切的事情。我更不认同工程化只是项目经理，技术 Leader 去研究和推广的事情。每一个团队都是不同，技术栈不同，产品不同，工做环境背景不同。大公司有大团队，多部门合做。小公司有小团队，各类职能配合更密切，或者你身兼数职，可是并不妨碍工程化的推动，你做为团队的一员，很是有义务和必要一块儿推动工程化，找到符合大家团队的工做习惯和规范。

由于，工程化的推动只是为了提升效率和下降成本。这里说的效率和成本，并不仅是公司层面，还包括我的。良好的工程化，能下降沟通成本，实现更好的协同，节省开发和测试人员的重复劳动，下降发布的常见问题等等，通过有效实践，工程化的推广还能极大地减小加班的时间。

怎么作

规范化

1. 文档。需求文档、设计文档、系统设计、测试单、项目报告。

2. 工具。开发语言选型，开发工具，协同工具，测试工具，发布工具。

3. 代码规范。javascript，css，html，技术文档。

4. 质量规范。功能方便，是否可拓展，是否知足 RESTFul，是否安全性知足

流程化

• 软件开发常见流程

• 职责和协同

• 目标明确的版本计划

• 敏捷开发

自动化

• 流程的自动化。即人员协同的自动化

• 代码开发自动化，去掉重复劳动

• 自动化单元测试

• UI/API/兼容性 自动化测试

• 自动化部署

• 自动化问题反馈

创新

• 发掘其余团队的优秀方法

• 实践敏捷开发

• 多交流，多观察业界

WEB 前端开发工程化

工程化应该出如今工做的任何环节，WEB 前端开发过程的工程化发展得尤其迅速。

把 Grunt、gulp、Nodejs 的技能应用到前端开发，实际上就是前端工程化的一部分。移动互联网的发展，跨平台服务的一致性体验，和要求快速迭代的互联网产品对前端领域提出了更高的要求，前端三板斧已经不能知足了。而后你看到了这几年百花齐放的场景。

前端语言、框架

• CSS 模块化方案：LESS/ SASS

• JS 模块化方案：AMD/CommonJS/UMD/ES6 Modlue

• HTML 模板引擎：baiduTemplate(百度)artTemplate（腾讯）juicer（淘宝）doT tmpl handlebars easyTemplate underscoretemplate mustache kissytemplate

• 前端集成框架 Bootstrap、Gumby、 Skeleton、Foundation

• AngularJS

• ReactJS

• VueJS

• Meteor

• 还有 WEEX
  (排名不分前后)

前端构建工具

• webpack

• Grunt

• gulp

• yeoman

• FIS

• athena

• tmt-workflow

• jdf

因此在实际前端构建流程里面，你会发现如下的流程。

代码优化

• LESS、SASS 自动编译

• Autoprefixer 前缀自动补全

• 自动生成图片 CSS 属性，width & height

• CSS Sprite 雪碧图合成

• JS、CSS、HTML 压缩

• 按需加载

• 延迟加载

解决方案

• 项目初始化。若是你用了 yeoman 或者 HTML5 Boilerplate，你就懂我说什么

• 做用域污染。前端自带问题。

• eslint 验证，代码验证验证

• Retina @2x & @3x 自动生成适配

• px -> rem 兼容适配方案

• 智能 WebP 解决方案

• 非覆盖式升级，文件指纹

• CDN 文件缓存，缓存更新

• 自动化测试

调试和部署

• 监听文件变更，自动刷新浏览器 (LiveReload)

• 文件指纹，hash 值生成

• FTP 发布部署

• ZIP 项目打包

自动化测试

• Mocha

• Jasmine

• travis-ci

• Jenkins

以上我只是列出了一些关键要点，或许大家还有更加厉害的方式来提高效率和下降成本，软件开发鼓励分享和交流。我也总能从大公司的技术交流会议学到很多技术方案和思想。不论是大团队，仍是小团队工程化的推广都应该是工做环节中的一部分。

没有比工程化推广更迫切的事情了！