Sign in to follow this  
Orbital Game Studios

How to concatenate/minify your code

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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'                    ]                }            }        }    });

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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  :wacko:

 

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/ :)

Share this post


Link to post
Share on other sites
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).

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.