grunt入门讲解3:实例讲解使用 Gruntfile 配置任务
这个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']
},
JSHint插件的配置也很简单:
jshint: { // define the files to lint files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'], // configure JSHint (documented at http://www.jshint.com/docs/) options: { // more options here if you want to override JSHint defaults globals: { jQuery: true, console: true, module: true } } }
JSHint只需要一个文件数组(也就是你需要检测的文件数组), 然后是一个options对象(这个对象用于重写JSHint提供的默认检测规则)。你可以到JSHint官方文档站点中查看完整的文档。如果你乐于使用JSHint提供的默认配置,那么在Gruntfile中就不需要重新定义它们了。
然后,我们来看看watch插件:
watch: { files: ['<%= jshint.files %>'], tasks: ['jshint', 'qunit'] }
你可以在命令行使用grunt watch
来运行这个任务。当它检测到任何你所指定的文件(在这里我使用了JSHint任务中需要检测的文件)发生变化时,它就会按照你所指定的顺序执行指定的任务(在这里我指定了jshint和qunit任务)。
接下来, 我们还要加载所需要的Grunt插件。 它们应该已经全部通过npm安装好了。
grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-qunit'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-concat');
最后设置了一些task。最重要的是default任务:
// 在命令行上输入"grunt test",test task就会被执行。 grunt.registerTask('test', ['jshint', 'qunit']); // 只需在命令行上输入"grunt",就会执行default task grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
下面便是最终完成的Gruntfile.js
。
module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { options: { separator: ';' }, dist: { src: ['src/**/*.js'], dest: 'dist/<%= pkg.name %>.js' } }, uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n' }, dist: { files: { 'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>'] } } }, qunit: { files: ['test/**/*.html'] }, jshint: { files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'], options: { //这里是覆盖JSHint默认配置的选项 globals: { jQuery: true, console: true, module: true, document: true } } }, watch: { files: ['<%= jshint.files %>'], tasks: ['jshint', 'qunit'] } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-qunit'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.registerTask('test', ['jshint', 'qunit']); grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']); };
加油!
posted on 2015-01-22 15:55 chaojidan 阅读(1754) 评论(0) 编辑 收藏 举报