准备工作
grunt 基于nodeJs所以 nodeJs需要的基础配置都需要安装
1.Grunt 安装
npm install -g grunt-cli 这是全局安装
2.在当前文件下npm init
配置package.json文件
3.安装了grunt，这个只是一个框架，里面会用很多插件，具体可以去官网查看，这里记录了8种简单的用法。
3.1 把指定的文件全部拼接变为一个文件，插件名称：grunt-contrib-concat。
3.2 把js丑化也就是压缩，函数名称普遍变成a，b，c，d，e，f等一般情况是无法再看懂的。 插件名称 grunt-contrib-uglify。
3.3 css压缩，把css统一压缩在一行。插件名称 grunt-contrib-cssmin。
3.4 html压缩，同上和css差不多。插件名称 grunt-contrib-htmlmin。
3.5 观察指定的文件，当这个文件内部发生变化的时候，执行某些操作。插件名称 grunt-contrib-watch。
3.6 拷贝文件，把一个指定文件拷贝指定的位置。插件名称 grunt-contrib-copy。
3.7 删除一个指定文件。插件名称 grunt-contrib-clean。
3.8 压缩文件，指定的文件压缩。相当于右键压缩插件名称 grunt-contrib-compress。
这些都是nodeJs包。
安装之前需要安装 grunt ，安装： npm install grunt --save ，如果全局安装过了 就不需要安装
安装某个插件： npm install (某个插件名称) --save 来进行安装，需要哪些安装哪些，此处安装上面说到的8个插件。
安装完成之后，准备工作就差不多了。接下来需要进行配置
4.配置文件，配置文件名称为：Gruntfile.js 。
5.在这个 Gruntfile.js 文件里面进行配置，需要在module.exports = function(grunt){在这个函数里面进行配置，总体分三步}。
第一步 导入也就是加载插件 grunt.loadNpmTasks('grunt-contrib-concat');
第二步 进行配置任务，需要在grunt.initConfig({这个里面来进行配置})，配置内容根据需求，配置不同
第三步 指定任务调取代码 grunt.registerTask('指定调取命令', ["配置名称"]); 可以单独执行一个任务，也可以组合执行任务 grunt.registerTask('指定调取命令', ["配置名称"，"配置名称"，"配置名称"]);
至此配置完成。
6.调取： grunt 指定调取命令
Gruntfile.js 文件中具体代码如下：这里进行了一次性配置这个八个插件
module.exports = function (grunt) {
// 使用的插件导入进来加载插件
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compress');
// 配置任务
grunt.initConfig({
// 读取package.json的内容，下面用到时候可以进行调用
pkg: grunt.file.readJSON('package.json'),
// 连接文件 concat配置名称
concat: {
// 连接文件的选项
options: {
// 分割符会插入到每一个文件和下一个文件之间，自定义
separator: "/*<===========>*/"
// 一般会插入到拼接后文件的起始位置，类似于一个标题，这个符号可以书写变量<%=变量%>，也可以直接写字符串。自定义
banner: '/*!<%=pkg.description%> - - <%=grunt.template.today("yyyy-mm-dd")%> */'
},
// 列出
dist: {
// 要连接的文件，是个数组根据自己的文件位置以及文件来进行书写
src: [
"js/jquery.js",
"js/jquery.fullscreen.js",
"js/FullScreen.js",
"js/SecondManager.js"
],
// 连接后生成的文件，文件名称自定义。
dest: 'game.js'
}
},
// 压缩js
uglify: {
options: {
banner: '/*这里可以自己定义文字 也可以穿参数*/'
},
game: {
files: {
// 压缩后产生的文件以及位置（文件地址名称自定义） ： 待压缩文件，可以多个
"dist/game.js": ["game.js"]
}
}
},
// 监视文件
watch: {
// 一个具体的监视
game: {
// 要监视的文件 当下面的文件中内容发生改变时候调用tasks里面的任务，一个*表示这个文件不包括文件夹的所有文件，两个**表示全部文件
files: ['js/*.js', "Gruntfile.js"],
// 当文件发生变化的时候要执行的任务
tasks: [
'concat',
'uglify'
]
}
},
// 压缩css
cssmin: {
index: {
// 压缩文件
files: {
// 压缩后生成文件以及地址 （自定义）：等待压缩文件，数组类型，可书写多个
'dist/index.css': ["index.css"]
}
}
},
// 压缩html
htmlmin: {
options: {
// 是否清楚注释
removeComments: true,
// 是否清楚空白行
collapseWhitespace: true
},
index: {
files: {
// 压缩后生成文件以及地址 （自定义）：等待压缩文件，数组类型，可书写多个
'dist/index.html': "index.html"
}
}
},
// copy
copy: {
dist: {
// 要复制的文件列表
files: [
{
// 扩展，扩展了什么也不是很清楚
expand: true,
// 要拷贝的文件地址 一个*表示当前文件下直属的 内部若还有文件不进行拷贝，两个**表示全部拷贝
src: ["images/*", "mp3/**"],
// 要拷贝到的地址
dest: "dist/",
// 过滤对拷贝内容进行筛选
filter: "isFile"
},
]
}
},
// 删除文件
clean: {
// 先去进行查找，指定文件夹下的指定文件
dist: ["dist/", "Grunt.zip"],
// 然后再进行删除
clear: ["dist/", "Grunt.zip"]
},
// 压缩文件 compress配置名称
compress: {
dist: {
options: {
// 名称
archive: "Grunt.zip"
},
files: [
// expend扩展，扩展了什么也不是很清楚。
// 把dist/下的所有文件压缩，src 两个* 代表所有文件。
{ expand: true, cwd: "dist/", src: ['**'] }
]
}
}
});
// 以上为配置，都是些简单配置，还有丰富配置，例如增加标题等等，这里没有书写。可以去查这些插件的文档可以搜索到。
// 指定任务
// 可以组合任务 也可以单独执行一个
// 单独指定一个任务，（"调取名称"，["配置名称"]），根据需求可以自定指定
// 指定一个拼接任务
grunt.registerTask('cle', ["concat"]);
// 指定一个压缩任务
grunt.registerTask('com', ["compress"]);
// 指定一个删除任务
grunt.registerTask('cle', ["clean"]);
// 组合任务 ，（"调取名称"，["配置名称"，"配置名称"，"配置名称"，"配置名称"]） 中括号为数组，可以配置多个名称，当调用之后逐个执行。
grunt.registerTask('all', ["concat", "uglify", "cssmin", "htmlmin", "copy"]);
grunt.registerTask('build', ["concat", "uglify", "cssmin", "htmlmin"]);
// 多重组合 （"调取名称"，["之前定义的调取名称"，"配置名称"]）可以添加之前定义的调取名称，当到执行调用名称时候，进入之前定义的这个名称的任务进行执行，当执行完成之后，回到当前任务继续执行下去。
grunt.registerTask('default', ["build", "watch"]); 先去执行build这个任务，然后再执行watch监视任务。
grunt.registerTask('dist', ["clean", "build", "copy", "compress"]); 先执行删除任务，在执行build任务，然后拷贝，然后压缩。
// 根据需求组合可以多样组合
调用 ：grunt 调取名称
例如 ：grunt dist
grunt all 等等就可以进行你指定的操作
当你觉得一次配置8个插件，里面有些你不需要的 那个你就可以单独进行配置 配置你需要的 然后进行调取，总体步骤和上面一样，只是导入插件只需要你需求的插件，配置只需配置你需求的配置就可以了。例如：
module.exports = function (grunt) {
// 使用的插件导入进来 加载插件
grunt.loadNpmTasks('grunt-contrib-cssmin');
// 配置任务
grunt.initConfig({
// 读取package.json的内容，这里调取就可有可无。
pkg: grunt.file.readJSON('package.json'),
// 压缩css
cssmin: {
index: {
// 压缩文件
files: {
// 压缩后生成文件以及地址 ：等待压缩文件
'dist/index.css': ["index.css"]
}
}
},
});
// 指定任务
grunt.registerTask('css', ["cssmin"])
}
调用 ：grunt 调取名称
grunt css 就可以压缩指定css
错误归类：
当出现错误时候，一般都会提示，根据提示可以查看进行修改，一般常见的一些错误如：
1.使用插件是否进行了下载安装，grunt在全局安装后，在当前文件可能未安装需要重新安装等。
2.package.json 依赖设置。
3.插件是否引入，引入是否正确。
4.配置任务关键词是否错误。
5.存储位置设置是否合理，命名是否冲突
6.是否指定任务，指定任务顺序是否合理。
当然还有一些其他的，根据错误提示来进行相应的更改。
以上是自己写的一些总结~有什么不足之处，还望补充，谢谢各位看官~~