快速入门

Grunt和 Grunt 插件是通过 npm 安装并管理的，npm是 Node.js 的包管理器。

Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用。；奇数版本号的 Node.js 被认为是不稳定的开发版。

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

安装 CLI

在继续学习前，你需要先将Grunt命令行（CLI）安装到全局环境中。安装时可能需要使用sudo（针对OSX、*nix、BSD等系统中）权限或者作为管理员（对于Windows环境）来执行以下命令。

1

npm install -g grunt-cli

上述命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。

注意，安装grunt-cli并不等于安装了 Grunt！Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。

这样就能让多个版本的 Grunt 同时安装在同一台机器上。

Gruntfile.js瘦身

1. 使用load-grunt-tasks（https://www.npmjs.com/package/load-grunt-tasks）
   此grunt插件会根据package.json加载相应的Grunt任务，帮我们省去了手动加载的麻烦。
2. 使用load-grunt-config（https://www.npmjs.com/package/load-grunt-config）
   这时你的Gruntfile.js会变得非常简单：

1
2
3
4
5
6
7
8
9
10
11
12
13

module.exports = function(grunt) {
    var path = require('path');
    require('load-grunt-config')(grunt, {
        // Grunt任务配置目录
        configPath: path.join(process.cwd(), 'grunt/config'),
        // 加载Grunt任务并初始化
        loadGruntTasks: {
            pattern: ['grunt-*'],
            config: require('./package.json'),
            scope: 'devDependencies'
        }
    });
};

减少构建任务时间

因为grunt任务是单进程串行执行，加上每个任务都会有文件IO，所以任务执行效率并不高（我们现在有项目一次JS修改变动的Grunt执行花费甚至达到了10秒的级别，当然前端代码文件多也是一个原因）。根据本人亲身体验，大于2S的构建时间，就能让你在开发中感觉到中断：文件修改保存后，马上去刷新浏览器，是看不到文件修改效果的。所以减少构建时间非常有必要。

1. 说到构建时间，首先就得知道我们每个构建任务花费的时间。这时有两个插件可以使用：time-grunt（https://www.npmjs.com/package/time-grunt） 和grunt-timer（https://www.npmjs.com/package/grunt-timer） 。time-grunt在构建完成后，会给出每个任务的耗时及占总耗时的百分比。但如果有watch任务存在，是看不到这个时间统计结果的，这时我们可以用grunt-timer;

2. 另一个不得不提到的插件是grunt-newer(https://www.npmjs.com/package/grunt-newer) 。有了这个插件，我们就可以做到文件更改后，增量更新，而不是对所有的文件去执行任务task。此插件的使用也是非常简单，只需要在原来任务前加上newer:即可

1
2
3
4
5
6
7
8
9
10

watch: {
    css: {
        files: 'src/sass/**/*.scss',
        //tasks: ['compass:dev']
    },
    js: {
        files: 'src/js/**/*.js',
        tasks: ['newer:concat']
    }
}

Grunt
优化你的grunt构建
前端自动化之利剑
Grunt-beginner前端自动化工具