logo标签列表

将所有JavaScript文件合并成一个文件

javascripthtmlmerge
7

是否有可能将HTML页面中的所有JavaScript文件合并成一个大的JavaScript文件？（CSS也是同样的情况）

例如：

<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>

谢谢

2
可能是 将多个 JavaScript 文件合并为一个 JS 文件 的重复问题。 - Rick
1
针对命令行解决方案：全局安装 npm install uglify-js -g，然后执行 uglifyjs file1.js file2.js -o output.js -c -m。 - Praveen
6个回答
6
这个对我有用。
主要的中央控制器.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");

那么你只需要在头部调用mainhub.js即可。
<script type="text/javascript" src="your/path/mainhub.js" ></script>
3
1
谢谢，太棒了。这是一个简单的教程。 - Fanda36
2

Gulp可以帮助你：

你可以查看gulp教程并将其应用到你的代码中。

将所有js文件合并为一个。你可以在这里查看。

1

我用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);    
}}

You Can Change the comp_list accoring to Your needs

0
你可以使用 require.js 并像这样调用它：
<script data-main="scripts/main.js" src="scripts/require.js"></script>

然后在 main.js 中调用所有脚本。

更多信息请参见 此处。

如果您知道如何使用 npm，则可以使用不同的包来进行 gulp、grunt（例如 82Tuskers 的回答）或类似操作。

如果您想要使用一些在线工具来完成此操作，例如 这个。

0
如果您正在使用Java平台，可以使用WRO4J。它可以将所有JS合并为一个JS文件，将所有CSS合并为1个CSS文件。您还可以根据需要将几个JS合并为一个JS，将其他几个JS合并为另一个组合JS。
配置示例：
<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>

您可以像上面那样创建多个组，并根据需要使用。Grail和Groovy都有可用的插件，但我没有使用过。

https://wro4j.readthedocs.io/en/stable/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接