Merge all javascript files to one file

Question

it's possible auto merge all javascripts on html page merge to one large javascript? (same for 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

Possible duplicate of [Combine multiple JavaScript files into one JS file](http://stackoverflow.com/questions/5511989/combine-multiple-javascript-files-into-one-js-file) — Rick, Jun 29 '16 at 15:18
for command-line solution: install `npm install uglify-js -g` globally and then do `uglifyjs file1.js file2.js -o output.js -c -m` — Praveen, Jan 14 '22 at 10:36

score 6 · Answer 1 · answered Jul 12 '18 at 22:59

This one works on me

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");

then all you have to call is the mainhub.js on your header

<script type="text/javascript" src="your/path/mainhub.js" ></script>

score 3 · Accepted Answer · answered Jun 29 '16 at 15:22

3

grunt-usemin (- https://github.com/yeoman/grunt-usemin) could help.

answered Jun 29 '16 at 15:22

trk

2,106
14
20

1

Thank you, it is great. Here is simple [tutorial](https://www.youtube.com/watch?v=gIbfDxF69c8) – Fanda36 Jun 29 '16 at 18:14

score 2 · Answer 3 · edited Mar 16 '18 at 05:48

2

Gulp Can Help :

You can see the gulp tutorial and apply within your code.

Merge all js file into one. you can see here.

edited Mar 16 '18 at 05:48

Rumit Patel

8,830
18
51
70

answered Mar 16 '18 at 04:48

Sahin Hossen

21
4

score 1 · Answer 4 · answered Jan 30 '21 at 11:13

I hack together a script in Nodejs to do similar task

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

Space Peasant · Answer 5 · 2016-06-29T16:16:46.057

0

You can use require.js and call it like this:

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

And then in main.js you call all your scripts.

More info on that here

If you know to use npm then you can use different packes for gulp, grunt (like in 82Tuskers answer) or similar.

And if you want to do it with some online tools you can use this for example.

edited Jun 29 '16 at 16:16

answered Jun 29 '16 at 15:33

Space Peasant

287
1
3
16

score 0 · Answer 6 · answered Sep 22 '20 at 11:32

If you are using Java platform you can use WRO4J. It can combine all JS into one JS file and all CSS into 1 CSS file. You can also combine few JS into 1 JS and few other JS into another combined JS based on your requirement.

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.

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

Merge all javascript files to one file

6 Answers6