Grunt 介绍
grunt 是一个基于 nodejs 的 task runner，简单来说，就是类似于.net 平台的 msbuild 以及 java 平台的 maven。
- Grunt 中文主页
- 是一套前端
自动化构建工具，一个基于 nodeJs 的命令行工具 - 它是一个任务运行器, 配合其丰富强大的插件(Grunt 是一个任务插件框架)
- 常用功能:
- 合并文件(js/css)
- 压缩文件(js/css)
- 语法检查(js)
- less/sass 预编译处理
- 其它…
grunt 可以使你的项目中重复的任务，比如压缩，语法检查，编译（比如 LESS 预处理，coffeescript 编译），单元测试等变得更加简单。
Project 实例结构:
1 | |- build----------构建生成的文件所在的文件夹 |
Grunt 安装
因为 grunt 是基于 node.js 的，所以我们首先要安装 node.js 以及 node.js 的包管理工具 npm。
Windows
Windows 平台下只要在 NODE.JS 官方下载 MSI 安装包，直接安装，node.js 以及 npm 就能直接装好。
查看版本:1
2node -v
npm -v全局安装 grunt-cli
1
npm install -g grunt-cli
安装 grunt
1
2
3
4
5npm init //init package.json
npm install grunt --save-dev
//批量install
npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect运行构建项目命令
1
grunt //Warning: Task "default" not found
Linux
1
2
3sudo apt-get -y install npm
sudo npm install -g grunt
sudo npm install -g grunt-cli
package.json
package.json 用来存放项目的元数据，比如项目的版本，项目许可证书——比如 MIT，GPL 啥的，作者，项目依赖的库等：
1 | { |
note: npm init //init package.json
配置文件: Gruntfile.js
此配置文件本质就是一个 node 函数类型模块
配置编码包含 3 步:
- 初始化插件配置（grunt.initConfig）
- 加载插件任务(grunt.loadNpmTasks)
- 注册构建任务(grunt.registerTask)
1
2
3
4
5
6
7smodule.exports = function(grunt) {
grunt.initConfig({
//主要编码处
});
grunt.loadNpmTasks("grunt-contrib-concat");
grunt.registerTask("default", []);
};命令:
grunt TASK:TARGETgrunt=grunt defaultTips：通过<%%>模板字符串可以引用任何的配置属性, 比如<%=pkg.name%>;也可以运行 grunt api, 比如<%= grunt.template.today(“yyyy-mm-dd”) %>。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16module.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"
}
}
});
grunt.loadNpmTasks("grunt-jsdoc");
};
Grunt 插件介绍
- Grunt 官网的插件列表页面
- 插件分类:
- Grunt 团队贡献的插件 : 插件名大都以 contrib-开头
e.g. grunt-contrib-clean, grunt-contrib-concat, grunt-contrib-uglify… - 第三方提供的插件 : 大都不以 contrib-开头
- 常用的插件:
- grunt-contrib-clean 清除文件(打包处理生成的)
- grunt-contrib-concat 合并多个文件的代码到一个文件中
- grunt-contrib-uglify 压缩 js 文件
- grunt-contrib-jshint javascript 语法错误检查；
- grunt-contrib-cssmin 压缩/合并 css 文件
- grunt-contrib-htmlmin 压缩 html 文件
- grunt-contrib-imagemin 压缩图片文件(无损)
- grunt-contrib-copy 复制文件、文件夹
- grunt-contrib-requirejs 合并压缩 requirejs 管理的所有 js 模块文件
- grunt-contrib-watch 实时监控文件变化、调用相应的任务重新执行
- Grunt 团队贡献的插件 : 插件名大都以 contrib-开头
合并 js: 使用 concat 插件
安装插件
1
npm install grunt-contrib-concat --save-dev
实例编码:
src/js/test1.js
1
2
3
4
5
6(function() {
function add(num1, num2) {
return num1 + num2;
}
console.log(add(10, 20));
})();src/js/test2.js
1
2
3
4
5
6(function() {
var arr = [2, 3, 4].map(function(item, index) {
return item + 1;
});
console.log(arr);
})();
配置: Gruntfile.js
配置任务:
1
2
3
4
5
6
7
8
9concat: {
options: { //可选项配置
separator: ';' //使用;连接合并
},
build: { //此名称任意, target的名字，调用的时候为concat：build
src: ["src/js/*.js"], //合并哪些js文件
dest: "build/js/built.js" //输出的js文件
}
}加载插件:
1
grunt.loadNpmTasks('grunt-contrib-concat');
注册任务:
1
grunt.registerTask('default', ['concat']);
运行命令:
1
grunt or grunt default
Creating tasks
Alias Tasks
1
2
3
4grunt.registerTask(taskName, [description, ] taskList)
//e.g.
grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);Multi Tasks
1
2
3
4
5
6
7
8
9
10
11
12
13
14grunt.registerMultiTask(taskName, [description, ] taskFunction)
//e.g.
grunt.initConfig({
log: {
foo: [1, 2, 3],
bar: 'hello world',
baz: false
}
});
grunt.registerMultiTask('log', 'Log stuff.', function() {
grunt.log.writeln(this.target + ': ' + this.data);
});“Basic” Tasks
1
2
3
4
5
6
7
8
9
10grunt.registerTask(taskName, [description, ] taskFunction)
//e.g.
grunt.registerTask('foo', 'A sample task that logs stuff.', function(arg1, arg2) {
if (arguments.length === 0) {
grunt.log.writeln(this.name + ", no args");
} else {
grunt.log.writeln(this.name + ", " + arg1 + " " + arg2);
}
});note:Inside a task, you can run other tasks.1
2
3
4
5
6grunt.registerTask("foo", 'My "foo" task.', function() {
// Enqueue "bar" and "baz" tasks, to run after "foo" finishes, in-order.
grunt.task.run("bar", "baz");
// Or:
grunt.task.run(["bar", "baz"]);
});
快速搭建脚手架
利用 grunt 快速搭建脚手架出来。所谓的脚手架，就是指包含了目录结构和初始的一些功能,测试文件的一个环境。我们来搭建一个 jquery 插件的脚手架：
1 | grunt init:jquery |
测试：
1 | grunt qunit |
Grunt 的设计原理个人理解
Grunt 其实就是一个 singleton 的对象。框架提供了 task 注册和运行的功能。像项目管理一样，收集任务，编排任务，并规定执行顺序。
grunt.initConfig是全局设置，配置 task 的执行参数或 context。使用<% %>分隔符指定的模板会在任务从它们的配置中读取相应的数据时将自动扩展扫描。模板会被递归的展开，直到配置中不再存在遗留的模板相关的信息(与模板匹配的)。
1
2
3
4
5
6
7
8
9
10
11
12
13grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
uglify: {
options: {
banner:
'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
dist: {
src: "src/<%= pkg.name %>.js",
dest: "dist/<%= pkg.name %>.min.js"
}
}
});全局 Grunt 注册 task 信息。
grunt.loadTasks('tasks'), ‘tasks’是文件夹名，通过 node module 批量注册任务。1
2
3
4
5;
module.exports = function(grunt) {
grunt.initConfig({});
grunt.registerTask("test", ["clean", "ui5_build", "nodeunit"]);
};- node module 中 通过 API
grunt.registerTaskorregisterMultiTask, 注册 task 信息。
- node module 中 通过 API
grunt.loadNpmTasks, 加载注册 grunt plugin，别人设计的 task。
Grunt plugin
利用 Grunt 脚手架，快速创建贴合自己需要的项目需要的，项目内部可重用的 plugin。d
参考Grunt 项目脚手架
- 采用模板 grunt-init-gruntplugin - Create a Grunt plugin, including Nodeunit unit tests
- grunt-init-gruntplugin-sample
Debug Grunt in VSCode
VSCode 基于 NodeJS 构建，天生支持 JS 的调试，而 Grunt 又是 js 的，所以，可以调试。
1 | { |
