Grunt 入门笔记

原文: Getting started

安装 CLI

1
npm install -g grunt-cli

可以在任何路径运行 grunt 命令

通过 Gruntfile 文件运行某一版本 grunt ,允许多版本共存

CLI 如何工作

每次运行 grunt ,它会使用 node 的 require() 查找本地安装的 grunt 。基于此原因,你可以在项目的任何子目录运行它。

找到了本地安装的 Grunt ,CLI 加载本地安装的 Grunt 库,应用 Gruntfile 里的配置,执行预期的任务。

想理解真正奥秘,可以读源码,它非常短。

运行已存在的 Grunt 项目

假设 Grunt CLI 已安装,项目已通过 package.jsonGruntfile 配置好,使用 Grunt 非常简单:

  1. 切换到项目的根目录
  2. 通过 npm install 安装项目依赖
  3. 通过 grunt 命令运行 Grunt

grunt --help 可以罗列已安装的 Grunt 任务列表,但是最好从项目文档开始。

准备新的 Grunt 项目

典型安装是往项目中添加2个文件:package.jsonGruntfile

package.json:存储作为 npm 发布模块的项目的元数据。你可以在 devDependencies 一项列举项目的需要的 Grunt 插件。

Gruntfile:文件名是 Gruntfile.js 或者 Gruntfile.coffee ,用于配置或定义任务和加载 Grunt 插件。

package.json

package.json 应该在项目的根目录,跟 Gruntfile 同目录,应该把它提交到项目源码中。在 package.json 同一文件夹中运行 npm install,将安装里面列举的每个依赖的正确版本。

有几种创建 package.json 的方式:

1.大部分 grunt-init 模版会自动创建项目专属的 package.json 文件

安装

npm install -g grunt-init

安装模版

git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile

使用

grunt-init gruntfile

2.npm init 命令将创建基本的 package.json 文件。

3.从以下例子开始,扩展需要的内容,遵循这个规范

例子地址:https://gist.github.com/jinlong/8083660

安装 Grunt 和 gruntplugins

往已存在的 package.json 中添加 Grunt 和 gruntplugins 最简单的方式是通过命令:

npm install –save-dev

不仅会本地安装 <module>,而且自动把它们添加到 devDependencies 部分。

例如,下面将往项目目录安装最新版的 Grunt ,并把它添加到 devDependencies :

npm install grunt –save-dev

gruntplugins 同理。确保把更新后的 package.json 提交到项目里。

Gruntfile

Gruntfile.jsGruntfile.coffee 是有效的 JavaScript 或者 CoffeeScript 文件,放在项目的根目录,跟 package.json 同目录,需要提交到项目源码中。

Gruntfile 由下面几部分组成:

  • “wrapper 包装”函数
  • 项目和任务配置
  • 加载 Grunt 插件和任务
  • 自定义任务

Gruntfile 例子

以下的 Gruntfile 中,项目元数据从项目的 package.json 文件导入到 Grunt 配置,grunt-contrib-uglify 插件的 uglify 任务会最小化源文件,并利用元数据动态生成注释。当在命令行运行 grunt 时,uglify 任务默认启动。

例子地址:https://gist.github.com/jinlong/8083660

既然已经见到了整个 Gruntfile ,下面继续看看它的组成部分。

“ wrapper 包装”函数

所有的 Gruntfile (和 gruntplugin)使用这种基本格式,所有的 Grunt 代码必须放到特定的函数里面:

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

项目和任务配置

大部分的 Grunt 任务依赖于 grunt.initConfig 方法定义的配置数据。此例中,grunt.file.readJSON(‘package.json’) 把 package.json 中存储的 JSON 元数据导入到 grunt 配置中。因为 <% %> 模版字符串可能引用任何配置属性,像文件路径,文件列表之类的配置数据如此定义,为了避免重复代码。

配置对象可以存储任意的数据,只要不跟任务需要的属性冲突即可,否则将被忽略。此外,由于这是 JavaScript 文件,所以不仅限于 JSON ;可以用合法的 JS 。grunt-contrib-uglify 的 uglify 任务需要指定 uglify 属性。banner 选项需要指定注释内容,build 属性定义最小化的源文件和目标文件。

加载 Grunt 插件和任务

合并多个文件最小化文件 ,和验证 JS 文件 都有了 grunt 插件 。只要在 package.json 里面定义插件,通过 npm install 即可安装,通过简单的命令即可在 Gruntfile 里面启用它:

// 加载提供 “uglify” 任务的插件
grunt.loadNpmTasks(‘grunt-contrib-uglify’);

注意:grunt –help 命令会列出所有可用任务。

自定义任务

你可以配置 Grunt 默认执行一个或多个任务。以下例子,命令行运行 grunt,默认会执行 uglify 任务,等同于执行 grunt uglify 或者 grunt default 。多个任务(带或不带参数)需要放到数组里。

// 默认任务

1
grunt.registerTask('default', ['uglify']);

如果 Grunt 插件无法满足要求,你可以在 Gruntfile 定义自己的任务。例如,这个 Gruntfile 定义了自己的 default 任务,甚至没有利用任务配置:

https://gist.github.com/jinlong/8083660

定制的项目专属任务不需要定义到 Gruntfile 中;可以在外部 .js 文件定义,通过 grunt.loadTasks 方法加载。