Grunt 安装

发布时间：2023-05-11 13:57:05 所属栏目：教程来源：

导读：Grunt 和 Grunt 插件应当在项目的package.json文件中的devDependencies小节中定义。这样就可以通过一个命令将当前项目依赖的模块安装完毕：npm install。当前 Grunt 的稳定和开发版本都会在项目的wiki页面中列出。

Grunt 和 Grunt 插件应当在项目的package.json文件中的devDependencies小节中定义。这样就可以通过一个命令将当前项目依赖的模块安装完毕：npm install。当前 Grunt 的稳定和开发版本都会在项目的wiki页面中列出。

安装指定版本的Grunt
如果你需要某个特定版本的 Grunt 或 Grunt 插件，执行npm install grunt@VERSION --save-dev 命令，其中VERSION代表你所需要的版本。这样就安装完成了，然后将其添加到package.json文件中的devDependencies小节中。

注意，当你在npm install命令后面添加了--save-dev 标记之后，package.json文件中出现的将是波浪线标记的版本范围。一般情况下这样做很不错，当指定版本发布补丁更新后，新版本将被自动升级，并且按照semver定义的语义版本格式。

安装已经公布的开发版
随着新功能被开发出来，Grunt 会被定期的发布到npm上。如果不指定版本号，这种构建的版本是根本不会被安装的，通常它们都会被指定构建码或 alpha/beta/release。

就像安装指定版本的 Grunt 一样，执行npm install grunt@VERSION --save-dev命令，其中VERSION 是你指定的版本，npm将在项目目录中安装此版本的grunt，并将其添加到package.json文件中的devDependencies小节。

注意，不管你指定的是什么版本，都将按照[波浪线标记的版本范围]将其添加到package.json文件中。这个危害很大，当指定的开发版出现新版本，尤其是不兼容的patch版本时，也会被npm安装，这就有可能扰乱你的项目，使其无法编译。

一旦出现这种情况，最重要的是要手工编辑 package.json文件，将 ~ (tilde)从版本号中去除掉。这样就能锁定到你所指定的某个具体的开发版本了。

这个技巧同样可以用于安装已经发布的 Grunt 插件的开发版本。

从github上直接安装
如果你需要安装最最最新的版本，而且这个 Grunt 或 Grunt 插件的版本并没有公布，按照下面的步骤来指定git URL 作为依赖并且确保指定了具体的commit SHA (not a branch name) as the commit-ish。这将确保你的项目永远使用这个精确版本的grunt。

这个指定的git URL可以是官方的 Grunt 仓库，也可以是一个fork版本。

Grunt 安装步骤
Grunt 基于 Node.js，安装之前要先安装 Node.js，然后运行下面的命令。

sudo npm install grunt-cli -g
grunt-cli 表示安装的是 grunt 的命令行界面，参数g表示全局安装。

Grunt使用模块结构，除了安装命令行界面以外，还要根据需要安装相应的模块。这些模块应该采用局部安装，因为不同项目可能需要同一个模块的不同版本。

首先，在项目的根目录下，创建一个文本文件package.json，指定当前项目所需的模块。下面就是一个例子。

{
"name": "my-project-name",
"version": "0.1.0",
"author": "Your Name",
"devDependencies": {
"grunt": "0.x.x",
"grunt-contrib-jshint": "*",
"grunt-contrib-concat": "~0.1.1",
"grunt-contrib-uglify": "~0.1.0",
"grunt-contrib-watch": "~0.1.4"
}
}
上面这个 package.json 文件中，除了注明项目的名称和版本以外，还在 devDependencies 属性中指定了项目依赖的grunt模块和版本：grunt 核心模块为最新的0.x.x版，jshint 插件为最新版本，concat 插件不低于0.1.1版，uglify 插件不低于0.1.0版，watch 插件不低于0.1.4版。

然后，在项目的根目录下运行下面的命令，这些插件就会被自动安装在 node_modules 子目录。

npm install
上面这种方法是针对已有 package.json 的情况。如果想要自动生成package.json文件，可以使用 npm init 命令，按照屏幕提示回答所需模块的名称和版本即可。

npm init
如果已有的package.json文件不包括 Grunt 模块，可以在直接安装Grunt模块的时候，加上–save-dev参数，该模块就会自动被加入 package.json 文件。

npm install <module> --save-dev
比如，对应上面 package.json 文件指定的模块，需要运行以下 npm 命令。

npm install grunt --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-watch --save-dev
命令脚本文件 Gruntfile.js
模块安装完以后，下一步在项目的根目录下，新建脚本文件 Gruntfile.js。它是 grunt 的配置文件，就好像 package.json 是 npm 的配置文件一样。Gruntfile.js 就是一般的 Node.js 模块的写法。

module.exports = function(grunt) {

// 配置Grunt各种模块的参数
grunt.initConfig({
jshint: { /* jshint的参数 */ },
concat: { /* concat的参数 */ },
uglify: { /* uglify的参数 */ },
watch: { /* watch的参数 */ }
});

// 从node_modules目录加载模块文件
grunt.loadNpmtasks('grunt-contrib-jshint');
grunt.loadNpmtasks('grunt-contrib-concat');
grunt.loadNpmtasks('grunt-contrib-uglify');
grunt.loadNpmtasks('grunt-contrib-watch');

// 每行registerTask定义一个任务
grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
grunt.registerTask('check', ['jshint']);

};
上面的代码用到了 grunt 代码的三个方法：

grunt.initConfig：定义各种模块的参数，每一个成员项对应一个同名模块。

grunt.loadNpmtasks：加载完成任务所需的模块。

grunt.registerTask：定义具体的任务。第一个参数为任务名，第二个参数是一个数组，表示该任务需要依次使用的模块。default任务名表示，如果直接输入grunt命令，后面不跟任何参数，这时所调用的模块（该例为jshint，concat和uglify）；该例的check任务则表示使用jshint插件对代码进行语法检查。

上面的代码一共加载了四个模块：jshint（检查语法错误）、concat（合并文件）、uglify（压缩代码）和watch（自动执行）。接下来，有两种使用方法。

（1）命令行执行某个模块，比如

grunt jshint
上面代码表示运行jshint模块。

（2）命令行执行某个任务。比如

grunt check
上面代码表示运行 check 任务。如果运行成功，就会显示“Done, without errors.”。

如果没有给出任务名，只键入 grunt ，就表示执行默认的 default 任务。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!