详细说明如何使用grunt完成requirejs的合并压缩和js文件的版本控制

最近，一个项目使用requirejs来解决前端模块化。然而，随着页面和模块数量的增加，我发现我几乎无法容纳这些可爱的js文件，这表明每个页面都必须设置一堆requirejs配置(baseUrl、路径等)。

不知道是谁说做了三遍某件事就要考虑自动化，于是我小心翼翼的拿出了我的呼噜声。

我们必须使用grunt-contrib-requires js插件来实现上面提到的自动化功能，这是根据r.js封装的grunt插件

安装咕噜声-贡献-要求

NPM I-save-dev grunt-contrib-required js配置Grantfile

首先，让我们看看项目目录

Src是每页的依赖文件

模块和库是一些模块和库

Dist是合并的压缩文件

在咕噜文件中，首先获取要处理的文件列表，并创建一个空对象来安装requirejs配置

var files=grunt . file . expand(' static/js/src/*)。js’)；var require options={ }；然后遍历这个文件列表数组，得到js文件的名称：

files.forEach(函数(文件){ var file name list=file . split('/')；var num=filenamelist.lengthvar filename=filename list[num-1]。替换(/\。js$/，' ')；}接下来，为每个js文件配置一个任务。任务名是js的文件名：

files . foreach(function(file){ require options[filename]={ options : { baseerls : ' static/js '，path : { jquery : ' lib/jquery . min '，lrz: 'lib/lrz.all.bundle '，zepto: 'lib/zepto.min '，ajax: 'modules/ajax '，validator : ' modules/validator '，page: 'modules/mixins/tojs ' } }}然后初始化grunt配置，加载并注册任务

grunt . initconfig({ require js : require options })grunt . loadnpmtasks(' grunt-contrib-require js ')；grunt.registerTask('require '，[' require js '])；至此，requirejs的配置部分结束。在命令行中输入grunt require，你会看到在static/js/dist目录下弹出了一些东西，它们都被合并和压缩了。

在html页面中，您只需要：

脚本src=' http 3360 static/js/require . js '/script脚本src=' http 3360 static/js/dist/index . js '/脚本可以成功加载。

增加js文件的版本号

浏览器有时会缓存加载的js或css。如果您的一些js依赖项发生变化，可能会出现错误。解决方法是在文件后添加一个查询字符串，比如a.js？v=dsd712sd

那么如何控制版本呢，首先我们肯定会想到用新的Date()，但是如果每次发布的时候都重新加载浏览器(虽然有些文件根本没变)，难免会造成浪费。正确的方案是根据文件内容生成MD5值作为版本号，这样当文件不变时，哈希也不会变。

那么如何自动解决版本号的问题，我们可以使用grunt插件资产缓存控制

首先安装：

NPMI-保存-开发资产-缓存-控制资产-缓存-控制的用法很简单，只需设置一个源文件，然后设置html文件的路径

grunt . init config({ cache : { demo : { assetur l 3360 ' js/demo.js '，tmp3360 ['demo.html']})注意：需要将JS/demo . JS引入到html文件中

编写src=' js/demo . js '/脚本，然后加载并注册资产缓存控制插件

grunt . loadnpmtasks(' asset-cache-control ')；grunt.registerTask('cache '，[' cache '])；然后，通过在命令行上键入grunt cache，您会发现查询字符串被添加到index.html的脚本标记中。

脚本src='js/demo.js？t=92e 26 c5d '/为每个js文件配置缓存的任务编写脚本：

var files=grunt。文件。展开(' static/js/src/*).js’)；var cacheOptions={ }；files.forEach(函数（文件){ var文件名列表=文件。split('/')；var num=filename list . length var filename=filename list[num-1].替换(/\。js$/，' ')；cacheOptions[filename]={ asset ur l : ' static/js/dist/' filename ' .js '，文件： { ' tmp ' :[文件名]。PHP ']} })；检测每个文件的变化，自动执行任务

用到咕噜-贡献-观察这个官方组件

在grunt.initConfig中配置：

观看： { file : [' static/js/src/* .js '，' static/js/modules/* .js']，tasks: ['requirejs '，' cache']，options: { spawn: false }}这样，当你修改静态/js/src/和静态/js/模块/下的所有射流研究…文件时，就会执行requirejs和躲藏任务。

完整配置清单

模块。export=function(grunt){ var files=grunt。文件。展开(' static/js/src/*).js’)；var需要选项={ }；var cacheOptions={ }；files.forEach(函数（文件){ var文件名列表=文件。split('/')；var num=filename list . length var filename=filename list[num-1].替换(/\。js$/，' ')；需要选项[filename]={ options : { base URL : ' static/js '，path : { jquery : ' lib/jquery。min '、lrz: 'lib/lrz.all.bundle '、zepto: 'lib/zepto.min '、ajax: 'modules/ajax '、validator 3360 ' modules/validator '、page : ' modules/mixins/to _ page '、dialog : js ' } } cacheOptions[filename]={ assetur l : ' static/js/dist/' filename ' .js '，文件： { ' tmp ' :[文件名]。PHP ']} })；咕噜。init config({ require js : require options，cache: cacheOptions，watch : { file : [' static/js/src/*).js '，' static/js/modules/* .js']，tasks: ['requirejs '，' cache']，options : { spawn : false } } })；咕噜。loadnpmtasks(' asset-cache-control ')；咕噜。loadnpmtasks(' grunt-contrib-required js ')；咕噜。load NPM tasks(' grunt-contrib-watch ')；grunt.registerTask('require '，['requirejs '，' cache '])}；另外，浏览器加载一个大文件比加载n个小文件的效率要高很多，所以模块的合并对性能也有很大的提高。

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