Grunt快速入门

快速入门

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

Grunt 0.4.x 必须配合 Node.js >= 0.8.0 版本使用。

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

若是你已经安装了 Grunt，如今须要参考一些文档手册，那就请看一看 Gruntfile 实例 和如何 配置任务吧。

安装 CLI

还在使用 Grunt 0.3 版本吗？请查看 Grunt 0.3 注意事项

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

npm install -g grunt-cli

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

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

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

CLI 是如何工做的

每次运行grunt 时，他就利用node提供的require()系统查找本地安装的 Grunt。正是因为这一机制，你能够在项目的任意子目录中运行grunt 。

若是找到一份本地安装的 Grunt，CLI就将其加载，并传递Gruntfile中的配置信息，而后执行你所指定的任务。为了更好的理解 Grunt CLI的执行原理，请阅读源码。

拿一份现有的 Grunt 项目练手

假定Grunt CLI已经正确安装，而且已经有一份配置好package.json 和 Gruntfile 文件的项目了，接下来就很容易拿Grunt练手了：

1. 将命令行的当前目录转到项目的根目录下。
2. 执行npm install命令安装项目依赖的库。
3. 执行 grunt 命令。

OK，就是这么简单。还能够经过grunt --help 命令列出全部已安装的Grunt任务（task），可是通常更建议去查看项目的文档以获取帮助信息。

准备一份新的 Grunt 项目

通常须要在你的项目中添加两份文件：package.json 和 Gruntfile。

package.json: 此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。你能够在此文件中列出项目依赖的grunt和Grunt插件，放置于devDependencies配置段内。

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

package.json

package.json应当放置于项目的根目录中，与Gruntfile在同一目录中，而且应该与项目的源代码一块儿被提交。在上述目录(package.json所在目录)中运行npm install将依据package.json文件中所列出的每一个依赖来自动安装适当版本的依赖。

下面列出了几种为你的项目建立package.json文件的方式：

• 大部分 grunt-init 模版都会自动建立特定于项目的package.json文件。
• npm init命令会建立一个基本的package.json文件。
• 复制下面的案例，并根据须要作扩充，参考此说明.

{
  "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" } }

安装Grunt 和 grunt插件

向已经存在的package.json 文件中添加Grunt和grunt插件的最简单方式是经过npm install <module> --save-dev命令。此命令不光安装了<module>，还会自动将其添加到devDependencies 配置段中，遵循tilde version range格式。

例如，下面这条命令将安装Grunt最新版本到项目目录中，并将其添加到devDependencies内：

npm install grunt --save-dev

一样，grunt插件和其它node模块均可以按相同的方式安装。下面展现的实例就是安装 JSHint 任务模块：

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

在 Grunt 插件 页面能够看到当前可用的 Grunt 插件，他们能够直接在项目中安装并使用。

安装插件以后，请务必确保将更新以后的 package.json 文件提交到项目仓库中。

Gruntfile

Gruntfile.js 或 Gruntfile.coffee 文件是有效的 JavaScript 或 CoffeeScript 文件，应当放在你的项目根目录中，和package.json文件在同一目录层级，并和项目源码一块儿加入源码管理器。

Gruntfile由如下几部分构成：

• "wrapper" 函数
• 项目与任务配置
• 加载grunt插件和任务
• 自定义任务

Gruntfile文件案例

在下面列出的这个 Gruntfile 中，package.json文件中的项目元数据（metadata）被导入到 Grunt 配置中， grunt-contrib-uglify 插件中的uglify 任务（task）被配置为压缩（minify）源码文件并依据上述元数据动态生成一个文件头注释。当在命令行中执行 grunt 命令时，uglify 任务将被默认执行。

module.exports = function(grunt) { // 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' } } }); // 加载包含 "uglify" 任务的插件。 grunt.loadNpmTasks('grunt-contrib-uglify'); // 默认被执行的任务列表。 grunt.registerTask('default', ['uglify']); };

前面已经向你展现了整个 Gruntfile，接下来将详细解释其中的每一部分。

"wrapper" 函数

每一份 Gruntfile （和grunt插件）都遵循一样的格式，你所书写的Grunt代码必须放在此函数内：

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

项目和任务配置

大部分的Grunt任务都依赖某些配置数据，这些数据被定义在一个object内，并传递给grunt.initConfig 方法。

在下面的案例中，grunt.file.readJSON('package.json') 将存储在package.json文件中的JSON元数据引入到grunt config中。 因为<% %>模板字符串能够引用任意的配置属性，所以能够经过这种方式来指定诸如文件路径和文件列表类型的配置数据，从而减小一些重复的工做。

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

与大多数task同样，grunt-contrib-uglify 插件中的uglify 任务要求它的配置被指定在一个同名属性中。在这里有一个例子, 咱们指定了一个banner选项(用于在文件顶部生成一个注释)，紧接着是一个单一的名为build的uglify目标，用于将一个js文件压缩为一个目标文件。

// 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 插件和任务

像 concatenation、[minification]、grunt-contrib-uglify 和 linting这些经常使用的任务（task）都已经以grunt插件的形式被开发出来了。只要在 package.json 文件中被列为dependency（依赖）的包，并经过npm install安装以后，均可以在Gruntfile中以简单命令的形式使用：

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

注意： grunt --help 命令将列出全部可用的任务。

自定义任务

经过定义 default 任务，可让Grunt默认执行一个或多个任务。在下面的这个案例中，执行 grunt 命令时若是不指定一个任务的话，将会执行uglify任务。这和执行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方法加载。