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

CLI使用<在系统中查找已安装的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文件.

  • 您还可以使用创建package.json文件npm-init 命令.

您可以编写如下所示的规格 :

{
   "name": "it1352",
   "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文件中/p>

npm install< module> --save-dev

此处,< 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']);