Grunt搭建自动化web前端开发环境

说明：以下为windows环境示例

前期准备

安装Node.js

• 下载Node.js
  下载地址https://nodejs.org/
  奇数版本号的 Node.js 被认为是不稳定的开发版。so下载偶数版本的。

• 安装Node.js
  将下载好的文件双击打开进行“下一步”式的安装。

  运行以下命令，得到版本号，则安装成功

node -v

Grunt和 Grunt 插件是通过 npm 安装并管理的，npm是 Node.js 的包管理器。因此安装好Node.js，就可以开始Grunt的安装了。

步入正轨

安装CLI

首先确保网络畅通，否则几个小时都安装不好那就很悲剧了。
其次需要先将Grunt命令行（CLI）安装到全局环境中。
运行以下命令，执行完成则可以全局使用Grunt命令

npm install -g grunt-cli

安装Grunt

首先我们准备一个工作目录testProject
在这个目录下我们先创建一个文件package.json
package.json: 此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。

package.json中的代码片段

{
  "name": "test-project",
  "version": "1.0",
  "devDependencies": {

  }
}

package.json文件配置好后，运行以下命令

npm install grunt --save-dev

运行结束，我们看到Grunt最新版本被安装到项目目录中，并将其添加到devDependencies内

package.json中的代码片段

{
  "name": "test-project",
  "version": "1.0",
  "devDependencies": {
    "grunt": "~0.4.5"
  }
}

再运行以下命令

npm install grunt-contrib-jshint --save-dev

devDependencies中的内容又有变化

package.json中的代码片段

{
  "name": "test-project",
  "version": "1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0"
  }
}

通过以上命令，安装了指定插件，还会自动将其添加到devDependencies 配置中。
我们也可以将devDependencies中提前配置所需要的grunt及插件，则会按照配置的插件版本去安装。

Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee，用来配置或定义任务（task）并加载Grunt插件的。 此文档中提到的 Gruntfile 其实说的是一个文件，文件名是 Gruntfile.js 或 Gruntfile.coffee。

Gruntfile.js 中的代码片段

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
  });
};

未完待续