系统：macos
操作：命令行操作
前提：Homebrew npm 安装完毕
最近学习React-Native，作为一个Android原生开发者，对前端知识只是大学期间学的一些基础，如果要彻底掌握这么一套开发技术，需要系统学习JavaScript，ES6规范等，做学习JavaScript的准备的时候，发现了一个前端构建工具Grunt, 工具很强大，网站标题都很精准，Grunt JavaScript世界的构建工具http://www.gruntjs.net/ 。
为何要用构建工具？
直接引用网站的一句话：自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。
建议各位通过官方手册安装，以下只是个人实践结果。
安装：

1 安装CLI

什么是grunt-cli，它将grunt命令添加到环境当中，并且控制每个项目使用的grunt版本，属于grunt的全局工具，最好在全局环境下安装：

npm install -g grunt-cli

安装grunt-cli 并测试了一下grunt命令

先列出我的最终完成目录，避免大家过程中造成迷茫：

➜  firstjs tree -L 1
.
├── Gruntfile.js
├── index.html
├── lib
├── node_modules
└── package.json

2 directories, 3 files

2 创建一个目标项目#

我们随便创建一个测试项目目录
/Users/pczhu/WorkSpace/javascript/firstjs
一般需要在你的项目中添加两份文件：package.json和 Gruntfile（此处不要命名为Gruntfile，往下看）。
package.json: 此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件，放置于devDependencies配置段内。
Gruntfile: 此文件被命名为 Gruntfile.js或 Gruntfile.coffee，用来配置或定义任务（task）并加载Grunt插件的。
此文档中提到的 Gruntfile其实说的是一个文件，文件名是 Gruntfile.js或 Gruntfile.coffee，所以请正确命名。

package.json
应当放置于项目的根目录中，与Gruntfile在同一目录中，并且应该与项目的源代码一起被提交。在上述目录(package.json所在目录)中运行npm install将依据package.json文件中所列出的每个依赖来自动安装适当版本的依赖。下面列出了几种为你的项目创建package.json文件的方式：

• 1 大部分grunt-init模版都会自动创建特定于项目的package.json文件。
• 2 npm init命令会创建一个基本的package.json文件。
• 3 复制下面的案例，并根据需要做扩充(说白了就是自己命名个文件然后把下面内容贴进去，修改一下)

{ 
  "name": "my-project-name",//你的项目名称（注释不需要）
  "version": "0.1.0",//你的版本（注释不需要）
  "devDependencies"://你的依赖和以后安装的插件都会列在这（注释不需要）
       { 
         "grunt": "~0.4.5", 
         "grunt-contrib-jshint": "~0.10.0",
         "grunt-contrib-nodeunit": "~0.4.1",
         "grunt-contrib-uglify": "~0.5.0" 
      }
}

我个人采用的方式自己搞了一个简单的package.json

我自己写的package.json

Gruntfile.js可以暂时不写。

3 安装Grunt

npm install

查看当前目录，生成了node_modules 文件夹，并且报warn如下：

npm WARN jsfirst@1.0.0 No description
npm WARN jsfirst@1.0.0 No repository field.
npm WARN jsfirst@1.0.0 No license field.

无视即可，不用管。
此时我的目录结构

➜  firstjs tree
.
├── node_modules
└── package.json

安装grunt

npm install grunt --save-dev

此时node_modules文件夹超级丰富，package.json文件也有所变化，自动在最下面添加了如下内容

 "devDependencies": {
   "grunt": "^1.0.1"
  }

4 安装插件模块

npm install <module> --save-dev

常用的插件列举如下
grunt-contrib-clean：删除文件。
grunt-contrib-compass：使用compass编译sass文件。
grunt-contrib-concat：合并文件。
grunt-contrib-copy：复制文件。
grunt-contrib-cssmin：压缩以及合并CSS文件。
grunt-contrib-imagemin：图像压缩模块。
grunt-contrib-jshint：检查JavaScript语法。
grunt-contrib-uglify：压缩以及合并JavaScript文件。
grunt-contrib-watch：监视文件变动，做出相应动作。
grunt-contrib-stylus：stylus编写styl输出css 。
举例安装jshint 语法检查插件

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

想要一次性安装多个插件，如下

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

注意，此时这些插件是没有用的，因为需要配置，也就是Gruntfile.js

5 创建并修改Gruntfile.js

此部分参考

//最外层包装函数
module.exports = function(grunt) {
 //插件配置信息
  grunt.initConfig({
    //读取package.json中的项目配置，并且存储在pkg中，用于使用
    pkg: grunt.file.readJSON('package.json'),//一定注意各种逗号
    //此处填写各种插件的配置信息
    //jshint配置
    jshint: {
          options: {
                //大括号包裹
                curly: true,
                //对于简单类型，使用===和!==，而不是==和!=
                eqeqeq: true,
                //对于首字母大写的函数（声明的类），强制使用new
                newcap: true,
                //禁用arguments.caller和arguments.callee
                noarg: true,
                //对于属性使用aaa.bbb而不是aaa['bbb']
                sub: true,
                //查找所有未定义变量
                undef: true,
                //查找类似与if(a = 0)这样的代码
                boss: true,
                //指定运行环境为node.js
                node: true
            },//注意逗号
            //具体任务目录配置
            files: {
                src: ['src/*.js','Gruntfile.js']
            }
    },//**注意逗号分隔**
    watch: {
        another: {
            files: ['*.html', 'css/*', 'js/*', 'images/**/*','lib/*.js','src/*'],//监听文件
            options: {
               
                livereload: true//通过配置Chrome的livereload插件调试，所以直接用了true
            }
        }
    }//如果是最后不用逗号了
  });

  // 加载指定插件任务
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
 // 开启命令时候默认执行的任务
  grunt.registerTask('default', ['jshint','watch']);
};

OK 保存好之后我们跑一下,在项目目录下grunt，我的文件直接是以上内容

grunt

运行成功的标志

Ctrl+C 即可关闭

6 实验

我们实验一下js校验，搞个文件目录lib/one.js,随便写点乱七八糟的错代码进去，保存,运行grunt。发现居然运行成功了，查看jshint的配置，发现配置文件目录为src: ['src/.js','Gruntfile.js'] 在这添加'lib/.js' 大家按照自己需求设置。
再次运行。提示了错误

错误提示证明插件起作用

现在我们新建一个正确的页面index.html
通过tomcat静态地址引入，这步大家可以自行查找一下，非常简单。通过Chrome浏览器科学上网，进入Chrome应用商店安装livereload插件，安装后会有如图所示图标：

安装插件

现在 启动tomcat 跑起来我们的页面

我的页面

项目根目录下执行命令

grunt

显示waiting

注意Chrome插件图标，点击该图标，图标中心圆圈会变成实心点

链接成功的插件

修改我们的界面内容，直接打开html文件修改即可，我们随便写个ABC,保存的瞬间注意观察浏览器，无需刷新无需重启，自动变化

成功研制watch插件

其他各种插件可以自己试验一下。各种配置可以查看相应文档 http://www.gruntjs.net/