Categories
Grunt教程

Grunt-入门

Grunt-入门


要使用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安装

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
</module>

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

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

npm install grunt --save-dev

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.version打电话给你的项目名称。

加载Grunt插件和任务

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

grunt.task.loadNpmTasks(pluginName)

自定义任务

通过命令行运行Grunt时,Grunt将查找默认任务。在上面的代码中,我们使用了一个名为uglify的任务,该任务可以使用grunt命令运行。这与显式运行grunt uglify命令相同,您可以指定阵列中的任务数。

grunt.registerTask('default', ['uglify']);
error: 内容受到保护 !!