How to concatenate/minify your code

[Orbital Game Studios]

Hello All,

 

I wrote a walk through on how to setup Grunt to automatically concatenate/minify your phaser game so you can be ready for testing/deployment.

 

Take a look at it here: http://www.orbitalgamestudios.com/blog/concatenate-and-minify-your-phaser-code/

 

Let me know if you have any questions, comments or concerns!

 

Thanks!

[kidos]

thanks!

[alex_h]

Grunt is good and all that but these days all the cool kids are using Gulp 

 

http://gulpjs.com/

[Nambiar]

Thank you. Very useful.

[Orbital Game Studios]

Thanks alex_h, I'll take a look at Gulp. The biggest issue I have with grunt is the initial setup, seems to take forever to get everything just the way I want it, but then it's great. Will even use image minification prior to building a sprite pack just to shave off some extra size on images.

 

How does Gulp compare setup-wise? At first glance it seems a little similar, but there also looks to be more plugins available for various tasks.

[Str1ngS]

Why use concat if uglify can do that as well:

    grunt.initConfig({        uglify: {            yourProject: {                files: {                    'build/concatinatedAndUglified.js': [                        'js/**/*.js'                    ]                }            }        }    });

Want it readable for debugging? Beautify it:
 

    grunt.initConfig({        uglify: {            yourProject: {                options: {                    beautify: true                },                files: {                    'build/concatinatedAndUglified.js': [                        'js/**/*.js'                    ]                }            }        }    });

[Orbital Game Studios]

Hey Str1ngS, those are good points.

 

I guess for my environment it just made sense for me to have the single steps which provide both. I have a debug.html and a release.html both of which specify the concatenated version and the uglify versions respectively. That way in my IDE, I just run one .html file over the other depending on if I'm debugging or not. This way, grunt just runs in the background while I'm developing and I don't really have to think about it, both files are always up to date and I can concentrate in the IDE.

[alex_h]

How does Gulp compare setup-wise? At first glance it seems a little similar, but there also looks to be more plugins available for various tasks.

 

Gulp is very similar, the main difference is that you are writing functions rather than defining config objects. One benefit is that it works with streams so you don't end up with the output of each step in the task being written to disk, the data can be piped all the way through from one end of the task to the other before begin output to file.

[Orbital Game Studios]

Thanks for the explanation alex_h. Looks like I will have to check it out!

[lukaMis]

There is another option for concatenating & minifying your javascript if you do not feel like editing .json or .js files.

There is an app for that.

It is called Prepros

 

I use it for that and a whole lot of other things. (sass compilation & live preview in browser so you do not need to run local server manually)

 

Luka

[eguneys]

Take a look at this yeoman generator https://github.com/eguneys/generator-phaserjs, Once you scaffold your application with, `yo phaserjs`, run `gulp build` and you are minified and develop ready. It uses requirejs and gulp.

[BdR]

Oh man, I can't say I'm a big fan of NodeJS.

 

I understand that nodejs apps are multiplatform and all (mac, windows, linux) so that's good, but I mean it's almost 2015 and we're back to command line interfaces again!? geez.. it's so obtuse.

Just typing "npm install grunt-cli" just now froze up my entire computer, no warnings or error messages or nothing, had to hard reset 

 

Thanks for the explanation though, I'll try to get this working.. edit: nevermind I think I'll just use this one instead http://jscompress.com/

[lewster32]

There's nothing wrong with CLI. It's a different way of doing things, but in almost every respect it's more efficient if you can tolerate the learning curve. 

[BdR]

Actually I guess I don't mind the command line interface so much, but it's just that using Grunt to minify my js files seems like overkill. I mean you basically have to install a complete http webserver (NodeJS) for what is essentially manipulation of a few text files.

 

Whatever works works I guess. Anyway I just found the Google Closure Compiler, which I find a little easier to use. It's a .jar file you can run with CLI and it also does very helpful syntax checking (spotted some minor flaws in my code).

[ageibert]

Although i'm also using gulp more often than grunt i think that you set up some got tasks code here.

Maybe you could put it on e.g. github so others could contribute.

Nice work!