Grunt学习笔记【6】---- grunt-contrib-requirejs插件详解

本文主要讲如何使用Grunt实现RequireJS文件压缩。

一说明

ES6出来前，RequireJS是JavaScript模块化最常用的方式之一。对于使用RequireJS构建的项目，要实现打包压缩，需要使用grunt-contrib-requirejs插件。

二安装

npm install grunt-contrib-requirejs --save-dev

三加载任务

grunt.loadNpmTasks('grunt-contrib-requirejs');

四配置

在Gruntfile.js的配置对象中添加requirejs属性，该属性下可以配置多个目标任务对象，每个目标任务对象包含一个options对象。

注意：这个options的属性很多和requireJS的requirejs-config.js配置类似，但要注意这块配置是用于Grunt打包的，requirejs-config.js是用于非压缩模式下加载requireJS项目的。同一个项目中，这两个的配置一般情况基本一致，但有时也会有差别。但无论是那个，都要确保各个模块中依赖的模块地址都能找到，即baseUrl、paths、shim等配置必须确保所有模块中依赖的模块地址正确。

options对象有如下属性：

1）appDir

此处是文件Gruntfile的相对位置。

2) baseUrl

baseUrl 为加载文件的默认路径，不写默认路径用grunt打包的时候很容易报错找不到文件。

该路径相对于appDir，代表要查找js文件的起始文件夹，下文所有文件路径的定义都是基于这个baseUrl的。

例如1：设置为 ./src 是相对于index.html的。

例如2：如果appDir设置为‘./app’，baseUrl设置为‘src’，则实际默认路径是‘./app/src’。

3) name

要打包的js入口文件地址和名字。

注意：该地址是相对于baseUrl的。

4) optimize

是否进行混淆优化，可选值：‘uglify’、‘none’。默认值是none。

5) paths

该属性和RequireJs的配置路径项类似，就是对requireJS模块中依赖的地址进行配置。

    "paths" : {
        'cModule' : 'src/c',
        'jquery' : 'lib/jquery'
    },

6) shim

该属性和RequireJS的配置项一样，都是为没有使用RequireJS的define()方法声明依赖关系的第三库，来声明各个第三方库的依赖和对外的全局变量。

shim是一个对象, Key 值(cate) 与上边paths中定义的名字一样.每个属性对象有deps和exports两个属性，分别定义该库的依赖和对外全局变量。

例如：AngularJS依赖jquery，AngularJS对外的全局变量是angular；jquery对外的全局变量是$.

     "paths" : {
         'cModule' : 'src/c',
         'jquery' : 'lib/jquery',
         'angular' : 'lib/angular'
     },
     "shim" : { // shim 中定义一个JSON对象, Key 值(cate) 与paths中定义的名字一样
         'jquery' : { // shim中的JSON对象有两个属性: deps,exports
             'deps' : [], // deps 为数组,表示其依赖的库
             'exports' : '$' // exports 表示输出的对象名(标志该第三方库的全局变量标志)
         },
         'angular' : {
             'deps' : ['jquery'],
             'export' : 'angular'
         }
     }

7) out

设置压缩后的文件地址和文件名。

例如：‘dist/test.min.js’。

8）removeCombined

如果为true，将从输出目录中删除已合并的文件。注意：该配置只有在设置了dir情况下生效。

9）dir

保存输出的路径，如果只输出一个文件，可以使用out接口。如果输出多个文件，都会放在dir下。

五实战

下边是一个实例项目。

5.1 整体项目目录如下：

5.2 Gruntfile.js配置如下：

 module.exports = function (grunt) {
     grunt.initConfig({
         // 清理空文件夹
         clean: {
             foo1: {
                 src: ['dist/*']
             }
         },
         requirejs: {
             min: {
                 options: {
                     baseUrl: './',
                     optimize: 'none',
                     name: 'build',
                     out: 'dist/test.min.js',
                     // dir: 'dist',
                     removeCombined: true,
                     paths: {
                         cModule: 'src/c',
                         jquery: 'lib/jquery',
                         angular: 'lib/angular'
                     },
                     shim: {
                         jquery: {
                             deps: [],
                             exports: '$'
                         },
                         angular: {
                             deps: ['jquery'],
                             exports: 'angular'
                         }
                     },
 
                 }
             }
         },
 
     });
 
     grunt.loadNpmTasks('grunt-contrib-requirejs');
     grunt.loadNpmTasks('grunt-contrib-clean');
 
     // 默认被执行的任务列表。
     grunt.registerTask('default', [
         'clean',
         'requirejs'
     ]);
 
 };

5.3 入口文件build.js代码如下：

说明：入口文件必须是一个require()方法模块，而不能是一个define定义模块。不然会报错。

 require([
     'src/b'
 ]);

5.4 入口文件中加载的b.js文件代码如下：

 define(['src/a', 'cModule/c', 'src/jq/jq', 'src/ng/ng'], function (a, c, jq, ng) {
     window.console.log(a.name);
     window.console.log(c);
     window.console.log(jq);
     window.console.log(ng);
 
     var b = 'this is a log!'
     return b;
 });

5.5 其它各个文件说明：

jq.js文件用于引入jquery库；

ng.js文件用于引入AngularJS库；

其它各个文件都是简单的RequireJS模块文件。

六实战示例源码

上边实战示例源码获取地址：

https://gitee.com/bangbangwa/grunt/blob/master/grunt-contrib-requirejs-test.rar

参考资料&内容来源：

Grunt官网：https://www.npmjs.com/package/grunt-contrib-requirejs

编程网志：http://www.codeweblog.com/requirejs-angularjs-grunt-contrib-requirejs-%E7%BA%AF%E6%89%8B%E6%95%B2-%E5%B9%B2%E8%B4%A7/

reuqireJS官网：http://www.requirejs.cn/