grunt 使用

1. 安装 nodeJS

2. 全局安装 grunt 和 grunt-cli

3. 创建文件夹grunt-demo，进入文件夹内部创建 package.json 文件 (npm init or npm init -y);

4.grunt-demo文件夹内包含三个文件加和两个文件，如下图

image.png

5. 在项目中安装 grunt 开发依赖

npm install grunt --save-dev   // 开发依赖项（-D）

6. 配置gruntfile.js

// 包装函数
module.exports = function(grunt) {
    // 所用插件的配置信息
    grunt.initConfig({
        // 获取package.json文件信息
        pkg: grunt.file.readJSON('package.json'),
    });
    // 告诉grunt 在cmd终端输入grunt，要执行什么插件（先后顺序）
    grunt.registerTask('default', []);
};

7. grunt插件介绍

grunt-contrib-jshint —— javascript 语法错误检查；
grunt-contrib-watch —— 实时监控文件变化、调用相应的任务重新执行；
grunt-contrib-clean —— 清空文件、文件夹；
grunt-contrib-uglify —— 压缩 javascript 代码
grunt-contrib-copy —— 复制文件、文件夹
grunt-contrib-concat —— 合并多个文件的代码到一个文件中
karma —— 前端自动化测试工具

8. 使用uglify插件（压缩javascript代码）

npm install grunt-contrib-uglify -D

安装完成之后，开始我们的操作
首先在src下创建test.js

(function() {
    function add(a, b) {
        console.log(a + b);
    }
    add(10, 20);
})(window);

然后在 grunt.initConfig 方法中配置 uglify 的配置参数

grunt.initConfig({
   // 获取 package.json 文件信息
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
        options: {},
        build: {
            src: 'src/test.js',
            dest: 'build/<%=pkg.name%>_<%=pkg.version%>.min.js'  // 在 build 文件夹下输出 package.name_package.version.min.js 的压缩文件
        }
    },
});

"build" 中配置了源文件和目标文件。即规定了要压缩谁？压缩之后会生成谁？注意，我们这里将目标文件的文件名通过pkg的name和version来命名。

第三步在 grunt.initConfig 方法之后，要让 grunt 去加载这一个插件去使用

grunt.initConfig({
    // 获取 package.json 文件信息
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
        // options: {
        // },
        build: {
            src: 'src/test.js',
            dest: 'build/<%=pkg.name%>_<%=pkg.version%>.min.js'
        }
    },
});
// 告诉grunt要使用的插件是 grunt-contrib-uglify;
grunt.loadNpmTasks('grunt-contrib-uglify');
// 告诉grunt 在cmd终端输入grunt，要执行什么插件（先后顺序）
grunt.registerTask('default', ['uglify']);

最后在 cmd 窗口输入 grunt，即可完成 src/test.js 的文件压缩，并在 build 中生成压缩文件。如下图

image.png

9. 使用jshint插件（检查javascript语法错误）

npm install grunt-contrib-jshint -D

安装完成之后，配置如下：

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
        build: {
            src: 'src/test.js',
            dest: 'build/<%=pkg.name%>_<%=pkg.version%>.min.js'
        }
    },
    jshint: {
        build: ['gruntfile.js', 'src/*.js'],
        options: {
            jshintrc: '.jshintrc'
        }
    }
});
// 告诉grunt要使用的插件是grunt-contrib-uglify;
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint'); // 检验js
// 告诉grunt 在cmd终端输入grunt，要执行什么插件（先后顺序）
grunt.registerTask('default', ['jshint', 'uglify']);

"options"中描述了要通过怎么的规则检查语法，这些规则的描述文件就保存在网站根目录下的一个叫做".jshintrc" 的文件中。因此我们在网站的根目录下面添加上这个文档，并且填写上一下内容。

.jshintrc文件中代码的格式也要遵守严格的json语法，否则无效。

{
    "boss": false,
    "curly": true,
    "eqeqeq": true,
    "eqnull": true,
    "expr": true,
    "immed": true,
    "newcap": true,
    "noempty": true,
    "noarg": true,
    "undef": true,
    "regexp": true,
    "browser": true,
    "devel": true,
    "node": true
}

使用插件的时候，没有先后顺序，但是在执行任务的时候，有先后顺序，聪明人都知道需要先检验 js 是否正确，正确才对代码进行压缩。所以要先执行 jshint ，然后执行 uglify。

然后我们故意在test.js文件中写入两个错误：

(function(window) {
    function add(a, b) {
        console.log(a + b)  // 缺少分号
        a = a + c; // c is not defined
    }
    add(10, 20);
})(window);

执行 grunt，结果如下图

image.png

jshint 很清楚的识别出了这两个错误。而且 jshint 错误之后，其后面的 uglify 就没有再继续执行了。

我们修改完这些错误，在此执行grunt命令，结果没有提示错误，而且jshint和uglify都顺利执行了。

image.png

10. 使用 watch 插件

npm install grunt-contrib-watch -D

配置 watch：

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
        build: {
            src: 'src/test.js',
            dest: 'build/<%=pkg.name%>_<%=pkg.version%>.min.js'
        }
    },
    jshint: {
        build: ['gruntfile.js', 'src/*.js'],
        options: {
            jshintrc: '.jshintrc'
        }
    },
    watch: {
        build: {
            files: ['src/*.js', 'src/*.css'],
            task: ['jshint', 'uglify'],
            options: { spawn: false }
        }
    }
});
// 告诉grunt要使用的插件是grunt-contrib-uglify;
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint'); // 检验js
grunt.loadNpmTasks('grunt-contrib-watch');
// 告诉grunt 在cmd终端输入grunt，要执行什么插件（先后顺序）
grunt.registerTask('default', ['jshint', 'uglify', 'watch']);

执行 watch，如下图：

image.png