原文: Getting started
安装 CLI
|
|
可以在任何路径运行 grunt
命令
通过 Gruntfile
文件运行某一版本 grunt ,允许多版本共存
CLI 如何工作
每次运行 grunt ,它会使用 node 的 require()
查找本地安装的 grunt 。基于此原因,你可以在项目的任何子目录运行它。
找到了本地安装的 Grunt ,CLI 加载本地安装的 Grunt 库,应用 Gruntfile
里的配置,执行预期的任务。
想理解真正奥秘,可以读源码,它非常短。
运行已存在的 Grunt 项目
假设 Grunt CLI 已安装,项目已通过 package.json
和 Gruntfile
配置好,使用 Grunt 非常简单:
- 切换到项目的根目录
- 通过
npm install
安装项目依赖 - 通过
grunt
命令运行 Grunt
grunt --help
可以罗列已安装的 Grunt 任务列表,但是最好从项目文档开始。
准备新的 Grunt 项目
典型安装是往项目中添加2个文件:package.json
和 Gruntfile
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
不仅会本地安装 <module>,而且自动把它们添加到 devDependencies 部分。
例如,下面将往项目目录安装最新版的 Grunt ,并把它添加到 devDependencies :
npm install grunt –save-dev
gruntplugins 同理。确保把更新后的 package.json 提交到项目里。
Gruntfile
Gruntfile.js 或 Gruntfile.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 代码必须放到特定的函数里面:
|
|
项目和任务配置
大部分的 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 。多个任务(带或不带参数)需要放到数组里。
// 默认任务
|
|
如果 Grunt 插件无法满足要求,你可以在 Gruntfile 定义自己的任务。例如,这个 Gruntfile 定义了自己的 default 任务,甚至没有利用任务配置:
https://gist.github.com/jinlong/8083660
定制的项目专属任务不需要定义到 Gruntfile 中;可以在外部 .js 文件定义,通过 grunt.loadTasks 方法加载。