grunt 上手

来源：互联网发布：php众筹源码编辑：程序博客网时间：2024/05/23 00:09

开始上手

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

Grunt 0.4.x 版本需要Node.js 版本号不低于0.8.0。

一.安装CLI

为了顺利开始，你将需要全局安装Grunt命令行界面CLI。你可能需要使用sudo（for OSX, *nix, BSD etc）或者作为一个管理员运行你的命令行。

npm install -g grunt-cli

这样呢，就可以把grunt命令放到系统路径，允许你在任何目录运行。

注意，安装grunt-cli 并不是安装了grunt 任务运行器。 grunt CLI的职责很简单：运行grunt版本（which has been installed next to a Gruntfile，这句修饰“版本”怎么翻译？）。它允许多种版本的grunt同时安装在同一台机器上。

二.CLI是如何工作的

每一次运行grunt，它都会寻找本地的grunt(using node's require() system)安装。正因如此，你才可以在你的项目任何子文件夹里运行grunt。

如果本地的grunt安装找到了，CLI加载来自grunt库的本地安装，依照Gruntfile进行配置，并执行你已经请求的任务。

想明白到底是怎么执行的，read the code ，很短的哦。

三.基于现有的grunt 项目工作

假如你已经安装了Grunt CLI，并且对项目配置了package.json 和 Gruntfile.js，那么接下来就很容易来使用Grunt工作啦：

切换到项目根目录
使用 npm install 安装项目依赖
运行 grunt 命令

四.准备一个新的grunt 项目

通常需要添加这两个文件到你的工程：package.json 和 Gruntfile.js

package.json:作为npm的模块，这个文件是npm用来为发布的项目来保存 metadata的。你可以在这个文件的devDependencies 中配置项目需要的grunt和grunt插件。

Gruntfile: 通常被命名为Gruntfile.js 或者 Gruntfile.coffee，用来配置或者定义任务，加载Grunt 插件。

五.package.json

package.json文件需要放置在你的项目根目录，它与Gruntfile文件位置一样，会随项目资源一起提交。运行 npm install 命令将会安装其配置的所有依赖版本。

这里有几种方式用来为你的项目创建 package.json 文件:

大多数的 grunt-init 模板将会自动创建一个项目指定的 package.json文件
npm init 命令将会创建一个基本的 package.json文件

创建类似如下的package.json文件：

{  "name": "my-project-name",  "version": "0.1.0",  "devDependencies": {    "grunt": "~0.4.1",    "grunt-contrib-jshint": "~0.6.0",    "grunt-contrib-nodeunit": "~0.2.0",    "grunt-contrib-uglify": "~0.2.2"  }}

六.安装grunt和grunt插件

如果已经有了package.json文件，那么运行 npm install <module> --save-dev 命令。

这个命令不仅仅是安装了 <module> ，也会自动将 tilde version range 添加到 devDependencies 。

比如，下面的这个例子将会安装最近的Grunt到你的项目文件里，同时也会添加到devDependencies:

npm install grunt --save-dev

对于grunt 插件和其它的node 模块也是如此。请确保你完成这些后，将更新的package.json随同你的项目一起提交。

七.Gruntfile

同package.json一样，置于项目根目录，是个Gruntfile.js或者Gruntfile.coffee文件，随同项目一起提交。

一个Gruntfile应当包含如下几部分：

包装器函数
项目和任务配置
加载 grunt 插件和任务
定义任务

Gruntfile示例：

如下的Gruntfile中，项目metadata从package.json中被导入到了grunt 配置里。grunt-contrib-uglify 插件的 uglify 任务被配置用来压缩源文件，并通过metadata信息动态生成banner comment。当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'      }    }  });  // Load the plugin that provides the "uglify" task.  grunt.loadNpmTasks('grunt-contrib-uglify');  // Default task(s).  grunt.registerTask('default', ['uglify']);};

现在，让我们看看Gruntfile的组成部分吧。

包装器函数：

任何的Gruntfile(包括grunt插件)都使用这个基本的格式，你所有的Grunt 代码必须在这个函数里面进行说明：

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

项目和任务配置

多数的Grunt 任务依赖配置数据都是通过grunt.initConfig 这个方法来定义的。

在这个示例中，grunt.file.readJSON('package.json')把存储在packag.json中的json metadata数据导入到了grunt配置中。因为 <% %> 模板字符串可能涉及任何配置属性，配置数据，比如文件路径，文件列表，通过此方式可以减少重复声明。

你或许可以存储任意的数据在这个配置对象里，你爱咋咋地吧。

和大多数的任务一样，grunt-contrib-uglify 插件的 uglify 任务期望它的配置被指定在同名属性中。此处，banner 选项和单一的uglify 目标build同时被指定(specified，翻译成啥好呢，说明？)，build是用来缩减源文件到指定的文件。

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

老外真他妈啰嗦，不就是类似下面这段执行命令么：

// Load the plugin that provides the "uglify" task.grunt.loadNpmTasks('grunt-contrib-uglify');

定制任务

你可以通过定义default任务，让Grunt运行更多的任务。如下的示例，运行 grunt 命令行将会运行 uglify 任务。它等同于 grunt ugligy 或者 grunt default 命令行。任务配置都可以放在这个指定的数组中。

// Default task(s).grunt.registerTask('default', ['uglify']);

如果你的任务需求Grunt 插件没有提供，你可以自己在Gruntfile中定义任务。例如，这个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 方法加载。

-------------------------------------------------

翻译自：http://gruntjs.com/getting-started

本以为没有人翻译，网上搜索的都是grunt的使用教程，五花八门不入流，想自己翻译完成。

却不料，搜索Gruntfile配置时搜索到了这两个个文档：

http://www.gruntjs.org/article/sample_gruntfile.html

http://darkfe.com/2013/04/05/grunt-configuring-tasks/

不翻译了，筒子们赶紧去看吧。