grunt官网教程（中文版）

快速入门

Grunt和Grunt的插件都是通过npm来安装和管理的。

Grunt 0.4.x要求Node.js的版本>=0.8.0(也就是0.8.0及以上版本的Node.js才能很好的运行Grunt)。

安装Grunt之前，可以在命令行中运行node -v查看你的Node.js版本。

安装CLI

如果你是从Grunt 0.3升级而来的，请查看可以阅读源码。这份代码很短。

用一个现有的Grunt项目进行工作

假设已经安装好Grunt CLI并且项目也已经使用一个package.json和一个Gruntfile文件配置好了，那么接下来用Grunt进行工作就非常容易了：

1. 进入到项目的根目录(在命令行面板定位到项目根目录。在windows系统下，也可以进入项目根目录的文件夹后，按Shift+鼠标右键，打开右键菜单，选择“在此处打开命令窗口(W)”)。
2. 运行npm install安装项目相关依赖(插件，Grunt内置任务等依赖)。
3. 使用grunt(命令)运行Grunt。

就是这么简单。已经安装的Grunt任务可以通过运行grunt --help列出来，但是通常最好还是先查看一下项目的文档。

准备一个新的Grunt项目

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

package.json：这个文件被用来存储已经作为npm模块发布的项目元数据(也就是依赖模块)。你将在这个文件中列出你的项目所依赖的Grunt(通常我们在这里配置Grunt版本)和Grunt插件(相应版本的插件)。

Gruntfile：通常这个文件被命名为Gruntfile.js或者Gruntfile.coffee，它用于配置或者定义Grunt任务和加载Grunt插件。

package.json

package.json与Gruntfile相邻，它们都应该归属于项目的根目录中，并且应该与项目的源代码一起被提交。在上述目录(package.json所在目录)中运行npm install将依据package.json文件中所列出的每个依赖来自动安装适当版本的依赖。

这里有一些为项目创建package.json文件的方式：

• 大多数的grunt-contrib-uglify插件的uglify任务被配置用于压缩一个源文件，同时使用该元数据(导入的元数据)动态的生成一个标语(banner)注释。在命令行运行grunt时默认会运行uglify任务。

  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']);}

  现在你已经看到到了一个完整的Gruntfile，下面让我们来看看它的各个组成部分：

  "wrapper"函数

  每个Gruntfile(和Grunt插件)都使用这个基本格式，并且所有你的Grunt代码都必须指定在这个函数里面：

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

  项目和任务配置

  大多数Grunt任务所依赖的配置数据都被定义在传递给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'        }    }});

  加载grunt插件和任务

  许多常用的任务像minification和grunt插件来使用。只要一个插件被作为一个依赖指定在项目的package.json文件中，并且已经通过npm install安装好，都可以在你的Gruntfile文件中使用下面这个简单的命令启用它(所依赖的任务)。

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

  注意: grunt --help命令可以列出所有可用的任务。

  自定义任务

  你可以通过定义一个default任务来配置Grunt，让它默认运行一个或者多个任务。在下面的例子中，在命令行中运行grunt而不指定特定的任务将自动运行uglify任务。这个功能与显示的运行grunt uglify或者等价的grunt default一样。你可以在任务参数数组中指定任意数量的任务(这些任务可以带参数，也可以不带参数)。

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

  如果你的项目所需的任务没有对应的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文件中，然后通过<a rel="nofollow" href="http://gruntjs.com/grunt#grunt.loadtasks" "="" style="box-sizing: border-box; background-color: transparent; color: rgb(45, 133, 202); text-decoration-line: none;">grunt.loadTasks方法来加载。

  扩展阅读

  • 安装Grunt指南中有关于安装特定版本的，发布的或者开发中版本的Grunt和Grunt-cli的详细信息。

  • 配置任务指南中有对于如何在Gruntfile中配置任务，目标，选项和文件的详细解释，还有模板，匹配模式和导入外部数据相关的说明。

  • 创建任务指南列出了Grunt任务类型之间的不同，还展示了许多实例任务和配置。

  • 对于关于编写自定义任务或者Grunt插件的更多信息，请参考开发者文档。

  Grunt 0.3说明

  如果你从Grunt 0.3升级而来的，请确保先卸载全局的grunt(使用下面的命令)：

  npm uninstall -g grunt

  上面这些说明文档是针对Grunt 0.4.x编写的，但仍然适用于Grunt 0.3.x。只是注意0.3.x版本中的插件名称和任务配置选项可能与上面的"Gruntfile"中所展示的不同。

  对于0.3.x版本的Grunt, Grunfile名为grunt.js。