Grunt教程

Grunt 入门

要使用 Grunt,您需要安装 Node.js。 Node.js 的安装已经在前面的章节中进行了说明。您可以使用 Node.js 包管理器安装 Grunt 和 Grunt 插件。
在系统上设置 Grunt 之前,您可以使用以下命令更新 Node 包管理器-
npm update-g npm
如果您使用的是 Mac 或 Linux,则需要在命令行开头使用 sudo 字样来授予管理员访问权限,如下所示-
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.jsonGruntfile 的已配置项目,请按照下面指定的简单步骤操作-
找到项目根目录的路径。 您可以使用 npm install 命令安装依赖项。 使用 grunt 命令运行 Grunt。
如果您要创建一个新项目,请将 package.jsonGruntfile 两个文件包含到您的项目中。
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']);
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4