Grunt入门

快速入门

Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。
Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用。;奇数版本号的 Node.js 被认为是不稳定的开发版。在安装 Grunt 前,请确保当前环境中所安装的 npm 已经是最新版本,执行 npm update -g npm 指令进行升级(在某些系统中可能需要 sudo 指令)。
如果你已经安装了 Grunt,现在需要参考一些文档手册,那就请看一看 Gruntfile 实例 和如何 配置任务吧。

安装 CLI

还在使用 Grunt 0.3 版本吗?请查看 Grunt 0.3 注意事项
在继续学习前,你需要先将Grunt命令行(CLI)安装到全局环境中。安装时可能需要使用sudo(针对OSX、*nix、BSD等系统中)权限或者作为管理员(对于Windows环境)来执行以下命令。

npm install -g grunt-cli

上述命令执行完后,grunt 命令就被加入到你的系统路径中了,以后就可以在任何目录下执行此命令了。
注意,安装grunt-cli并不等于安装了 Grunt!Grunt CLI的任务很简单:调用与Gruntfile在同一目录中 Grunt。这样带来的好处是,允许你在同一个系统上同时安装多个版本的 Grunt。
这样就能让多个版本的 Grunt 同时安装在同一台机器上。

CLI 是如何工作的

每次运行grunt 时,他就利用node提供的require()系统查找本地安装的 Grunt。正是由于这一机制,你可以在项目的任意子目录中运行grunt 。
如果找到一份本地安装的 Grunt,CLI就将其加载,并传递Gruntfile中的配置信息,然后执行你所指定的任务。为了更好的理解 Grunt CLI的执行原理,请阅读源码

拿一份现有的 Grunt 项目练手

假定Grunt CLI已经正确安装,并且已经有一份配置好package.json 和 Gruntfile 文件的项目了,接下来就很容易拿Grunt练手了:

  1. 将命令行的当前目录转到项目的根目录下。
  2. 执行npm install命令安装项目依赖的库。
  3. 执行 grunt 命令。

OK,就是这么简单。还可以通过grunt --help
命令列出所有已安装的Grunt任务(task),但是一般更建议去查看项目的文档以获取帮助信息。

准备一份新的 Grunt 项目

一般需要在你的项目中添加两份文件:package.json 和 Gruntfile。

  • package.json: 此文件被npm用于存储项目的元数据,以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件,放置于devDependencies配置段内。
  • Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee,用来配置或定义任务(task)并加载Grunt插件的。此文档中提到的 Gruntfile 其实说的是一个文件,文件名是 Gruntfile.js 或Gruntfile.coffee

package.json

package.json应当放置于项目的根目录中,与Gruntfile在同一目录中,并且应该与项目的源代码一起被提交。在上述目录(package.json所在目录)中运行npm install将依据package.json文件中所列出的每个依赖来自动安装适当版本的依赖。
下面列出了几种为你的项目创建package.json文件的方式:

  • 大部分 grunt-init 模版都会自动创建特定于项目的package.json文件。
  • npm init命令会创建一个基本的package.json文件。
  • 复制下面的案例,并根据需要做扩充,参考此说明.
{
 "name": "my-project-name",
 "version": "0.1.0", 
 "devDependencies": {
   "grunt": "~0.4.5",
   "grunt-contrib-jshint": "~0.10.0",
   "grunt-contrib-nodeunit": "~0.4.1",
   "grunt-contrib-uglify": "~0.5.0" 
  }
}

安装Grunt 和 grunt插件

向已经存在的package.json 文件中添加Grunt和grunt插件的最简单方式是通过npm install <module> --save-dev
命令。此命令不光安装了<module>,还会自动将其添加到devDependencies 配置段中,遵循tilde version range格式。
例如,下面这条命令将安装Grunt最新版本到项目目录中,并将其添加到devDependencies内:

npm install grunt --save-dev

同样,grunt插件和其它node模块都可以按相同的方式安装。下面展示的实例就是安装 JSHint 任务模块:

npm install grunt-contrib-jshint --save-dev

Grunt 插件 页面可以看到当前可用的 Grunt 插件,他们可以直接在项目中安装并使用。
安装插件之后,请务必确保将更新之后的 package.json 文件提交到项目仓库中。

Gruntfile

Gruntfile.js 或 Gruntfile.coffee 文件是有效的 JavaScript 或 CoffeeScript 文件,应当放在你的项目根目录中,和package.json文件在同一目录层级,并和项目源码一起加入源码管理器。
Gruntfile由以下几部分构成:

  • "wrapper" 函数
  • 项目与任务配置
  • 加载grunt插件和任务
  • 自定义任务

Gruntfile文件案例

在下面列出的这个 Gruntfile 中,package.json文件中的项目元数据(metadata)被导入到 Grunt 配置中, grunt-contrib-uglify 插件中的uglify 任务(task)被配置为压缩(minify)源码文件并依据上述元数据动态生成一个文件头注释。当在命令行中执行 grunt 命令时,uglify 任务将被默认执行。

module.exports = function(grunt) { 
  // Project configuration. 
  grunt.initConfig({ 
     pkg: grunt.file.readJSON('package.json'), 
     uglify: { 
        options: { 
           banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, 
           build: { 
               src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' 
           } 
        } 
   }); 
   // 加载包含 "uglify" 任务的插件。 
   grunt.loadNpmTasks('grunt-contrib-uglify');
   // 默认被执行的任务列表。   
   grunt.registerTask('default', ['uglify']);
};

前面已经向你展示了整个 Gruntfile,接下来将详细解释其中的每一部分。

"wrapper" 函数

每一份 Gruntfile (和grunt插件)都遵循同样的格式,你所书写的Grunt代码必须放在此函数内:

module.exports = function(grunt) { 
   // Do grunt-related things in here
};

项目和任务配置

大部分的Grunt任务都依赖某些配置数据,这些数据被定义在一个object内,并传递给grunt.initConfig 方法。
在下面的案例中,grunt.file.readJSON('package.json') 将存储在package.json文件中的JSON元数据引入到grunt config中。 由于<% %>模板字符串可以引用任意的配置属性,因此可以通过这种方式来指定诸如文件路径和文件列表类型的配置数据,从而减少一些重复的工作。
你可以在这个配置对象中(传递给initConfig()方法的对象)存储任意的数据,只要它不与你任务配置所需的属性冲突,否则会被忽略。此外,由于这本身就是JavaScript,你不仅限于使用JSON;你可以在这里使用任意的有效的JS代码。如果有必要,你甚至可以以编程的方式生成配置。
与大多数task一样,grunt-contrib-uglify 插件中的uglify 任务要求它的配置被指定在一个同名属性中。在这里有一个例子, 我们指定了一个banner选项(用于在文件顶部生成一个注释),紧接着是一个单一的名为build的uglify目标,用于将一个js文件压缩为一个目标文件。

// Project configuration.
grunt.initConfig({ 
  pkg: grunt.file.readJSON('package.json'), 
  uglify: { 
    options: { 
      banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, 
      build: { 
         src: 'src/<%= pkg.name %>.js', 
         dest: 'build/<%= pkg.name %>.min.js' 
     } 
  }
});

加载 Grunt 插件和任务

concatenation、[minification]、grunt-contrib-uglifylinting这些常用的任务(task)都已经以grunt插件的形式被开发出来了。只要在 package.json 文件中被列为dependency(依赖)的包,并通过npm install安装之后,都可以在Gruntfile中以简单命令的形式使用:

// 加载能够提供"uglify"任务的插件。
grunt.loadNpmTasks('grunt-contrib-uglify');

注意: grunt --help 命令将列出所有可用的任务。

自定义任务

通过定义 default任务,可以让Grunt默认执行一个或多个任务。在下面的这个案例中,执行 grunt 命令时如果不指定一个任务的话,将会执行uglify任务。这和执行grunt uglify 或者 grunt default
的效果一样。default任务列表数组中可以指定任意数目的任务(可以带参数)。

// Default task(s).
grunt.registerTask('default', ['uglify']);

如果Grunt插件中的任务(task)不能满足你的项目需求,你还可以在Gruntfile
中自定义任务(task)。例如,在下面的 Gruntfile
中自定义了一个default
任务,并且他甚至不依赖任务配置:

module.exports = function(grunt) { 
// A very basic default task. 
  grunt.registerTask('default', 'Log some stuff.',   function() { 
    grunt.log.write('Logging some stuff...').ok(); 
  });
};

特定于项目的任务不必在 Gruntfile 中定义。他们可以定义在外部.js 文件中,并通过grunt.loadTasks方法加载。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 226,074评论 6 523
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 97,181评论 3 410
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 173,579评论 0 370
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 61,741评论 1 304
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 70,675评论 6 404
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 54,144评论 1 316
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 42,344评论 3 433
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 41,429评论 0 282
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 47,984评论 1 328
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 39,960评论 3 351
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 42,057评论 1 359
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 37,658评论 5 352
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 43,349评论 3 342
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 33,757评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 34,943评论 1 278
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 50,670评论 3 384
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 47,116评论 2 368

推荐阅读更多精彩内容

  • 这里为了节省时间,这里先创建一个angular 项目cd /Users/yuyi/Documents/workS...
    Misaki_yuyi阅读 200评论 0 0
  • 快速入门 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。 在安...
    angelwgh阅读 1,122评论 0 0
  • “猫头鹰”葛晨,各位青岛的听友们,你们还记得这个人吗? 葛晨十几年前曾经是青岛广播电台的一个主持人。 那时静空我最...
    那时静空阅读 1,900评论 1 1
  • 本人程。在2017年5月中旬左右开了一个叫做合啪云(后查询该公司名为滁州合啪网络科技有限公司)的微盘交易。入了20...
    志愿_3252阅读 513评论 0 0
  • 任课老师或者孩子的班主任来“家访”这种形式,在我们小时候上学的时候,似乎很通行,在我的印象里,还有好几次很清晰的记...
    茧破阅读 753评论 0 3