最近有一个项目使用了 requirejs 来解决前端的模块化，但是随着页面和模块的越来越多，我发现我快要hold不住这些可爱的js文件了，具体表现在每个页面都要设置一堆 requirejs 的配置( baseUrl ， paths 之类的)。

不知谁说过，一些事重复做了三次，就该考虑一下自动化了，于是我小心翼翼的掏出了我的 grunt 。

我们得使用 grunt-contrib-requirejs 这个插件来实现如上所说的自动化功能，这个就是根据 r.js 封装的 grunt 插件。

安装 grunt-contrib-requirejs

配置 Grantfile

首先我们来看下项目目录

src 是每个页面的依赖文件

modules 和 lib 是一些模块和库

dist 是合并压缩后的文件

在 Gruntfile 中首先得到需要处理的文件列表，并创建一个空对象，用来装requirejs的配置

然后遍历这个文件列表数组，得到js文件的名称：

接下来为每个js文件配置一个任务，任务名称就是js的文件名称：

接着初始化 grunt 配置并加载并注册任务

到这里 requirejs 的配置部分就结束了，在命令行输入 grunt require 就会看到 static/js/dist 目录下面有东西蹦出来了，而且全部都是合并后并压缩好的。

在html页面中只需要：

然后加载和注册 asset-cache-control 插件

接着在命令行敲 grunt cache 就会发现 index.html 中的 script 标签加上了查询字符串。

对每个js文件配置 cache 的任务：

检测每个文件的变化，自动执行任务

用到 grunt-contrib-watch 这个官方组件

在 grunt.initConfig 中配置：

这样，当你修改 static/js/src/ 和 static/js/modules/ 下的所有js文件时，就会执行 requirejs 和 cache 任务。

完整配置清单

另外，浏览器加载一个大文件比加载n个小文件的效率要高很多，所以模块的合并对性能也有很大的提高。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。