Grunt

你已经学会了 HTML 与 CSS，了解了 Bootstrap 这个框架，会用 Sass 或者 Less 的方式去创建样式，又学了点 JavaScript。现在就可以去做些东西了，不用等到什么都准备好以后再去做，因为不太可能什么都准备好。这个手册介绍了基本的前端开发工作流程相关的东西，主要是会用 Bower 管理前端项目的依赖，用 Grunt 或者 Gulp 自动化去执行任务，用 Git 来做项目的版本控制。

Bower 可以管理前端项目用的包，比如你的项目要用到 Bootstrap，传统的方法是需要先打开 Bootstrap 的官方网站，找到最新的版本，点击下载，然后解压，再把需要的东西放到指定的目录里面，因为 Bootstrap 这个框架要用到 jQuery，你还需要把它也下载下来，放到项目的目录下面。使用 Bower 可以直接用一行命令，把 Bootstrap 还有它依赖的 jQuery 一块下载下来。

你希望在编辑完 Less 或者 Sass 以后，自动把它们编译成普通的 CSS，或者可以再合并几个文件，并且再压缩一下，再把处理好的文件放到一个指定的目录下面。在测试项目的时候，你可能需要把前端项目放到一个服务器上去运行，对项目修改以后，保存了文件，你想让浏览器自动刷新。所有的，这些跟文件与目录相关的重复的动作，都可以把它们定义成 Grunt 或者 Gulp 的任务，让它们自动去执行。

你想要一种可以跟踪项目变化的方法，什么时间，你都做了什么事，你可以自由的在任何一次对项目的修改之间来回切换。你可以把项目推送到远程的服务器上保存。你的同事，可以跟你一起开发项目。你需要使用 Git 。

Gulp 与 Grunt 都是可以自动化执行任务的工具。在平时开发的流程里面，一定有一些动作需要手工的重复的去执行，比如把一个文件复制到一个指定的地方，把多个 JS 或者 CSS 文件合并成一个文件，并且最小化一下，去把写好的 Sass 或者 Less 编译成 CSS，最小化处理图像文件，创建一个可以实时刷新的本地服务器等等。

只要你觉得有些动作是要重复去做的，一般你就可以把这些动作创建成一个 Gulp 或者 Grunt 的任务，然后在指定的条件下，比如文件发生变化以后，自动去执行这些任务。

Gulp 与 Grunt 选择哪个？

Gulp 与 Grunt 做的事情都差不多，只不过背后的原理还有方法不同。在项目里用哪个都可以，完全取决于个人喜好。另外也可以根据你的项目用到的其它的东西来决定，比如 Bootstrap 这个前端框架就用到了 Grunt，Semantic UI，AngularJS  用的是 Gulp 。相比，Grunt 比较老牌，根据在 Github 上的星星数，Gulp 更受欢迎。