GRUNT: The JavaScript Task Runner
JavaScript 任务执行器,类似于 Java 中的 Ant 和 Maven。
Grunt 的生态系统很大,包括很多的插件。
为什么需要 Task Runner
简而言之:自动化。
在执行一些重复性的工作时,例如代码压缩,编译,单元测试,代码质量检测等等,Task Runner 使得用户的操作更简单。
通过配置 Gruntfile 文件,Task Runner 可以自动执行相关的任务。
Grunt 的使用
Grunt 的安装
通过 Node 来安装 Grunt。
在 package.json
文件的 devDependencies
属性中配置 Grunt 及相应插件的版本。随后执行命令 npm install
package.json 文件
package.json
文件的规范参考 https://docs.npmjs.com/files/package.json
package.json
文件位于项目的根目录,与 Gruntfile.js
文件并列。
执行 npm install
命令来安装对应版本的 Grunt 及相应插件。
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"
}
}
Gruntfile.js 文件
Gruntfile.js
文件包含4个部分:
-
The "wrapper" function
如下:
module.exports = function(grunt) {
// Do grunt-related things in here
};
- Project and task configuration 任务的配置
- Loading Grunt plugins and tasks
-
Custom tasks 自定义任务
如下:
grunt.registerTask('unittest', [
'clean:build',
'mkdir:build',
'copy:build',
'karma:unit'
]);
一个完整的示例如下:
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'
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};
关于任务的创建,可以参考 Creating tasks
引用:
Grunt 官网