grunt 使用

1.Grunt和 Grunt 插件是通过 npm 安装并管理的。

2.在安装 Grunt 前，请确保当前环境中所安装的 npm 已经是最新版本，执行 npm update -g npm 指令进行升级（在某些系统中可能需要 sudo 指令）。

3.你需要先将Grunt命令行（CLI）安装到全局环境中。但是不等于安装grunt。npm install -g grunt-cli。允许你在同一个系统上同时安装多个版本的 Grunt。运行grunt 时，他就利用node提供的require()系统查找本地安装的 Grunt。

4.npm init 生产package.json，在项目的根目录，同gruntfile.js。

5.npm install –save-dev命令安装grunt插件。此命令不光安装了，还会自动将其添加到devDependencies 配置段中。
.npm install grunt –save–only=dev
.npm install grunt-contrib-jshint –save–only=dev
.npm install grunt-contrib-uglify –save–only=dev
6.Gruntfile由以下几部分构成：grunt-init
“wrapper” 函数

module.exports = function(grunt) {
  // Do grunt-related things in here
};

项目与任务配置

object内，并传递给grunt.initConfig 方法.grunt.file.readJSON('package.json') 将存储在package.json文件中的JSON元数据引入到grunt config中
// Project configuration.
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'
    }
  }
});

加载grunt插件和任务

只要在 package.json 文件中被列为dependency（依赖）的包，并通过npm install安装之后，都可以在Gruntfile中以简单命令的形式使用：

// 加载能够提供"uglify"任务的插件。
grunt.loadNpmTasks('grunt-contrib-uglify');
注意： grunt --help 命令将列出所有可用的任务。

可以dos grunt –help 查看，前提安装了grunt cli grunt.
通过定义 default 任务，可以让Grunt默认执行一个或多个任务.
grunt uglify 或者 grunt default的效果一样。default任务列表数组中可以指定任意数目的任务（可以带参数）。

// Default task(s).
grunt.registerTask(‘default’, [‘uglify’]);
如果Grunt插件中的任务（task）不能满足你的项目需求，你还可以在Gruntfile中自定义任务（task）。例如，在下面的 Gruntfile 中自定义了一个default 任务，并且他甚至不依赖任务配置：

module.exports = function(grunt) {

// A very basic default task.
grunt.registerTask(‘default’, ‘Log some stuff.’, function() {
grunt.log.write(‘Logging some stuff…’).ok();
});

};
特定于项目的任务不必在 Gruntfile 中定义。他们可以定义在外部.js 文件中，并通过grunt.loadTasks 方法加载。
6.设置多任务

grunt.initConfig({
  concat: {//任务
    foo: {//目标
      // concat task "foo" target options and files go here.
    },
    bar: {
      // concat task "bar" target options and files go here.
    },
  },
  uglify: {
    bar: {
      // uglify task "bar" target options and files go here.
    },
  },
});

7.设置目标和任务的options
在一个任务配置中，options属性可以用来指定覆盖内置属性的默认值。此外，每一个目标（target）中还可以拥有一个专门针对此目标（target）的options属性。目标（target）级的平options将会覆盖任务级的options。
options对象是可选的，如果不需要，可以忽略。

grunt.initConfig({
  concat: {
    options: {
      // 这里是任务级的Options，覆盖默认值 
    },
    foo: {
      options: {
        // "foo" target options may go here, overriding task-level options.
      },
    },
    bar: {
      // No options specified; this target will use task-level options.
    },
  },
});

8.允许每个目标对应一个src-dest文件映射。单不能额外为每个目标映射制定属性。

grunt.initConfig({
  jshint: {
    foo: {
      src: ['src/aa.js', 'src/aaa.js']
    },
  },
  concat: {
    bar: {
      src: ['src/bb.js', 'src/bbb.js'],
      dest: 'dest/b.js',
    },
  },
});
推荐下方：
grunt.initConfig({
  concat: {
    foo: {
      files: [
        {src: ['src/aa.js', 'src/aaa.js'], dest: 'dest/a.js'},
        {src: ['src/aa1.js', 'src/aaa1.js'], dest: 'dest/a1.js'},
      ],
    },
    bar: {
      files: [
        {src: ['src/bb.js', 'src/bbb.js'], dest: 'dest/b/', nonull: true},
        {src: ['src/bb1.js', 'src/bbb1.js'], dest: 'dest/b1/', filter: 'isFile'},
      ],
    },
  },
});

9.启用相对路径：

grunt.initConfig({
  uglify: {
    static_mappings: {
      // Because these src-dest file mappings are manually specified, every
      // time a new file is added or removed, the Gruntfile has to be updated.
      files: [
        {src: 'lib/a.js', dest: 'build/a.min.js'},
        {src: 'lib/b.js', dest: 'build/b.min.js'},
        {src: 'lib/subdir/c.js', dest: 'build/subdir/c.min.js'},
        {src: 'lib/subdir/d.js', dest: 'build/subdir/d.min.js'},
      ],
    },
    dynamic_mappings: {
      // Grunt will search for "**/*.js" under "lib/" when the "uglify" task
      // runs and build the appropriate src-dest file mappings then, so you
      // don't need to update the Gruntfile when files are added or removed.
      files: [
        {
          expand: true,     // Enable dynamic expansion.
          cwd: 'lib/',      // Src matches are relative to this path.
          src: ['**/*.js'], // Actual pattern(s) to match.
          dest: 'build/',   // Destination path prefix.
          ext: '.min.js',   // Dest filepaths will have this extension.
          extDot: 'first'   // Extensions in filenames begin after the first dot
        },
      ],
    },
  },
});

10.grunt 两个版本，一个是cli 客户端，一个是服务端。Gruntfile.js本质上是一个函数，而且他的参数是grunt。
11.写好package.json,项目目录下npm install 即可，安装依赖。
12.grunt.initConfig中添加如下代码，grunt.loadNpmTasks(‘grunt-task-name’)不用每行都写了，一句搞定：

  "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0",
    "grunt-contrib-cssmin":"*",
    "grunt-contrib-sass":"*",
    "grunt-contrib-watch":"*",
    "grunt-cssc":"*",
    "grunt-htmlhint":"*",
    "matchdep":"*"

require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);