Question

可以自动将html页面上的所有javascripts合并到一个大的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>

由于

Answer 1

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

Answer 2

您可以使用require.js并将其称为：

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

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

有关here

的更多信息

如果您知道使用npm，那么您可以使用不同的包装来获取gulp，grunt（如82Tuskers的答案）或类似的。

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

Answer 3

Gulp可以提供帮助：

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

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

Answer 4

这个对我有效

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>

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

Answer 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

将所有javascript文件合并到一个文件中

6 个答案: