将所有 javascript 文件合并为一个文件答案

【问题标题】：Merge all javascript files to one file将所有 javascript 文件合并为一个文件
【发布时间】：2016-06-29 15:14:22
【问题描述】：

是否可以自动合并 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>

谢谢

【问题讨论】：

Combine multiple JavaScript files into one JS file的可能重复
对于命令行解决方案：全局安装npm install uglify-js -g，然后执行uglifyjs file1.js file2.js -o output.js -c -m

标签： javascript html merge

【解决方案1】：

这个对我有用

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

【讨论】：

【解决方案2】：

grunt-usemin (- https://github.com/yeoman/grunt-usemin) 可以提供帮助。

【讨论】：

谢谢，太好了。这是简单的tutorial

【解决方案3】：

Gulp 可以提供帮助：

您可以查看 gulp 教程并在您的代码中应用。

将所有js文件合并为一个。你可以see here.

【讨论】：

【解决方案4】：

你可以使用require.js这样称呼它：

<script data-main="scripts/main.js" src="scripts/require.js"></script>

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

更多信息here

如果您知道要使用 npm，那么您可以使用不同的包用于 gulp、grunt（如 82Tuskers 的回答）或类似的。

如果你想用一些在线工具来做，你可以使用this，例如。

【讨论】：

【解决方案5】：

如果您使用的是 Java 平台，则可以使用 WRO4J。它可以将所有 JS 合并为一个 JS 文件，将所有 CSS 合并为 1 个 CSS 文件。您也可以根据您的要求将几个 JS 组合成 1 个 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/

【讨论】：

【解决方案6】：

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

【讨论】：