📅  最后修改于: 2020-10-25 05:38:45             🧑  作者: Mango
要使用Grunt,您需要安装Node.js。上一章已经说明了Node.js的安装。您可以使用Node.js软件包管理器安装Grunt和Grunt插件。
在系统上设置Grunt之前,可以使用以下命令更新Node软件包管理器-
npm update -g npm
如果您使用的是Mac或Linux,则需要在命令行开头使用sudo word授予管理员访问权限,如下所示-
sudo npm update -g npm
CLI代表命令行界面,它运行已安装的Grunt版本。要开始使用Grunt,您需要全局安装Grunt的命令行界面(CLI),如下所示-
npm install -g grunt-cli
运行上面的命令会将grunt命令放在您的系统路径中,从而使其可以从任何目录运行。您无法通过安装grunt-cli来安装Grunt任务运行程序。它允许一台机器同时安装多个版本的Grunt。
每当运行Grunt时,CLI都会使用require()系统在系统上查找已安装的Grunt。使用grunt-cli ,您可以从项目中的任何目录运行Grunt。如果使用的是本地安装的Grunt,则grunt-cli使用本地安装的Grunt库并应用Grunt文件中的配置。
如果您正在使用包含package.json和Gruntfile的已配置项目,请按照下面指定的简单步骤操作:
如果要创建一个新项目,则将两个文件package.json和Gruntfile包含到您的项目中。
package.json -package.json文件位于项目的根目录中,每当您在同一文件夹中运行命令npm install时,它将用于运行列出的每个依赖项。
Gruntfile.js -Gruntfile.js文件用于编写项目的配置设置。
package.json文件放置在项目的根目录中,在Gruntfile旁边,每当您在同一文件夹中运行命令npm install时,都会使用该文件运行列出的每个依赖项。
您可以按照以下列出的不同方式创建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 --save-dev
在此,
例如,以下命令将安装最新版本的Grunt并将其添加到您的devDependencies-
npm install grunt --save-dev
Gruntfile.js文件是您的配置设置用于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.loadNpmTasks方法从指定的插件加载任务。您可以使用npm在本地安装插件,并且该插件必须相对于Gruntfile。您可以使用如下所示的简单命令加载插件:
grunt.task.loadNpmTasks(pluginName)
通过命令行运行Grunt时,Grunt将查找默认任务。在上面的代码中,我们使用了一个名为uglify的任务,该任务可以使用grunt命令运行。这与显式运行grunt uglify命令相同,您可以指定阵列中的任务数。
grunt.registerTask('default', ['uglify']);