grunt 上手

grunt 上手

开始上手

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工作啦：

1. 切换到项目根目录
2. 使用 npm install 安装项目依赖
3. 运行 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