How to compress all js files into one file?

cocos2d-x JavaScript
#1

hi all,

first: I’m very new to javascript,
is there a minified version of this library? if no, how can i minify all js files into one file?

thanks

[Resolved] tool to minimize code
#2

try requirejs?

#3

There are several build.xml files in the cocos2d directory and onther directory. Ant use them to generate minified files of engine, demo or apps with google closure compiler.

So, you can package the engine or your app to single file.

#4

Is there a tutorial somewhere to “compile” your html5 cocos2d app into a single .js file?
Or am I supposed to upload all cocos2d javascript files + the app javascript files online???

#5

I think this is a problem with the current version which prevents it from being compiled, or the build.xml in HelloWorld has not been updated

I just downloaded the latest version from GitHub and ran ANT on the HelloWorld example, and got these errors

Buildfile: /Documents/HTML5/cocos2d-html5-20130109/HelloHTML5World/build.xml

compile:
[jscomp] Compiling 85 file(s) with 40 extern(s)
[jscomp] /Documents/HTML5/cocos2d-html5-20130109/cocos2d/platform/CCConfig.js:280: ERROR - Parse error. Internet Explorer has a non-standard intepretation of trailing commas. Arrays will have the wrong length and objects will not parse at all.
[jscomp] };
[jscomp] ^
[jscomp] 1 error(s), 0 warning(s)

BUILD FAILED
/Documents/HTML5/cocos2d-html5-20130109/HelloHTML5World/build.xml:9: Compilation failed.

#6

I am sorry. I will update them ASAP.

If it is finished, I will post it here.

#7

@Shun Lin

No worries… :wink:

#8

Yes, and there’s also a new version of closure .jar available if you can update. I tested it with my game and it works.

#9

Hi, guys, I have updated all build.xml files in the project. Enjoy it.

Please refer to this commit

#10

Update extension setting, please refer to this commit

#11

I just grabbed the latest version from GitHub, and the HelloWorld example now compiles OK (no errors), but I can’t get the single file version to work.

But HelloWorld will not run when its compiled to a single file.

I copied index.html to index_single_file.html and changed the script that was loaded, so that the html file now looks like this

Cocos2d-html5 Hello World test
Looking at build.xml, it appears to compile everything including cococs2d.

My JS Debugger shows this error.

TypeError: this.config is undefined myApp-HelloWorld.js:1240

#12

It packs all js files exclude cocos2d.js. Because it will speed up page loading.

You still need cocos2d to configure setting and load the single file.

Please take a look in cocos2d.js file

......
window.addEventListener('DOMContentLoaded', function () {
        //first load engine file if specified
        var s = d.createElement('script');
        /*********Delete this section if you have packed all files into one*******/
        // I removed the code which is useless.

        /*********Delete this section if you have packed all files into one*******/
        // You should enable these code when you are using single file app.
        s.src = 'myTemplate.js'; //IMPORTANT: Un-comment this line if you have packed all files into one

        d.body.appendChild(s);
        document.ccConfig = c;
        s.id = 'cocos2d-html5';
        //else if single file specified, load singlefile
    });
......
#13

Thanks.

I make a copy of cocos2d.js > cocos2d-single.js
and in cocos2d-single.js I changed
var c = {
COCOS2D_DEBUG:2, //0 to turn debug off, 1 for basic debug, and 2 for full debug
box2d:false,
chipmunk:false,
showFPS:false,
frameRate:60,
loadExtension:false,
tag:‘gameCanvas’, //the dom element to run cocos2d on
//engineDir:‘…/cocos2d/’,
SingleEngineFile:‘myApp-HelloWorld.js’
// appFiles:[
// ‘src/resource.js’,
// ‘src/myApp.js’//add your own files in order here
//]
};
I also copied index.html> index-single.html and changed the script tag to

and everything works fine.

Thankyou.

If I get time I’ll write a quick tutorial on my Blog about how to compile to single js file.

Thanks again.

Roger

#14

I’m having problems packing the HelloHTML5World.

I’m getting always “Uncaught TypeError: undefined is not a function”

Could you share your files on the folder HelloHTML5World, so I can check the differences?

#15

Just wanted to add this link to a tutorial on packing for distribution:

#16

Hello!
I am having trouble to try this in cocos 3.0.
I ran ant in cocos/tools folder and got the minified file.
After that, I didn’t know exactly where to put it and also didn’t find it in cocos docs.
I tried adding the file to a SingleEngineFile property and commenting jsList and engineDir, as Ray Wenderlich tells us to do with cocos 2.y.
Also, I don’t know exactly what to do with the CCBoot loaded from the index.html. Should I call the minified file instead?

#17

Hi, @leeohaddad

The 2.x way won’t work for 3.0
It’s actually quite simple, just replace the CCBoot in you index.html with the minified file, because everything is in this file.

#18

Hello, @pandamicro

Actually, I already managed to do that part but am still having problems with this subject.
I created another topic, since my doubt is now a little different from this topic’s subject.
Can you take a look there for me?

The link is http://www.cocos2d-x.org/forums/19/topics/55954

#19

I usually use one of the many available Javascript compressors (like http://refresh-sf.com/yui/ or http://www.giftofspeed.com/javascript-compressor/ ) which can take your Javascript files and compress it into one minified Javascript file. I think that fits your needs as well. Hope it helps. Ask me anything if you have questions.