Grunt - 入门( Getting started)
要使用Grunt，您需要安装Node.js. Node.js的安装已在chapter解释过。 您可以使用Node.js包管理器安装Grunt和Grunt插件。
在系统上设置Grunt之前，您可以使用以下命令更新Node包管理器 -
npm update -g npm
如果您使用的是Mac或Linux，则需要在命令行的开头使用sudo word来授予管理员访问权限，如下所示 -
sudo npm update -g npm
CLI安装
CLI代表命令行界面，它运行已安装的Grunt版本。 要开始使用Grunt，您需要全局安装Grunt的命令行界面（CLI），如下所示 -
npm install -g 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": "iowiki",
"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
这里，
例如，以下命令将安装最新版本的Grunt并将其添加到您的devDependencies -
npm install grunt --save-dev
Gruntfile (Gruntfile)
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.name调用版本。
加载Grunt插件和任务
使用grunt.loadNpmTasks方法从指定的插件加载任务。 您可以使用npm在本地安装插件，它必须相对于Gruntfile。 您可以使用一个简单的命令加载插件，如下所示 -
grunt.task.loadNpmTasks(pluginName)
自定义任务
当您通过命令行运行Grunt时，Grunt将查找default任务。 在上面的代码中，我们使用了一个名为uglify的任务，它可以使用grunt命令运行。 这与显式运行grunt uglify命令相同，您可以指定数组中的任务数。
grunt.registerTask('default', ['uglify']);
