用途和使用场景

我们先来看下微硬公司小明和小红的日常前端开发工作：

小明在开发一个 JS 插件，写了好多代码，终于写完了，放在 HTML 文件里调用一看，console 里面好多 error，于是就挨个调整修改。为了排除深层潜在问题，他还打开了 http://www.jshint.com/ 这个网站，把自己的代码复制进去用 jshint 检测了，结果发现了好多细节问题和不规范的地方，依次修改。最后要发布了，他又打开了 http://tool.css-js.com/ 网站，把自己的代码复制进去，使用 Uglify 来压缩了一下，提供一个压缩版本。然后上传到了 Github 上托管。

这时候，Github 突然有一个 Issue，他看了一下，原来有个疏忽的地方，又进行了修改，然后打开 jsHint 和 Uglify 在线压缩网站进行检查和压缩，再次发布上去。

于此同时，小红在做一个活动页面的前端重构工作。她打开了正在做的 HTML 页面，由于使用了 Sass，所以她打开了 Koala 在后台帮她自动编译成 CSS，但是每次保存一下，想要看到效果，还是需要切换到浏览器，刷新一下。做交互处理的时候，她写了一些 JS，为了规范，也使用 jshint 检查了一下。终于做完了，这时候做了一下最后的优化处理准备上线，她把 icons 在 Photoshop 中合并成了一张图片，并在 CSS 的对应位置修改了一下，然后用在线压缩工具把 CSS 和 JS 都压缩了一遍，提交测试去了。

这就是他俩的工作，日复一日年复一年，有一天，小明终于受够了，朝小红发牢骚：哥要是再来回复制粘贴到网站上排错压缩，哥就是逗逼！小红满眼泪花的说，你想好办法了，帮我解决一下自动刷新问题，我也受够了。

于是小明工作都不做了，开始苦思冥想怎么开发一个可以自动把写的代码发送到远程网站，让他们检查一下错误并且压缩好，再反回来生成一个文件。

开发一个任务自动处理器

当然，小明很快就不那么想了，因为依赖外部网站有很多意外因素，而且受限于网络和网速，其次他们也没提供有关接口来调用。但是他们都提供了一些算法之类的工具等。这样可以在本地调用这些工具，来完成这些操作，甚至连网络也不需要。

小明愉快的开始在笔记本上构思这个工具的开发方法和需要的功能：

首先我需要先开发一个工具，可以调用这个工具对我的某个项目目录里面的项目文件做一些操作，比如压缩、查错、合并等。

如果要做成一个工具，可能不太好，或许别人还需要更多功能，但是我没法开发这么多功能啊。要不我就做个框架把，然后每个功能做成一个插件，比如压缩插件、合并插件。如果有人需要在他的项目里压缩某个文件，他安装一下我这个工具然后再安装压缩插件就好了。这样有更多需求的人，可以自己编写功能插件，然后配合我的工具使用。

慢着，他安装完了工具和插件之后，要怎么来调用这个插件来处理项目文件？在程序界面上选择文件，然后勾选选项？我的天，我就会写点 JS，哪里可能开发带有界面的程序？慢着，用 JS ？他可以在项目文件夹中编写一个 JS 来设置任务啊！然后我的工具会读取这个 JS，解析之后获得他要执行的任务（比如压缩某某文件并改名成某某），然后调用插件完成任务。

太棒了。但是插件这么多，放在项目里肯定很大，而且又是不相关代码，要不等他发布的时候自动删除这些插件文件把？不行，如果他要发给别人，别人要继续开发，还得重新安装依次安装这些插件，然后执行任务。那怎么办？要不我再用个文件记录一下当前项目中安装或者需要的插件把！这样只需要把这个文件和 JS 任务文件放在项目目录里面，有需要的人，直接输入一条命令安装一下，然后立刻就可以执行了。

我太聪明了！

于是小明兴奋的跑过去给小红讲了一下他的工具的开发思路，然后告诉她，他可以帮忙写一个自动刷新的插件。小红反而淡定的说：等等，我好像见过这种东西，这不是 Grunt/Gulp 嘛？

小明抓紧搜了一下 Grunt/Gulp，看了一下文档之后，对着小红：尼玛，你为什么不早说！

转自：http://yujiangshui.com/grunt-basic-tutorial/