grunt简介

grunt是一个javascript任务运行工具。

一、为什么要使用任务运行工具？

自动化。当你处理诸如代码最小化，代码编译，单元测试，代码规范校验等等重复任务时非常需要

二、安装CLI

npm install -g grunt-cli

安装cli并不是安装grunt，cli工作很简单，就是在Gruntfile所在目录调用运行已经安装好的相应版本的grunt，即意味着同一台机器上可以安装多个版本的grunt

三、用一个现有的grunt项目进行工作

已经安装好cli和使用package.json和Gruntfile文件配置好的情况下

1、进入项目根目录

2、运行npm install

3、运行grunt

四、创建Grunt新项目

一个典型的配置过程一般只涉及两个文件：package.json和Gruntfile

pageake.json:用来存储已经作为npm模块发布的项目元数据。在这个文件中列出项目所依赖的grunt版本和grunt插件

Gruntfile:js文件或coffee文件，用于配置或者定义grunt任何和加载grunt插件

pageake.json

与Gruntfile相邻，都应归属于项目的跟目录，并且应与项目源代码一起提交，在此目录中运行npm install将依据paceake.json文件中所列出的每个依赖来安装

创建包的方式：

1、大多数grunt-init模板都会自动创建一个基本的package.json

2、使用npm init命令会自动创建一个基本的package.json

{
    "name": "my-project-name", // 项目名称
    "version": "0.1.0", // 项目版本
    "devDependencies": { // 项目依赖
        "grunt": "~0.4.1", // Grunt库
        "grunt-contrib-jshint": "~0.6.0", //以下三个是Grunt内置任务
        "grunt-contrib-nodeunit": "~0.2.0",
        "grunt-contrib-uglify": "~0.2.2"
    }
}

安装grunt和grunt插件

使用npm install <module> --save-dev不经会在本地安装<module>，还会使用一个波浪行字符的版本范围自动将所安装的<module>添加到项目依赖中

如这个将安装最新版的grunt

npm install grunt --save-dev

Gruntfile

由以下几部分组成：包装函数、项目和任务配置、加载的Grunt插件和任务、自定义任务

示例：

module.exports = function(grunt){

    // 项目配置
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'src/<%=pkg.name %>.js',
                dest: 'build/<%= pkg.name %>.min.js'
            }               
        }
    });

    // 加载提供"uglify"任务的插件
    grunt.loadNpmTasks('grunt-contrib-uglify');

    // 默认任务
    grunt.registerTask('default', ['uglify']);
}

1、包装函数
格式：

module.exports = function(grunt) {
    // 在这里处理Grunt相关的事情
}

2、项目和任务配置

大多数grunt任务所依赖的配置数据都被定义在传递给grunt.initConfig方法的一个对象中

在这个例子中，grunt.file.readJSON('package.json')会把存储在package.json中的JSON元数据导入到Grunt配置中。由于<% %>模板字符串可以引用任意的配置属性，因此可以通过这种方式来指定诸如文件路径和文件列表类型的配置数据，从而减少一些重复的工作(比如我们通常需要通过复制粘贴的方式来在不同的地方引用同一属性, 使用<% %>的方式可以简单的理解为将某些特定的数据存储在变量中，然后在其他地方像使用变量一样就可以使用这些数据属性)。

你可以在这个配置对象中(传递给initConfig()方法的对象)存储任意的数据，只要它不与你任务配置所需的属性冲突，否则会被忽略。此外，由于这本身就是JavaScript，你不仅限于使用JSON；你可以在这里使用任意的有效的JS代码。如果有必要，你甚至可以以编程的方式生成配置。

与大多数任务一样，grunt-contrib-uglify插件的uglify任务要求它的配置被指定在一个同名属性中。在这里有一个例子, 我们指定了一个banner选项(用于在文件顶部生成一个注释)，紧接着是一个单一的名为build的uglify目标，用于将一个js文件压缩为一个目标文件(比如将src目录jquery-1.9.0.js压缩为jquery-1.9.0.min.js然后存储到dest目录)。

// 项目配置
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
        options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
        },
        build: {
            src: 'src/<%=pkg.name %>.js',
            dest: 'build/<%= pkg.name %>.min.js'
        }
    }
});

3、加载grunt插件和任务

只要一个插件被作为一个依赖指定在项目的package.json文件中，并且已经通过npm install安装好，都可以再Gruntfile文件中使用下面的命令来启动他

// 加载提供"uglify"任务的插件
grunt.loadNpmTasks('grunt-contrib-uglify');

grunt --help 命令可以列出所有可用的任务

4、自定义任务

default任务可以让grunt默认运行一个或者多个任务

如果你的项目所需的任务没有对应的Grunt插件提供相应的功能，你可以在Gruntfile内定义自定义的任务。例如，下面的Gruntfile就定义了一个完整的自定义的default任务，它甚至没有利用任务配置(没有使用grunt.initConfig()方法)：

module.exports = function(grunt) {
    // 一个非常基础的default任务
    grunt.registerTask('default', 'Log some stuff.', function() {
        grunt.log.write('Logging some stuff...').ok();
    });
};

自定义的项目特定的任务可以不定义在Gruntfile中，可以定义在一个外部的js文件中，然后通过grunt.loadTasks方法来加载