Grunt 之 RequireJS

 RequireJs 提供了一个打包工具 r.js，可以将相关的模块打包为一个文件。相关说明：http://www.requirejs.org/docs/optimization.html

• 将相关的脚本模块整合为单个脚本文件，然后默认使用  UglifyJS 进行紧缩，或者在使用 java 的时候，使用  Closure Compiler 处理。
• 还可以通过 @import 自动内联相应的样式，并且删除注释来优化 CSS

虽然可以通过命令行来使用这个打包工具，但是在 Grunt 中也提供了相应的插件来自动完成这个任务。

1. 安装

地址：https://github.com/gruntjs/grunt-contrib-requirejs 

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

 控制台输出

[email protected] node_modules\grunt-contrib-requirejs
└── requirejs@2.1.20

在 Gruntfile.js 文件中，使用 grunt.loadNpmTasks 来加载这个任务。

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

 

 2. 配置

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    
    copy: {
      dev: {
        files: [
        {expand: true, src: ['src/**/*.js'], dest: 'public/js', filter: 'isFile'}
        ]
      }
    },

    requirejs: {
      compile: {
        options: {
          name: "main",
          baseUrl: "src/js",
          mainConfigFile: "main.js",
          out: "public/js/main.js"
        }
      }
    }
    
  });

  // 加载包含 "copy" 任务的插件。
  grunt.loadNpmTasks('grunt-contrib-copy');

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

  // 默认被执行的任务列表。
  grunt.registerTask('default', ['uglify']);

};

 compile 是我们为任务所起名称，options 中是相应的配置。

• baseUrl, 类似于 requirejs 中的 baseUrl 参数，用来定义脚本的参照地址。
• mainConfigFile: requirejs 的配置文件，工具通过它来获取 requirejs 的配置信息。它的地址要相对于 baseUrl 地址。
• name, 入口模块的地址，也就是我们的入口模块，这里是模块名称，所以不需要 .js 的扩展名，地址也要相对于 baseUrl 地址。如果你使用了 almond 进行压缩，almond 相当于入口模块了，这里就是 almond 的地址。也不需要 .js 扩展名。
• out, 输出的结果，这个地址与 baseUrl 没有关系，是相对于 Gruntfile.js 的地址
• include 需要包含的模块名称，如果使用了 almond，入口已经变成 almond 了，就必须要包含原始的入口模块名称。

2.1 直接使用 r.js

在使用这个紧缩任务的时候，默认是不包含 require.js 库的，所以有两种用法。

第一种用法，只紧缩我们定义的模块，这样紧缩出来的结果中，会包含 require 过的第三方库，比如 jquery, angularjs 等等，但是不会包含 requirejs 本身。所以，我们需要在页面中先引用 require.js 库，然后引用我们紧缩的结果。

requirejs: {
      compile: {
        options: {
          name: "main",
          baseUrl: "src/js",
          mainConfigFile: "main.js",
          out: "public/js/main.js"
        }
    }
}

 

第二种用法，直接将 require.js 也包含进来，这样，只需要在页面中引用紧缩的结果即可。

先通过 paths 给 require.js 起一个名称，然后在 include 中包含这个模块。

    //Set paths for modules. If relative paths, set relative to baseUrl above.
    //If a special value of "empty:" is used for the path value, then that
    //acts like mapping the path to an empty file. It allows the optimizer to
    //resolve the dependency to path, but then does not include it in the output.
    //Useful to map module names that are to resources on a CDN or other
    //http: URL when running in the browser and during an optimization that
    //file should be skipped because it has no dependencies.
    paths: {
        "requireLib": "lib/require"
    },

    include: ["requireLib"],

 

 

2.2 使用 almond 

在使用 almond 的时候，其实更加简单了。

我们将 name 设置为 almond 的路径，然后使用 include 将我们实际的入口模块包含进来就可以了。

这里需要注意一点，almond 是一个独立的脚本库，你需要自己将这个库下载来下，直接使用 bower 就可以。然后，设置 name 为相对于 baseUrl 的 almond 库路径即可。

requirejs: {
  compile: {
    options: {
      baseUrl: "tmp",
      mainConfigFile: "tmp/main.js",
      include: "main",
      name: "../bower_components/almond/almond",
      out: "tmp/<%= pkg.name %>.js"
    }
  }
}

 

 

注意，上面的官方实例中没有使用 include 包含实际的入口。结果就是不会执行的你的脚本。

关于 almond 的限制

• 将所有的模块合并到单个文件，不会再有动态加载。
• 所有的模块都拥有唯一的标识，以及通过 define() 来说明的模块所依赖的模块说明数组，requirejs 优化器通过它来检查模块关系。
• 只能使用一次 requirejs.config() 调用
• requirejs.config 需要包含在输出中，这对于 map config 很重要
• 不支持 var require = {} 来传递配置参数
• 不支持  RequireJS multiversion support/contexts.
• 不要使用 require.toRul() 或者 require.nameToUrl()
• 不要使用 packages/packagePaths config. 

仍然支持的特性：

• 使用相对路径的依赖
• define('id', {}) 定义
• define(), require() 和 requirejs() 调用
• 将插件合并到优化之后的文件中，在优化之后可以同步访问这些资源。

参考资料

requirejs：杏仁的优化(almond)