Grunt 安装
这份文档详细解释了如何安装指定版本的 Grunt 和 Grunt 插件。
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.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 任务。