您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

Grunt 安装

这份文档详细解释了如何安装指定版本的 Grunt 和 Grunt 。

Grunt 和 Grunt 应当在项目的中的小节中定义。这样就可以通过命令将当前项目依赖的模块安装完毕:npm install。当前 Grunt 的稳定和开发版本都会在中列出。

安装指定版本的Grunt

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

注意,当你在npm install命令后面了--save-dev 之后,package.json中出现的将是 。一般情况下这样做很不错,当指定版本发布补丁更新后,新版本将被,并且按照定义的语义版本格式。

安装已经公布的开发版

随着新被开发出来,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 的版本并没有公布,按照下面的步骤来指定 并且确保指定了具体的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",
    "": "~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  --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.initCon({
    jshint: { /* jshint的参数 */ },
    concat: { /* concat的参数 */ },
    uglify: { /* uglify的参数 */ },
    watch:  { /* watch的参数 */ }
  });

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

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

};

上面的用到了 grunt 的三个:

grunt.initCon:定义各种模块的参数,每成员项对应同名模块。

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 任务。


联系我
置顶