最近有一个项目使用了<代码> requirejs> requirejs> baseUrl ,<代码>路径>
不知谁说过,一些事重复做了三次,就该考虑一下自动化了,于是我小心翼翼的掏出了我的<代码>繁重。
我们得使用<代码> grunt-contrib-requirejs 这个插件来实现如上所说的自动化功能,这个就是根据<代码> r。js代码封装的<代码>繁重>
安装<代码> grunt-contrib-requirejs
npm我——save-dev grunt-contrib-requirejs
配置<代码> Grantfile
首先我们来看下项目目录
<代码> src>
<代码>模块/代码>和<代码>自由>
<代码> dist>
在<代码> Gruntfile>
var=grunt.file.expand文件(“静态/js/src/* . js”);
var requireOptions={};
然后遍历这个文件列表数组,得到js文件的名称:
文件。forEach(函数(文件){
var filenamelist=file.split (“/?;
var num=filenamelist.length;
var文件名=filenamelist [num - 1] .replace (/\ . js/美元,”);
}
接下来为每个js文件配置一个任务,任务名称就是js的文件名称:
文件。forEach(函数(文件){
requireOptions(文件名)={
选择:{
baseUrl:“静态/js ',
道路:{
jquery:“lib/jquery.min”,
lrz:“lib/lrz.all.bundle”,
zepto:“lib/zepto.min”,
ajax:“模块/ajax”,
验证器:“模块/验证器”,
页面:“模块/混合/to_page”,
对话框:“模块/混合/toggle_login_dialog”,
}，
optimizeAllPluginResources:没错,
名称:' src/' +文件名,
:“静态/js/dist/?文件名+ . js”
}
};
}
之前
接着初始化哼哈<代码> 配置并加载并注册任务
grunt.initConfig ({
requirejs: requireOptions
}）
grunt.loadNpmTasks (“grunt-contrib-requirejs”);
咕哝。registerTask(“需要”,[' requirejs ']);
之前
到这里<代码> requirejs> 繁重要求> 目录下面有东西蹦出来了,而且全部都是合并后并压缩好的。
在html页面中只需要:
& lt;脚本src=" https://www.yisu.com/zixun/static/js/require.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/static/js/dist/index.js "祝辞& lt;/script>
就能成功加载了。
<>强增加js文件的版本号
浏览器有时会对加载过的js或css进行缓存,如果你的某些js依赖发生改变,那么就可能发生错误,解决办法是在文件后面增加查询字符串,例如<代码> a.js& # 63; v=dsd712sd
那么如何控制版本,首先我们肯定想到用<代码>新日期()>
那么如何自动解决版本号的问题,我们可以用到<代码> asset-cache-control 这个打杂的插件
首先安装:
npm我——save-dev asset-cache-control
<代码> asset-cache-control>
grunt.initConfig ({
缓存:{
演示:{
assetUrl:“js/demo.js ',
tmp(“替换”):
}
}
})
注意的是:html文件中需要引入<代码> js/demo.js
