Grunt： 拼接代码，js丑化（压缩），css压缩，html压缩，观察文件，拷贝文件，删除文件，压缩文件

准备工作

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.是否指定任务，指定任务顺序是否合理。

当然还有一些其他的，根据错误提示来进行相应的更改。

以上是自己写的一些总结~有什么不足之处，还望补充，谢谢各位看官~~