将所有 javascript 文件合并为一个文件
[英]Merge all javascript files to one file
问题描述
it's possible auto merge all javascripts on html page merge to one large javascript?
有可能将 html 页面上的所有 javascript 自动合并到一个大的 javascript 中吗？ (same for css) （CSS 相同）
for example:例如：
<html>
<head></head>
<body>
<script src="/extern/jquery/jquery-2.1.3.min.js"></script>
<script src="/extern/bootstrap/js/bootstrap.min.js"></script>
<script src="/extern/form_validator/jquery.form-validator.min.js"></script>
<script src="/extern/moment/moment.js"></script>
<script src="/js/jsIndex.js"></script>
</body>
</html>
Thanks谢谢
6 个解决方案
解决方案1
5 2018-07-12 22:59:57
This one works on me这个对我有用
mainhub.js主枢纽.js
function callAll(jsfiles) {
var src = document.createElement("script");
src.setAttribute("type", "text/javascript");
src.setAttribute("src", jsfiles);
document.getElementsByTagName("head")[0].appendChild(src);
}
callAll("your/path/to/a/jsfile1.js");
callAll("your/path/to/a/jsfile2.js");
callAll("your/path/to/a/jsfile3.js");
then all you have to call is the mainhub.js on your header那么你只需要调用标题上的 mainhub.js
<script type="text/javascript" src="your/path/mainhub.js" ></script>
解决方案2
3 已采纳 2016-06-29 15:22:51
grunt-usemin (- https://github.com/yeoman/grunt-usemin ) 可以提供帮助。
解决方案3
1 2018-03-16 04:48:40
解决方案4
0 2016-06-29 15:33:19
You can use require.js and call it like this:您可以使用require.js并像这样调用它：
<script data-main="scripts/main.js" src="scripts/require.js"></script>
And then in main.js you call all your scripts.然后在main.js调用所有脚本。
If you know to use npm then you can use different packes for gulp, grunt (like in 82Tuskers answer) or similar.如果您知道使用 npm，那么您可以为 gulp、grunt（如 82Tuskers 的回答）或类似使用不同的包。
And if you want to do it with some online tools you can use this for example.如果你想用一些在线工具来做，你可以使用它。
解决方案5
0 2020-09-22 11:32:20
If you are using Java platform you can use WRO4J.如果您使用的是 Java 平台，则可以使用 WRO4J。 It can combine all JS into one JS file and all CSS into 1 CSS file.它可以将所有 JS 合并为一个 JS 文件，将所有 CSS 合并为 1 个 CSS 文件。 You can also combine few JS into 1 JS and few other JS into another combined JS based on your requirement.您也可以根据您的要求将几个 JS 组合成 1 个 JS，将其他几个 JS 组合成另一个组合 JS。
configuration example配置示例
<group name="base_css">
<css>/_ui/desktop/common/css/jquery.colorbox-1.3.16.css</css>
<css>/_ui/desktop/common/css/jquery.ui.autocomplete-1.8.18.css</css>
<css>/_ui/desktop/common/css/jquery.bt-0.9.5.css</css>
</group>
<group name="my_js">
<!-- Custom ACC JS -->
<js>/_ui/desktop/common/js/acc.common.js</js>
<js>/_ui/desktop/common/js/acc.cms.js</js>
</group>
You can create multiple groups like above and use as per your requirement.您可以像上面一样创建多个组并根据您的要求使用。 There are plugins available for grail and groovy but I have not used those.有可用于 grail 和 groovy 的插件，但我没有使用过这些插件。
https://wro4j.readthedocs.io/en/stable/ https://wro4j.readthedocs.io/en/stable/
解决方案6
0 2021-01-30 11:13:30
I hack together a script in Nodejs to do similar task我在 Nodejs 中编写了一个脚本来完成类似的任务
var fs = require('fs'); function Do_Append(main,append_file){ fs.readFile(append_file,function(err,data){ if(err) throw err; console.log("Read file"+append_file); fs.appendFile(main,'\\n'+data,function(err){ if (err) throw err; }) console.log("Done "+append_file); }) } var comp_list={ 'combine.js':['1.js','2.js','3.js'], 'combine.css':['3.css','2.css','1.css'] } for(var key in comp_list){ for(var idx of comp_list[key]){ Do_Append(key,idx); }}
comp_list accoring to Your needs
您可以根据需要更改comp_list
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.