您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

Grunt 入门

Grunt和 Grunt 是通过  安装并管理的,npm是  的包管理器。

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

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

安装 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练手了:

将命令行的当前目录转到项目的根目录下。

执行npm install命令安装项目依赖的库。

执行 grunt 命令。

OK,就是这么简单。还可以通过grunt --help 命令列出所有已安装的Grunt任务(task),但是一般更建议去查看项目的文档以帮助信息。

准备一份新的 Grunt 项目

一般需要在你的项目中两份:package.json 和 Gruntfile。

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

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。

命令会创建基本的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",
    "": "~0.5.0"
  }
}

安装 Grunt 和 Grunt

向已经存在的package.json 中Grunt和grunt的最简单方式是通过npm install <module> --save-dev命令。此命令不光安装了<module>,还会将其到 配置段中,遵循格式。

例如,下面这条命令将安装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中的项目元数据(data)被导入到 Grunt 配置中,  中的uglify 任务(task)被配置为压缩(minify)源码并依据上述元数据动态头注释。当在命令行中执行 grunt 命令时,uglify 任务将被认执行。

module.exports = function(grunt) {

  // Project conuration.
  grunt.initCon({
    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.registerTask('default', ['uglify']);

};

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

"wrapper"

每一份 Gruntfile (和grunt)都遵循同样的格式,你所书写的Grunt必须放在此内:

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

项目和任务配置

大部分的Grunt任务都依赖某些配置数据,这些数据被定义在object内,并传递给grunt.initCon 。

在下面的案例中,grunt.file.readJSON('package.json') 将存储在package.json中的JSON元数据引入到grunt con中。 由于<% %>模板字符串可以引用任意的配置,因此可以通过这种方式来指定诸如路径和列表类型的配置数据,从而减少一些重复的工作。

你可以个配置对象中(传递给initCon()的对象)存储任意的数据,只要它不与你任务配置所需的冲突,否则会被忽略。此外,由于这本身就是JavaScript,你不仅限于使用JSON;你可以使用任意的有效的JS。如果有必要,你甚至可以以编程的方式配置。

与大多数task一样, 中的uglify 任务要求它的配置被指定在同名中。有例子, 我们指定了banner选项(用于在顶部注释),紧接着是单一的名为build的uglify目标,用于将js压缩为目标。

// Project conuration.
grunt.initCon({
  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]、 和 这些常用的任务(task)都已经以的形式被开发出来了。只要在 package.json 中被列为dependency(依赖)的包,并通过npm install安装之后,都可以在Gruntfile中以简单命令的形式使用:

// 加载能够提供"uglify"任务的。
grunt.loadNpmTasks('');

注意: 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加载。


联系我
置顶