1. 安装

地址：

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

控制台输出

grunt-contrib-requirejs@0.4.4 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 的地址。也不需要 .js 扩展名。

out, 输出的结果，这个地址与 baseUrl 没有关系，是相对于 Gruntfile.js 的地址

include 需要包含的模块名称，如果使用了 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

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

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

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

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 需要包含在输出中，这对于很重要

不支持 var require = {} 来传递配置参数

不支持 .

不要使用 require.toRul() 或者 require.nameToUrl()

不要使用 .

仍然支持的特性：

使用相对路径的依赖

define('id', {}) 定义

define(), require() 和 requirejs() 调用

将插件合并到优化之后的文件中，在优化之后可以同步访问这些资源。

参考资料

转载地址：http://vsxsx.baihongyu.com/

你可能感兴趣的文章