Grunt官网请戳 这里
Grunt介绍
Grunt是JavaScript世界的构建工具，一种自动化任务处理工具，有很多插件扩展它的功能。
Grunt 基于Node.js,用js开发的。Grunt以及它的插件们，都作为一个包，可以用npm安装进行管理。
npm生成的package.json文件中，会记录当前项目中用到的Grunt插件，而Grunt会调用Gruntfile.js这个文件，解析里面的task并执行相应操作。
目前（2019-2-28）Grunt的稳定版本是V1.0.3。
安装Grunt
Grunt依赖node.js,所以在安装前确保安装了node.js，然后开始安装Grunt。
事实上，安装的不是Grunt,而是Grunt-cli,也就是命令行的Grunt,这样就可以使用grunt命令来执行某个项目中的Gruntfile.js定义的task。但要注意，Grunt-cli只是一个命令行工具，而不是Grunt本身。
1
npm install -g grunt-cli
需要注意，因为使用 －g 命令会安装到全局，可能会涉及到系统敏感目录，如果用 Windows 的话，可能需要你用管理员权限，如果用 OS X ／ Linux 的话，你可能需要加上 sudo 命令。
Grunt的一些插件
Grunt可以实现以下几个功能：检查每个JS文件语法、合并两个JS文件、将合并后的JS文件压缩、将scss文件编译、新建一个本地服务器监听文件自动刷新HTML文件等等。
- 合并文件：grunt-contrib-concat
- 语法检查：grunt-contrib-jshint
- scss编译：grunt-contrib-sass
- 压缩文件：grunt-contrib-uglify
- 监听文件变动：grunt-contrib-watch
- 建立本地服务器：grunt-contrib-connect
它们的命名喝文档都很规范，因为这些都是官方提供的比较常用的插件。
配置Gruntfile.js
主要的三块代码：
- 任务配置代码
- 插件加载代码
- 任务注册代码
案例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.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'
}
}
});
// 加载包含'uglify'任务的插件
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默认被执行的任务列表
grunt.registerTask('default',['uglify']);
};
可以看出，具体的任务配置代码以对象格式放在 grunt.initConfig 函数里面，其中先写了一句 pkg: grunt.file.readJSON('package.json') 功能是读取 package.json 文件，并把里面的信息获取出来，方便在后面任务中应用（例如下面就用了 <%= pkg.name %> 来输出项目名称），这样可以提高灵活性。之后就是 uglify 对象，这个名字是固定的，表示下面任务是调用 uglify 插件的，首先先配置了一些全局的 options 然后新建了一个 build 任务。
你在 default 上面注册了一个 Uglify 任务，default 就是别名，它是默认的 task，当你在项目目录执行 grunt 的时候，它会执行注册到 default 上面的任务。
我们也可以注册别的 task，例如：
1
grunt.registerTask('compress', ['uglify:build']);
如果想要执行这个 task，我们就不能只输入 grunt 命令了，我们需要输入 grunt compress 命令来执行这条 task，而这条 task 的任务是 uglify 下面的 build 任务，也就是说，我们只会执行 uglify 里面 build 定义的任务，而不会执行 uglify 里面定义的其他任务。
这里需要注意的是，task 的命名不能与后面的任务配置同名，也就是说这里的 compress 不能命名成 uglify，这样会报错或者产生意外情况
配置Gruntfile.js – scss任务
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
module.exports = function(grunt) {
var sassStyle = 'expanded';
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
output : {
options: {
style: sassStyle
},
files: {
'./style.css': './scss/style.scss'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.registerTask('outputcss',['sass']);
grunt.registerTask('default');
};
意思就是将 ./scss/style.scss 这个文件以 sassStyle 变量存储的方式编译成 根目录下面的 style.css 文件。
执行 grunt outputcss 命令，提示编译 scss 文件成功。
Grunt & Gulp
Grunt 与Gulp 是同类型的工具。不过是任务配置JS的语法不同，Gulp的Gulpfile.js的写法更加通俗易懂，上手更快。但是Gulp的插件不如Grunt，Grunt官方提供了一些常见的插件，能满足大部分日常工作，而且值得信赖。Gulp的插件不太规范。
end ！