HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

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.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

此处，<module> 表示要在本地安装的模块。上述命令将安装指定的模块并自动将其添加到 devDependencies 部分。

例如，以下命令将安装最新版本的 Grunt 并将其添加到您的 devDependencies −

npm install grunt --save-dev

Gruntfile

Gruntfile.js 文件是 Grunt 配置设置的默认位置。 Grunt 文件包含以下部分 −

  • 包装函数
  • 项目和任务配置
  • 加载 Grunt 插件和任务
  • 自定义任务

基本的 Gruntfile.js 文件如下所示 −

// 我们的包装函数(grunt 及其插件所需)
// 所有配置都位于此函数内
module.exports = function(grunt) {

    // 配置 GRUNT
    grunt.initConfig({
        // 从 package.json 文件获取配置信息
        // 这样我们就可以使用名称和版本 (pkg.name) 之类的内容
        pkg: grunt.file.readJSON('package.json'),
        
        // 我们所有的配置都在这里
    
    });
    
    // 加载提供"uglify"任务的插件
    grunt.loadNpmTasks('grunt-contrib-uglify');
    
    // 默认任务
    grunt.registerTask('default', ['uglify']);
};

包装函数

在上面的代码中，module.exports 是一个包装函数，整个配置都放在这个函数中。这是一种向应用程序其余部分显示配置的方式。

module.exports = function(grunt) {
    //在这里做与 grunt 相关的事情
}

项目和任务配置

一旦您的 Grunt 配置准备就绪，您就可以配置 Grunt 任务。项目配置可以在 grunt.initConfig() 部分中编写。在 grunt.initConfig() 函数中，从 package.json 文件中获取配置信息并将其保存到 pkg。您可以使用 pkg.name 调用您的项目名称，并使用 pkg.version 调用版本。

加载 Grunt 插件和任务

使用 grunt.loadNpmTasks 方法从指定插件加载任务。您可以使用 npm 在本地安装插件，并且它必须与 Gruntfile 相关。您可以使用如下所示的简单命令加载插件 −

grunt.task.loadNpmTasks(pluginName)

自定义任务

当您通过命令行运行 Grunt 时，Grunt 将查找 default 任务。在上面的代码中，我们使用了一个名为 uglify 的任务，可以使用 grunt 命令运行。这与明确运行 grunt uglify 命令相同，您可以指定数组中的任务数。

grunt.registerTask('default', ['uglify']);
❮ 上一节 下一节 ❯