Grunt使用学习入门

grunt-cli的安装

首先，确保系统安装了node.js,因为要用到他的npm包管理工具

传送门→http://nodejs.cn/ 进入到官网，下载下来，路径都不要变，傻瓜式的下一步完成安装

安装完成后，打开cmd

先输入（需要联网）

npm update -g npm

确保npm可以使用，否则接下来的安装可能出问题

然后输入

npm install -g grunt-cli

grunt命令就被添加到了系统命令中

验证是否安装成功

准备工作完成

---

Grunt的简单使用

首先创建一个文件夹，如下图

build文件夹用来存放生成的目标文件，src用来存放源文件

接着创建两个文件
package.json
内容是

{
    "name": "my_pro",
    "version": "1.2.0",
    "devDependencies": {

    }
}

name是项目名称 version是项目的版本号 devDependencies是开发依赖项（json文件不能加注释！如果有报错的同学先看看json文件里面是不是混入了什么奇怪的东西）

Gruntfile.js
内容是

module.exports = function(grunt) {

    // Project configuration.(任务配置，所有插件的配置信息)
    grunt.initConfig({

        //获取 package.json 的信息
        pkg: grunt.file.readJSON('package.json'),

    });

    // 告诉grunt当我们在终端输入grunt时需要做些什么
    grunt.registerTask('default', []);

};

默认的基础格式，需要什么功能就在此基础上添加

放到这里

然后在此目录下按住shift+鼠标右键选择在此处打开命令行 进入当前文件夹目录下的命令行，
输入执行

npm install grunt –save-dev

成功

文件夹中会多出一个文件夹

表明以上的操作都是没问题的

package文件的变化

如何使用插件？

grunt官网的插件列表：传送门→http://www.gruntjs.net/plugins

实现代码查错压缩自动化

在此目录下按住shift+鼠标右键选择在此处打开命令行 进入当前文件夹目录下的命令行

1.输入执行

• uglify插件，用来格式化代码

npm install grunt-contrib-uglify –save-dev

• jshint插件，用来代码查错

npm install grunt-contrib-jshint –save-dev

• watch插件，用来监听代码文件的改变

npm install grunt-contrib-watch –save-dev

package.json变化

2.在Gruntfile.js中添加代码

---

uglify

写法一：将文件目录下的全部指定js文件合并压缩存放到目标文件夹

//获取uglify插件的配置信息
uglify: {

    //src  表示要压缩的文件   dest  表示要生成的文件
    task: {
        src: 'src/*.js',
        dest: 'build/main.min.js'
    }
}

//告诉grunt  加载uglify插件
grunt.loadNpmTasks('grunt-contrib-uglify');

写法二：指定多个目录js文件分别进行压缩合并

//获取uglify插件的配置信息
uglify: {

    //src  表示要压缩的文件   dest  表示要生成的文件
    task: {
        files: [
            { "buildA/main.min.js": "srcA/*.js" },
            { "buildB/main.min.js": "srcB/*.js" }
        ]
    }
}

//告诉grunt  加载uglify插件
grunt.loadNpmTasks('grunt-contrib-uglify');

写法三：按源文件目录结构压缩代码

task: {
    files: [{
        expand: true,
        cwd: "src", // 源文件目录
        src: "**/*.js", //压缩所有js文件
        dest: "build" //按原目录结构存放
    }]
}

//告诉grunt  加载uglify插件
grunt.loadNpmTasks('grunt-contrib-uglify');

整合三种写法，这样就不用需要其中一种压缩方式的时候而去频繁的更改js文件中的代码，只需要调用一个指令就可以

module.exports = function(grunt) {

    // Project configuration.(任务配置，所有插件的配置信息)
    grunt.initConfig({

        //获取 package.json 的信息
        pkg: grunt.file.readJSON("package.json"),

        //获取uglify插件的配置信息  压缩js
        uglify: {

            // 在生成的压缩文件的第一行加上一句说明
            options: {
                // 去掉console.log()
                compress: {
                    drop_console: false
                }
            },

            //src  表示要压缩的文件   dest  表示要生成的文件
            taskA: {
                src: 'src/*.js',
                dest: 'build/main.min.js'
            },
            taskB: {
                files: [
                    { "build/buildA/main.min.js": "src/srcA/*.js" },
                    { "build/buildB/main.min.js": "src/srcB/*.js" }
                ]
            },
            taskC: {
                files: [{
                    expand: true,
                    cwd: "src", // 源文件目录
                    src: "**/*.js", //压缩所有js文件
                    dest: "build" //按原目录结构存放
                }]
            }
        }
    });

    //告诉grunt  加载uglify插件
    grunt.loadNpmTasks("grunt-contrib-uglify");

    // 告诉grunt当我们在终端输入grunt时需要做些什么
    grunt.registerTask("default", []);
    grunt.registerTask("taskA", ["uglify:taskA"]);
    grunt.registerTask("taskB", ["uglify:taskB"]);
    grunt.registerTask("taskC", ["uglify:taskC"]);
};

当我们需要写法一的功能时，只需要在命令行中输入

grunt taskA

以此类推，当然还可以定义你自己想要实现的功能

---

jshint

//jshint插件的配置信息
jshint: {
    options: {
    //语法规则检查
        jshintrc: ".jshintrc"
    },
    files: ["Gruntfile.js", "src/*.js"]
}

//告诉grunt  加载jshint插件
grunt.loadNpmTasks("grunt-contrib-jshint");

这个没啥好说的，代码查错，可以自己定义查错的规则，对于遵守代码规范是一大利器！
需要一个查错规则文件 .jshintrc
先新建一个txt文件，把需要的规则参数写入，然后另存为.jshintrc（←这是文件名），文件类型选择所有文件，这个文件一定要放在根目录下，也就是跟package.json文件的同一个目录
代码规则参数可参考我的另一篇博客，传送门→http://blog.csdn.net/qq_22267353/article/details/53436291

---

watch

真正实现自动化的是这个插件，原理是，当选择监视的文件发生变化时，就会执行相应的印务，具体的执行哪些操作可以自己定制

 //watch插件配置信息
watch: {
    task: {
        files: ["src/**/*.js"], // 监视src文件夹中所有子文件夹中的所有js文件
        tasks: ["jshint", "uglify"], // 先执行代码查错，然后进行代码压缩
        options: { spawn: false }
    }
}

//告诉grunt  加载watch插件
grunt.loadNpmTasks("grunt-contrib-watch");

接下来展示（ctrl+v）一个自动化的例子，帮助理解

module.exports = function(grunt) {

    // Project configuration.(任务配置，所有插件的配置信息)
    grunt.initConfig({

        //获取 package.json 的信息
        pkg: grunt.file.readJSON("package.json"),

        //获取uglify插件的配置信息  压缩js
        uglify: {

            // 在生成的压缩文件的第一行加上一句说明
            options: {
                // 去掉console.log()
                compress: {
                    drop_console: false
                }
            },

            //src  表示要压缩的文件   dest  表示要生成的文件
            taskA: {
                src: 'src/*.js',
                dest: 'build/main.min.js'
            },
            taskB: {
                files: [
                    { "build/buildA/main.min.js": "src/srcA/*.js" },
                    { "build/buildB/main.min.js": "src/srcB/*.js" }
                ]
            },
            taskC: {
                files: [{
                    expand: true,
                    cwd: "src", // 源文件目录
                    src: "**/*.js", //压缩所有js文件
                    dest: "build" //按原目录结构存放
                }]
            }
        },

        jshint: {
            options: {
                //语法规则检查
                jshintrc: ".jshintrc"
            },
            files: ["src/**/*.js"]
        },

        //watch插件配置信息
        watch: {
            taskA: {
                files: ["src/**/*.js"], // 监视src文件夹中所有子文件夹中的所有js文件
                tasks: ["jshint", "uglify:taskA"], // 先执行代码查错，然后进行代码压缩
                options: { spawn: false }
            },
            taskB: {
                files: ["src/**/*.js"], // 监视src文件夹中所有子文件夹中的所有js文件
                tasks: ["jshint", "uglify:taskB"], // 先执行代码查错，然后进行代码压缩
                options: { spawn: false }
            },
            taskC: {
                files: ["src/**/*.js"], // 监视src文件夹中所有子文件夹中的所有js文件
                tasks: ["jshint", "uglify:taskC"], // 先执行代码查错，然后进行代码压缩
                options: { spawn: false }
            }
        }
    });

    //告诉grunt  加载uglify插件
    grunt.loadNpmTasks("grunt-contrib-uglify");
    grunt.loadNpmTasks("grunt-contrib-jshint");
    grunt.loadNpmTasks("grunt-contrib-watch");

    // 告诉grunt当我们在终端输入grunt时需要做些什么
    grunt.registerTask("default", []);
    grunt.registerTask("taskA", ["watch:taskA"]);
    grunt.registerTask("taskB", ["watch:taskB"]);
    grunt.registerTask("taskC", ["watch:taskC"]);
};

现在，在命令行中输入相应的命令，就可以开启相应的监听任务，一旦监听到文件的改变，就会执行代码查错，代码压缩/合并

如果想要退出监听状态，ctrl+c 就ok

如果想执行压缩或者监听的所有任务，可以直接输入

grunt uglify

从上倒下依次执行所有的代码压缩任务

grunt watch

从上到下依次执行所有的代码监视任务

---