grunt其实是哆啦a梦的百宝袋,是工具集,拥有非常丰富的任务插件,可以实现各式各样的构建目标。
按任务目标大致可分为四类:
文件操作型:比如合并、压缩js和css文件等(包括)
预编译型:比如编译less、sass、coffeescript等
类库项目构建型:比如 angular、ember、backbone等(这种推荐使用yeoman)
工程质量保障型:比如jshint、jasmine、mocha等
除此之外还有像 watch (监听文件改变,自动触发构建)等功能。
安装grunt
grunt依赖NodeJs和npm,请确保你的计算机已经安装该环境。
特别留意下grunt是有二个版本:服务器端版本(grunt)和客户端版本(grunt-cli),我们需要安装的是客户端版本。
npm install -g grunt-cli
npm install grunt –save-dev
如果你不慎安装了服务器端版,请现予以卸载:
npm uninstall -g grunt
package.json
假设你有个工程目录叫demo,在工程根目录放个package.json
npm init 问答方式完成package.json的配置 配置结果:
{
"name": "grunt-demo",
"version": "1.0.0",
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-uglify": "~0.2.0"
},
"main": "Gruntfile.js",
"dependencies": {
"grunt-cli": "^1.2.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"description": ""
}
留意devDependencies字段,定义你要拉取的依赖模块,上面的代码,拉取grunt-contrib-uglify插件(用于压缩js),字段的值~0.2.0,指明需要模块的版本号,“~”是至少的意思。
在工程根目录启动命令行工具,运行:
npm install
Gruntfile.js
先在demo工程根目录创建个src目录放个测试文件,hello-grunt.js,代码如下:
(function($){
var str = "hello grunt!";
$('body').append(str);
})(jQuery)
再在根目录下创建个build目录,我们的目标很简单,将src目录下的hello-grunt.js压缩到build目录下,文件名为hello-grunt-min.js。 在demo工程根目录下放个Gruntfile.js,文件内容如下:
module.exports = function(grunt) {
// 构建任务配置
grunt.initConfig({
//读取package.json的内容,形成个json数据
pkg: grunt.file.readJSON('package.json'),
uglify: {
//文件头部输出信息
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n'
},
//具体任务配置
build: {
//源文件
src: 'src/hello-grunt.js',
//目标文件
dest: 'build/hello-grunt-min.js'
}
}
});
// 加载指定插件任务
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默认执行的任务
grunt.registerTask('default', ['uglify']);
};
执行grunt命令:
Running "uglify:build" (uglify) task
File "build/hello-grunt-min.js" created.
Done.
来看下目录,你就会看到build下出现了hello-grunt-min.js,文件内容如下:
/*! grunt-demo 2016-11-29 */!function(a){var b="hello grunt!";a("body").append(b)}(jQuery);