开始使用 Grunt

CLI

npm install -g grunt-cli

Grunt CLI的工作很简单：在Gruntfile所在目录调用运行已经安装好的相应版本的Grunt。这就意味着可以在同一台机器上同时安装多个版本的Grunt。

之后就开始安装Grunt了

npm install grunt --save-dev

成功，开始进行配置！

两个重要的文件

Gruntfile.js和package.json，刚看到这连个东西的时候着实烦恼，实在不明白到底是干什么的。从太习惯了一切的图形界面到由自己手动去 DIY 做出一个东西 ，这是一个过程。傻瓜式的图形界面让人忘了思考。至少于我最近学习 Grunt 和使用 webStorm 切身体会到的。

package.json

{
  "name": "gruntStudy",
  "description": "grunt is a good thing",
  "version": "0.0.1",
  "author": "RenGuangHui",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-htmlmin": "^0.3.0",
    "grunt-contrib-jshint": "^0.10.0",
    "grunt-contrib-uglify": "^0.6.0",
    "grunt-contrib-watch": "^0.6.1"
  }
}

这是一个很简单的 json 文件，里面包含了你的项目名称描述等一些其他说明的东西。重要的是devDependencies这个键值，里面是自己需要的 Grunt 和其插件的名称和版本。

可以直接像上述那样将需要的插件和版本号写在package.json文件里，然后在项目中执行npm install命令，npm 会自动安装列出的插件。也可以直接使用 npm 进行安装

比如grunt-contrib-uglify 这个插件
npm install grunt-contrib-uglify --save-dev

成功后也会自动写入 package.json 这个文件中，看客自己尝试。多尝试一些就会明白怎么使用了。

Gruntfile.js

这个文件是用来对 Grunt 进行一些配置，主要的设置我们的运行任务（何时怎样压缩合并JS，CSS，HTML等）

具体可参见Gruntjs中文网的教程以及各个插件的文档，新手刚开始使用会有很多的疑问，多百度谷歌并自己实践，会很快明白。

写前说明

终于也要开始使用 Grunt 了，学习了两天大概了解了基本使用方法。记录一下 😄

安装前的事情

在 此Grunt中文版 里已经对于安装已经说明的够为详细，只是对于不习惯操作控制台的菜鸟需要用心去理解。

这里还是简单说一下，Grunt 依赖于 Node.js ，所以也没有学过 Node.js 的小伙伴还是要先去 NodeJs官网 下载安装之（半年前领导让学nodejs我不学，现在好想哭……）另外常用 windows 的小伙伴们安装 nodejs 很可能要出现安装不成功的状况 😭 ，遇见这种情况只能自己动手 DIY 了。

下载nodejs引擎，32bit version 或者 64bit version

下载最新版的npm zip格式压缩包 http://nodejs.org/dist/npm/

在硬盘某个位置，如D盘下建立一个文件nodejs，把上面两个下载的东西都放在这里，npm要解压。

配置两个环境变量：一个是PATH上增加node.exe的目录D:nodejs,一个是增加环境变量NODE_PATH,值为D:nodejs\node_modules。

win7环境配置在系统》高级系统设置》高级》环境变量》系统变量中查找PATH，编辑加上D:nodejs，再加上NODE_PATH变量和值。

安装express：在Node目录下键入指令npm install express[安装express至相对路径]或npm install express -g[安装express至绝对路径]

至此，在控制台输出 node -v，如果输出 nodejs 版本则安装成功。