用grunt搭建自动化的web前端开发环境-完整教程

jQuery在使用grunt，bootstrap在使用grunt，百度UEditor在使用grunt，你没有理由不学、不用！

1. 前言

各位web前端开发人员，如果你现在还不知道grunt或者听说过、但是不会熟练使用grunt，那你就真的真的真的out了（三个“真的”重 复，表 示重点）。至于grunt的作用，这里不详细说了，总之你如果做web前端开发，你一定要用grunt。还有一点，它完全免费，没有盗版。既强大又免费的 东西，为何不用？

当然了，你如果你能找到更好的替代grunt的其他工具也是可以的，例如gulp。Gulp未来有可能替代grunt，但是现在来说市场占有率还是不如grunt。而这种工具咱们是现在就需要用的，所有不要再犹豫了，拿来主义，先用grunt，即学即用。

本文章旨在讲解grunt入门，以及讲解grunt最常用的几个插件的使用。篇幅可能会比较长，大家耐心看。本文例证详细、清晰的讲解每一个知识点。 但是——如果你看完本文还是不会，我还有最后一个大招。不过你可能需要付出一顿饭钱 + 一包烟钱的代价——去看看我录制的视频教程《 用grunt搭建自动化的web前端开发环境 》（教程中有源码下载） ，保证你看完就会用。

（PS：碰巧，本文基于windows环境写的，而视频教程是基于mac os录制的，两者兼备了）

废话不多少，视频教程你也先别看，钱别着急花。先挑战一下自己的理解能力，看下文讲述是否清晰、是否能看懂。

2. 安装nodejs

Grunt和所有grunt插件都是基于nodejs来运行的，如果你的电脑上没有nodejs，就去安装吧。安装nodejs非常简单，完全傻瓜式、下一步下一步下一步、的安装方式，这里不再赘述。去 https://nodejs.org/ 上，点击页面中那个绿色、大大的“install”按钮即可。

安装了nodejs之后，可以在你的控制台中输入“node -v”来查看nodejs的版本，也顺便试验nodejs是否安装成功。

注意两点。第一，grunt依赖于nodejs的v0.8.0及以上版本；第二，奇数版本号的版本被认为是不稳定的开发版，不过从官网上下载下来的应该都是偶数的稳定版。

3. 安装grunt-CLI

注意，如果你的电脑不联网，以下操作你都做不了，所以，首先保证电脑联网。

“CLI”被翻译为“命令行”。要想使用grunt，首先必须将grunt-cli安装到全局环境中，使用nodejs的“npm install…”进行安装。如果你不了解nodejs的npm如何安装软件，这里就先不要问了，先照着我说的做。

打开控制台（ 注意： windows系统下请使用管理员权限打开 ），输入：

注意，mac os 系统、部分linux系统中，在这句话的前面加上“ sudo ”指令 。

回车，命令行会出现一个转动的小横线，表示正在联网加载。加载的时间看你网速的快慢，不过这个软件比较小，一般加载时间不会很长，稍一会儿，就加载完了。你会看到以下界面。

这时候要验证一下grunt-cli是否安装完成并生效，你只需要继续在命令行中输入“grunt”命令即可。如果生效，则会出现以下结果：

你不要管这些结果是什么意思，总之出现这些提示，证明你的grunt-cli安装成功了。