grunt入门讲解1:grunt的基本概念和使用
Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。
Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用。老版本的 Node.js 被认为是不稳定的开发版。之前,在用grunt来合并文件时,老是报错,原因是node.js的版本太低了。
在安装grunt之前,你需要先将Grunt命令行(CLI)安装到全局环境中。
npm install -g grunt-cli
上述命令执行完后,grunt 命令就被加入到你的系统路径中了,以后就可以在任何目录下执行此命令了。
注意,安装了grunt-cli并不等于安装了 Grunt!
Grunt CLI的任务很简单:调用与Gruntfile文件在同一目录中的Grunt。这样带来的好处是,允许你在同一个系统上同时安装多个版本的 Grunt。这样就能让多个版本的 Grunt 同时安装在同一台机器上。
Grunt CLI的运行原理:每次运行grunt
时,Grunt CLI就利用node提供的require(),去
系统查找本地安装的 Grunt。正是由于这一机制,你可以在项目的任意子目录中运行grunt
。如果找到一份本地安装的 Grunt,CLI就将其加载,并传递Gruntfile
中的配置信息,然后执行你所指定的任务。
如何打造一个 Grunt 项目?
一般需要在你的项目中添加两份文件:package.json 和 Gruntfile。
package.json: 此文件被npm用于存储项目的元数据,以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件,放置于devDependencies配置段内。
Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee,用来配置或定义任务(task)并加载Grunt插件的。
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.1",
"grunt-contrib-jshint": "~0.6.0",
"grunt-contrib-nodeunit": "~0.2.0",
"grunt-contrib-uglify": "~0.2.2"
}
}
向已经存在的package.json 文件中,添加Grunt和grunt插件的最简单方式是通过npm install <module> --save-dev命令。此命令不光安装了<module>,还会自动将其添加到package.json 文件的devDependencies 配置段中。
例如,下面这条命令将安装Grunt最新版本到项目目录中,并将其添加到devDependencies内:
npm install grunt --save-dev
同样,grunt插件和其它node模块都可以按相同的方式安装。安装完成后一定要记得把被修改的package.json文件提交到源码管理器中。
Gruntfile.js 或 Gruntfile.coffee 文件是有效的 JavaScript 或 CoffeeScript 文件,应当放在你的项目根目录中,和package.json文件在同一目录层级,并和项目源码一起加入源码管理器。
Gruntfile由以下几部分构成:
(1)包装函数
(2)项目与任务配置
(3)加载grunt插件和任务
(4)自定义任务
举个例子:
module.exports = function(grunt) {
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 都遵循同样的格式,你所书写的Grunt代码必须放在此包装函数内:
module.exports = function(grunt) {
// Do grunt-related things in here
};
大部分的Grunt任务都依赖某些配置数据,这些数据被定义在一个json对象内,并传递给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文件压缩为一个目标文件。
像 concatenation、[minification]、grunt-contrib-uglify 和 linting这些常用的任务(task)都已经以grunt插件的形式被开发出来了。只要在 package.json 文件中被列为dependency(依赖)的包,并通过npm install安装之后,都可以在Gruntfile中以简单命令的形式使用:grunt.loadNpmTasks('grunt-contrib-uglify');
注意: grunt --help 命令将列出所有可用的任务。
通过定义 default 任务,可以让Grunt默认执行一个或多个任务。在上面的例子中,执行 grunt 命令时如果不指定一个任务的话,将会执行uglify任务。这和执行grunt uglify 或者 grunt default的效果一样。default任务列表数组中可以指定任意数目的任务(可以带参数)。grunt.registerTask('default', ['uglify']);
如果Grunt插件中的任务(task)不能满足你的项目需求,你还可以在Gruntfile中自定义任务(task)。例如,在下面的 Gruntfile 中自定义了一个default 任务,并且他甚至不依赖任务配置:
module.exports = function(grunt) {
grunt.registerTask('default', 'Log some stuff.' , function() {
grunt.log.write('Logging some stuff...').ok();
});
};
当然,特定于项目的任务不必在 Gruntfile 中定义。他们可以定义在外部.js 文件中,并通过grunt.loadTasks 方法加载。
在上面列出的这个 Gruntfile 中,package.json文件中的项目元数据(metadata)被导入到 Grunt 配置中, grunt-contrib-uglify 插件中的uglify 任务(task)被配置为压缩源码文件,并依据上述元数据动态生成一个文件头注释。当在命令行中执行 grunt 命令时,uglify 任务将被默认执行。
加油!
grunt入门讲解1:grunt的基本概念和使用的更多相关文章
- grunt入门讲解2:如何使用 Gruntfile 配置任务
Grunt的task配置都是在 Gruntfile 中的grunt.initConfig方法中指定的.此配置主要包括以任务名称命名的属性,和其他任意数据.一旦这些代表任意数据的属性与任务所需要的属性相 ...
- grunt入门讲解7:项目脚手架grunt-init
grunt-init是一个用于自动创建项目脚手架的工具.它会基于当前工作环境和你给出的一些配置选项构建一个完整的目录结构.至于其所生成的具体文件和内容,依赖于你所选择的模版和构建过程中你对具体信息所给 ...
- grunt入门讲解4:如何创建task(任务)
每当运行Grunt时, 你可以为其指定一个或多个任务, 这些任务用于告诉Grunt你想要它做什么事情. 如果你没有指定一个任务,并且你已经定义一个名为 "default" 的任务, ...
- grunt入门讲解6:grunt使用步骤和总结
Grunt是啥? 很火的前端自动化小工具,基于任务的命令行构建工具. Grunt能帮我们干啥? 假设有这样一个场景: 编码完成后,你需要做以下工作 HTML去掉注析.换行符 - HtmlMin CSS ...
- grunt入门讲解3:实例讲解使用 Gruntfile 配置任务
这个Gruntfile 实例使用到了5个 Grunt 插件: grunt-contrib-uglify grunt-contrib-qunitgrunt-contrib-concatgrun ...
- grunt入门讲解5:创建插件,安装Grunt以及常见问题
创建插件 创建插件主要有以下几个步骤: (1)通过 npm install -g grunt-init 命令安装 grunt-init .(2)通过 git clone git://github.co ...
- AngularJS入门讲解1:angular基本概念
AngularJS应用程序主要有三个组成部分: 模板(Templates) 模板是您用HTML和CSS编写的文件,展现应用的视图. 您可给HTML添加新的元素.属性标记,作为AngularJS编译器的 ...
- Grunt 入门
转自:http://user.qzone.qq.com/174629171/blog/1404433906 Grunt被定义为:the javascript task runner. 什么算是Java ...
- Grunt入门学习之(1) -- 环境安装
Grunt入门学习(1) - 环境安装 这周根据项目需要,在项目的基础上分模块开发了一个小的项目板块,但是在规范组织每个模块的代码和其依赖性时比较麻烦,需要一个项目板块的构建工具.各个模块都包括其对应 ...
随机推荐
- BZOJ3211:花神游历各国(线段树)
Description Input Output 每次x=1时,每行一个整数,表示这次旅行的开心度 Sample Input 4 1 100 5 5 5 1 1 2 2 1 2 1 1 2 2 2 3 ...
- 宿主在Windows Service中的WCF(创建,安装,调用) (host到exe,非IIS)
1. 创建WCF服务 在vs2010中创建WCF服务应用程序,会自动生成一个接口和一个实现类:(IService1和Service1) IService1接口如下: using System.Ru ...
- google浏览器window.onbeforeunload方法兼容问题
window.onbeforeunload方法在IE内核浏览器是有效的,但是在google浏览器中并不兼容,请教给位怎么在google浏览器中兼容window.onbeforeunload方法 采纳的 ...
- pytorch代码资源
pytorch版本的faster和fpn https://github.com/jwyang/faster-rcnn.pytorch https://github.com/jwyang/fpn.pyt ...
- Android 打造属于自己的照片选择器
前言 在做第一个项目时照片选择器使用了开源的PhotoPicker 渐渐无法满足需求,就想着打造一款属于自己的照片选择器. 花了一周的时间完成了该项目,其实代码有一大半并非自己写的,在阅读PhotoP ...
- PAT B1017 A除以B (20 分)
本题要求计算 /,其中 A 是不超过 1000 位的正整数,B 是 1 位正整数.你需要输出商数 Q 和余数 R,使得 A=B×Q+R成立. 输入格式: 输入在一行中依次给出 A 和 B,中间以 1 ...
- Docker学习5-Services – 服务(未完待续)
扩展应用程序并启用负载平衡, 为此,必须在分布式应用程序的层次结构中提升一级:服务.在分布式应用程序中,应用程序的不同部分称为“服务”.例如,一个视频共享站点,它可能包含用于将应用程序数据存储在数据库 ...
- HDU1754
https://vjudge.net/contest/66989#problem/B 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少. 这让很多学生很反感. 不管你喜 ...
- QT的常用对话框的应用
QMessageBox类提供了常用的弹出式对话框:提示.警告.错误.询问.关于对话框 需要添加头文件 #include <QMessageBox> MESSAGE 是要是显示的字符串 v ...
- loadrunner中pacing设置01
之前一直也用pacing值来调节TPS,一直觉得它和think time没啥区别.这次项目中,和同事就此展开了讨论,细细一研究发现pacing值门道还是很多的. 如下面三个图: 上图是pacing的三 ...