【译】自动化前端开发流程 by Addy Osmani
先看一下前端开发的主要流程：
1.Setup:
- Scaffolding
- Download libraries
- Download templates
- Download frameworks
2.Develop:
- Watch Sass / Less / Stylus
- Watch CoffeeScript
- Watch Jade / Haml
- LiveReload
- JS / CSS Linting
3.Build:
- Code linting
- Running unit tests
- Compile everything
- Minify and concatenate
- Generate images / icons
- Optimize performance
- HTTP Server
- Deployment
这篇文章主要讲的就是如何把这个开发流程自动化的串联起来，介绍了很多种实用的工具。
-----------------------------------------华丽丽的分割线-----------------------------------
Codekit
官网上介绍中罗列了codekit主要的功能特性：
- 自动编译Less, Sass, Stylus, CoffeeScript, Jade & Haml等文件
- 致力于js文件合并和压缩，以及js语法错误检查
- 同时还支持Compass(Sass伴侣,官网地址:compass-style.org)
- 令人发指的是甚至还能对jpeg&png图片优化
- 自动刷新浏览器(之前推荐过同类的工具:前端开发利器-F5)
- 让你在不同的项目中仅维护同一套文档
- 然而这还仅仅是其中的一部分...
Hammer
- 支持SASS / CoffeeScript / HAML / Markdown, 自动编译成html / css / javascript
- Hammer拥有自己的语法，来支持包括include html, clever filepaths, 变量，并且支持auto reload页面
- 输出文件的压缩、合并和优化
类似的构建工具还有prepros / koala / mixture / compass / scout， 这里不一一介绍。
下面着重介绍"Yeoman" —— "Modern workflows for modern apps"
Yeoman不只是一个工具，他是一个工作流程，一套更有利于前端开发的工具集合和实践规范。
主要由三个工具构成：yo (脚手架), grunt (构建工具) and bower (包管理工具).
- Yo scaffolds out a new application, writing your Grunt configuration and pulling in relevant Grunt tasks that you might need for your build.
- Grunt is used to build, preview and test your project, thanks to help from tasks curated by the Yeoman team and grunt-contrib.
- Bower is used for dependency management, so that you no longer have to manually download and manage your scripts.
三个工具彼此独立，但是在一起合作起来可以让我们的开发流程变得更加自动化。总之就是更爽~
