Grunt 入门
要使用 Grunt,您需要安装 Node.js。 Node.js 的安装已经在前面的章节中进行了说明。您可以使用 Node.js 包管理器安装 Grunt 和 Grunt 插件。
在系统上设置 Grunt 之前,您可以使用以下命令更新 Node 包管理器-
如果您使用的是 Mac 或 Linux,则需要在命令行开头使用
sudo 字样来授予管理员访问权限,如下所示-
CLI 安装
CLI 代表运行已安装的 Grunt 版本的命令行界面。要开始使用 Grunt,您需要全局安装 Grunt 的命令行界面 (CLI),如下所示-
运行上述命令会将 grunt 命令放在您的系统路径中,这使得它可以从任何目录运行。您不能通过安装
grunt-cli 来安装 Grunt 任务运行器。它允许一台机器同时安装多个版本的 Grunt。
CLI 的工作
只要运行 Grunt,CLI 就会使用
require() 系统在您的系统上查找已安装的 Grunt。使用
grunt-cli,您可以从项目中的任何目录运行 Grunt。如果您使用本地安装的 Grunt,则 grunt-cli 使用本地安装的 Grunt 库并应用 Grunt 文件中的配置。
处理现有项目和新项目
如果您正在使用包含
package.json 和
Gruntfile 的已配置项目,请按照下面指定的简单步骤操作-
找到项目根目录的路径。
您可以使用 npm install 命令安装依赖项。
使用 grunt 命令运行 Grunt。
如果您要创建一个新项目,请将
package.json 和
Gruntfile 两个文件包含到您的项目中。
package.json-package.json 文件位于项目的根目录中,每当您运行命令 npm install 在同一个文件夹中。
Gruntfile.js-Gruntfile.js 文件用于编写项目的配置设置。
package.json
package.json 文件位于项目的根目录中,位于
Gruntfile 旁边,用于在运行命令
npm install 在同一文件夹中。
您可以按照下面列出的不同方式创建
package.json-
你可以grunt-init来创建package.json文件。
您还可以使用 npm-init 命令创建 package.json 文件。
您可以编写如下所示的规范-
{
"name": "tutorialspoint",
"version": "0.1.0",
"devDependencies": {
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0"
}
}
您可以使用以下命令将 Grunt 和 gruntplugins 添加到现有的 pacakge.json 文件中-
npm install <module>--save-dev
这里,
代表本地安装的模块。上面的命令将安装指定的模块并自动将其添加到
devDependencies 部分。
例如,以下命令将安装最新版本的
Grunt 并将其添加到您的
devDependencies-
npm install grunt--save-dev
咕噜文件
Gruntfile.js 文件是 Grunt 配置设置的默认位置。 Grunt 文件包括以下部分-
包装函数
项目和任务配置
加载 Grunt 插件和任务
自定义任务
基本的
Gruntfile.js 文件如下所示-
// our wrapper function (required by grunt and its plugins)
// all configuration goes inside this function
module.exports = function(grunt) {
// CONFIGURE GRUNT
grunt.initConfig({
// get the configuration info from package.json file
// this way we can use things like name and version (pkg.name)
pkg: grunt.file.readJSON('package.json'),
// all of our configuration goes here
});
// Load the plugin that provides the "uglify" task
grunt.loadNpmTasks('grunt-contrib-uglify');
// default task(s)
grunt.registerTask('default', ['uglify']);
};
包装函数
在上面的代码中,
module.exports 是一个包装函数,整个配置都在这个函数内部。这是一种向应用程序的其余部分显示配置的方式。
module.exports = function(grunt) {
//do grunt-related things here
}
项目和任务配置
一旦您的 Grunt 配置准备就绪,您就可以配置 Grunt 任务。项目配置可以写在
grunt.initConfig() 部分。在
grunt.initConfig() 函数中,从 package.json 文件中获取配置信息并将其保存到
pkg。您可以使用
pkg.name 调用您的项目名称,使用
pkg.version 调用版本。
加载 Grunt 插件和任务
使用
grunt.loadNpmTasks 方法从指定的插件加载任务。您可以使用
npm 在本地安装插件,并且它必须与 Gruntfile 相关。您可以使用如下所示的简单命令加载插件-
grunt.task.loadNpmTasks(pluginName)
自定义任务
当您通过命令行运行 Grunt 时,Grunt 将查找
默认 任务。在上面的代码中,我们使用了一个名为
uglify 的任务,它可以使用
grunt 命令运行。这与显式运行
grunt uglify 命令相同,您可以指定数组中的任务数。
grunt.registerTask('default', ['uglify']);