grunt起步

Grunt 入门

要使用Grunt，您需要安装Node.js。前一章已经介绍了Node.js的安装。您可以使用Node.js包管理器安装Grunt和Grunt插件。

在系统上设置Grunt之前，您可以使用以下命令更新节点包管理器

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

你可以用下面列出的不同方式创建package.json。

你可以用grunt-init来创建package.json文件。
您也可以使用npm-init命令创建package.json文件。

您可以编写如下所示的规范

{
   "name": "codingdict",
   "version": "0.1.0",
   "devDependencies": {
      "grunt-contrib-jshint": "~0.10.0",
      "grunt-contrib-nodeunit": "~0.4.1",
      "grunt-contrib-uglify": "~0.5.0"
   }
}

您可以使用以下命令将Grunt和grunt插件添加到现有的package.json文件中

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的任务，它可以使用gruntcommand来运行。这与显式运行grunt uglify命令相同，您可以指定数组中的任务数。

grunt.registerTask('default', ['uglify']);