Question

前端的开发不同于后端，涉及的东西有很多，后台通常的流程就是:创建->编码->测试。而前端的制作，包含了切图->项目构建->编译(less,coffeescript)->兼容性->测试->发布等等多道流程。

常规的前端流程

• 搭建基础的项目骨架。包含创建模版（html、jade、haml）、脚本（javascript、coffeescript）、样式（css、less、sass、stylus）文件
• 启动本地服务器，比如MAMP
• 切图+编码页面，搭建界面
• 保存，刷新浏览器查看预览，并且进行调整
• 如果偶遇需要编译的文件，还要使用工具对其（jade、coffeescript、less、sass…）编译
• 编码交互和事件
• 保存，刷新浏览器，手动触发检查
• 执行测试用例
• 代码检测, 优化
• 移除调试代码
• 静态资源合并与优化, javascript和css文件的合并与压缩
• 打包上传到服务器
• 部署测试环境
• 灰度发布现网

缺点：在开发的中后期，代码会庞大，维护起来比较费力，修改和新增都担心对之前的会有影响，且还担心线上的版本有问题，需要重新部署。

工具化

以上的流程中，其实有些内容，比如切图，刷新，测试，部署都可以通过工具化的方式进行优化。

大平台公司对工具化的坚持是一致的：凡是被不断重复的过程，将其工具化，绑定到自动化流程之中。技术产品也需要Don’t make me think的方式来推广最佳实践。总而言之：依靠工具，而不是经验。

nodejs的出现，不敢说改变后端的开发很多，但是对前端的工具化确实进步了很多。

自动化

有了工具之后，就是要想办法利用工具达到流程的自动化。

Yeoman

Yeoman是一款现代Web应用的脚手架工具，也是一个工作流。它包含了yo, grunt, bower三个工具。

yo

脚手架工具，帮助构建项目骨架。

bower

Bower是用于Web前端开发的包管理器。它运行在Git之上（因此必须先安装Git），默认情况下会去Github下载，并存放在bower_components目录下。

grunt

自动化工具，通过package.json来安装依赖的差距，使用gruntfile.js文件来编写要执行的任务。

gulp

grunt使用多了就会发现任务编写过程的麻烦，后来居上的gulp是一个很好的替代，我已经在使用，并且离不开了！

参考资料

• 停不下来的前端，自动化流程
• 前端自动化工作流简介
• 前端自动化构建和发布系统的设计（一）
• 前端自动化构建和发布系统的设计（二）