How do I minify my JS game files?

[Gamma]

I am currently using the Phaser project template located on Github. I tried to search online for a way to minify my game files, yet I've ran into pages that talk about using 'GruntJS'. I am currently not familiar with the javascript task runner. Can anyone give me links to tutorials on how to minify phaser games? Or can anyone post a detailed description on how to do so? I would appreciate it greatly. 

[Heppell08]

Jscompress.com

Just copy and paste. Simple as that

[AlexArroyoDuque]

I use this generator for my projects:

https://github.com/julien/generator-phaser

 

Have a task to create the minified version .

[Heppell08]

Just copy the whole folder into a new folder, use the site and minify the new version on the website. Its as simple as that.

Aslong as the js files are minified then the folders and other stuff are irrelevant.

The site is as simple as copy the file, press compress, copy the compressed js text and paste back to the original js and save it.

That's the minified version.

Copy the whole folder in together and it will minify the whole thing in one go.

[Heppell08]

Also a sidenote:

I've used the site for minifying js files WITH states like boot, preload and main menu etc. All I minified was my actual game file and preload file and the game works perfectly fine. Just incase there was a possible worry about minifying with state like set ups etc.

[zajd]

I've gone one step further than minifying and run it through the closure compiler provided by Google and it works just fine.

[Heppell08]

@zajd

Nice looks pretty interesting. Might take a look at that

[Gamma]

Thank you all for your help.

[Secretmapper]

@zajd I never got it working with compiler. The SAT reference broke (granted I used Advanced Compression)

[v0van1981]

google closure compiler:

java -jar compiler.jar --charset UTF-8 --compilation_level ADVANCED_OPTIMIZATIONS --js src.js --js_output_file out.js --externs phaser.min.js 2>NUL

[eguneys]

You can use requirejs optimizer, also take a look at my generator for phaser, it will optimize your phaser project for you with single command. https://github.com/eguneys/generator-phaserjs

[Ezelia]

Grunt is very simple.

just follow the getting started guide here : http://gruntjs.com/getting-started

 

then add a minification task

 

the plugin for minification is here https://github.com/gruntjs/grunt-contrib-uglify


it'll take you some minutes, and save you precious time for further compilations.

 

[indextwo]

I realise this thread is super old, but I wanted to throw my two cents in, because a) I hate grunt, and b) the first time I tried a standard uglify call, it failed and broke everything.

For a while now I've used a free GUI tool called Koala (because I'm a sucker for a nice, simple GUI) for compressing CSS & JS in websites. It occurred to me to try it with my first Phaser game, but I wasn't holding out that much hope, because my game comprised 10 states, 18 prefabs, 2 plugins, and for the hell of it I threw in a couple of extra JS files I was using for the overall page. The first time I ran it, it failed (boo!), but then I selected the Harmony (ES6+) option in Koala, and it compiled everything successfully, and the game ran perfectly.

I've attached a screenshot of my Koala settings. I created a single `site.js` file, and you use a proprietary syntax in that to include all the relevant JS files; e.g.:

// @koala-append "mywebsite.js"
// @koala-append "plugins/Sound.js"
// @koala-append "states/BootState.js"
// @koala-append "states/GameState.js"
// etc. etc.

Then just select your `site.js` file, hit Compile, and BOOM! All of your JavaScript files are compiled into a single file, with all the comments & whitespace removed, all the variables renamed, and all the other uglifying features you come to expect (as Koala makes use of UglifyJS).