这个Gruntfile 实例使用到了5个 Grunt 插件:
grunt-contrib-uglify
grunt-contrib-qunit
grunt-contrib-concat
grunt-contrib-jshint
grunt-contrib-watch
上面的uglify,concat,watch这三个插件用的最多,第一个插件是用来压缩文件的,第二个插件是用来合并文件的,第三个插件用来监听文件内容的,如果文件内容改变了,就会触发回调方法进行相应的处理。
我们一步一步来讲解这个 Gruntfile 实例。
首先是 "wrapper" 函数,它包含了整个Grunt配置信息。
module.exports = function(grunt) { }
在这个函数中,我们可以初始化 configuration 对象:
grunt.initConfig({ });
接下来从package.json 文件读入项目配置信息,并存入pkg 属性内。这样我们就可以访问到package.json文件中列出的属性了,如下:
pkg: grunt.file.readJSON('package.json')
到目前为止我们就可以看到如下配置:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
});
};
接下来我们就可以为我们的每个任务来定义相应的配置了,每个任务的配置对象作为Grunt配置对象的属性,并且这个属性名称与任务名相同。因此"concat"任务就是我们的配置对象中的"concat"属性。下面便是我的"concat"任务的配置对象。
concat: {
options: {
// 定义一个用于插入合并输出文件之间的字符
separator: ';'
},
dist: {
// 将要被合并的文件
src: ['src/**/*.js'],
// 合并后的JS文件的存放位置
dest: 'dist/<%= pkg.name %>.js'
}
}
这里使用了pkg.name来访问我们刚才引入并存储在pkg属性中的package.json文件信息,它会被解析为一个JavaScript对象。Grunt自带的有一个简单的模板引擎用于输出配置对象(这里是指package.json中的配置对象),这里我让concat任务将所有存在于src/目录下以.js结尾的文件合并起来,然后存储在dist目录中,并以项目名来命名。
现在我们来配置uglify插件,它的作用是压缩JavaScript文件:
uglify: {
options: {
// 此处定义的banner注释将插入到输出文件的顶部
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
}
这里我们让uglify在dist/目录中创建了一个包含压缩结果的JavaScript文件。注意这里我使用了<%= concat.dist.dest>,因此uglify会自动压缩concat任务中生成的文件。
QUnit插件的设置非常简单,你只需要给它提供用于测试运行的文件的位置,注意这里的QUnit是运行在HTML文件上的。
qunit: {
files: ['test/**/*.html']
},
相关推荐
入门如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件: npm install grunt-ui --save-dev 插件安装完成后,可以使用以下...
load-grunt-config是一个Grunt库,允许您按任务分解Gruntfile配置。 对于大多数小型项目,单个Gruntfile.js是完美的。 但是随着项目的发展,Gruntfile.js可能很快变得难以管理。 这是load-grunt-config派上用场的...
grunt_configgrunt工具gruntFile.js配置文件Nov 18 2014 : 增加css的ie7兼容配置
更改日志:v.0.0.4 - 删除了 grunt-env 依赖项,更改了配置,devcode 现在支持“grunt server” v.0.0.3 - 升级了 grunt 依赖项 与 Yeoman grunt 文件一起使用: Devcode 是 grunt-preprocess 项目的一个分支,...
资源文档按照“入门”中的描述加载 grunt-jquerybuilder 任务,并将您的 jQuery 构建器配置添加到您的 grunt 文件中: 示例 jQuery 构建器 grunt 文件配置条目: // ... grunt file contents jquery : { // the ...
入门package.json 和 Gruntfile.js 文件的简单示例。 该项目包括有用的 NodeJS 模块的基本设置,例如:咕噜声并发
入门使用以下命令在项目的旁边安装此grunt插件: npm install grunt-env 然后将此行添加到项目的grunt.js gruntfile中: grunt . loadNpmTasks ( 'grunt-env' ) ;配置 env : { options : { //Shared Options Hash } ...
jscs任务使用grunt jscs命令运行此任务。 任务目标,文件和选项可以根据grunt指南指定。选项任何指定的选项都将直接传递给JSCS,此外此插件还有其他选项:配置类型: String , Boolean值默认值: true 定义如何通过...
)快速开始: 克隆使用以下命令安装Grunt: npm install -g grunt-cli 从此存储库获取Gruntfile.js 您将需要从angular-seed改编原始的package.json并添加以下devDependencies : " devDependencies " : { " bower " ...
一个Grunt任务,用于监视和运行多个Grunt项目上的任务。 创建一个Grunt Hub Grunt Hub只是一个装有和已安装此grunt插件的文件夹。 要创建一个,请执行以下操作: mkdir grunt-hub && cd grunt-hub npm install ...
咕噜咕噜的生活不是图书馆,而是一种生活方式需要咕噜声~0.4.5 如果您像我一样使用来自动化多个任务,那么您可能已经注意到您的 Gruntfile Swift增长到无法管理的大小。 Grunt Life通过提供管理 Grunt 插件的方案使...
如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程后,您可以使用以下命令安装此插件: npm install grunt-markdawn --save-dev 安装插件后,可以使用以下 ...
示例 Gruntfile.js 和 package.json 存储库是大多数 Web 开发项目的起点。 这包括 咕噜声 咕噜咕噜 咕噜声贡献手表 grunt-contrib-concat 咕噜声-贡献-丑化 它注册了一个build任务,该任务调用: sass, concat, ...
运行 (一个 CSS 冗余分析器)的 Grunt 任务。 CSSCSS CSSCSS 在 Ruby( v1.9.x及更高版本)上运行,要检查 Ruby 是否安装在您的机器上,请使用ruby -v 。 要安装 CSSCSS gem,请运行gem install csscss...
这是 Laravel 4 框架和 Grunt 任务管理器的简单缓存破坏器。 该包依赖于 grunt-cachebuster npm 模块( )。 在你安装了 npm 模块和这个包之后,你所要做的就是添加一个服务提供者并配置你的 Gruntfile.js。 不需要...
如果您以前从未使用过 ,请务必查看“指南”,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件: npm install grunt-aws --save-dev 插件安装完成后,可以使用以下...
咕task声任务加载器 加快任务加载速度并自动加载npm grunt任务前: // gruntfile.jsmodule . exports = function ( grunt ) { // configure tasks grunt . loadNpmTasks ( 'grunt-contrib-uglify' ) ; grunt . ...
入门这个插件需要 Grunt ~0.4.5 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程后,您可以使用以下命令安装此插件: npm install grunt-ccompiler --save-dev...
如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程后,您可以使用以下命令安装此插件: npm install grunt-codeclimate --save-dev 安装插件后,可以使用以下...
安装使用以下命令安装此grunt插件: npm install grunt-pagespeed --save-dev加载插件将此添加到项目的Gruntfile.js gruntfile中: grunt.loadNpmTasks('grunt-pagespeed');或者,将其添加到项目的Gruntfile.coffee ...