自动化流程

前端的开发不同于后端，涉及的东西有很多，后台通常的流程就是:创建->编码->测试。而前端的制作，包含了切图->项目构建->编译(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是一款现代Web应用的脚手架工具，也是一个工作流。它包含了yo, grunt, bower三个工具。

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

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

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

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

原文: https://leohxj.gitbooks.io/front-end-database/content/frontend-workflow/process.html