How to combine multiplie js files into one

[PKrawczynski]

Hey, Im pretty much just starting with html5 development, tested few engines and it development environments, its going quite well but im having problem to set up myself some system that would merge multiplie js files into one "game.js"

 

I know it should be possible with grunt tasks because typescript example Ive downloaded had configuration that made me something like that. But since im not going to use typescript I would need something that works with plain js and grunt-concat might be what Im looking for, but everything stopped working after Ive used it

 

So please, any protips are much welcome as im clueless

[rich]

I use a grunt task, but you could also consider using a php script to do it. I've got one here if you like. It's not elegant, but it certainly works (it actually minifies the output as well). The only thing you need to get right is the ORDER in which the files are concatenated to avoid something depending on something that may not yet exist.

[alex_h]

I haven't had a chance to get started with things like grunt or node.js so I've ended up writing a quick air app to merge js files, that runs off a hand typed manifest text file. I then use a .bat file to run yuicompress on the output. It may not be all that elegant but it certainly beats manual copy and paste!

[rich]

Nice idea I too use yui Compressor these days instead of jsmin. If you don't want the hassle of running it locally there are various sites that do it for you. I've used http://yui.2clics.net/ lots of times before with no issues.

[Ezelia]

my best choice after many compressors, minifiers ...etc is Google Closure compiler!

[Antriel]

Would it be a big problem if I divide my code into say preloader.js and game.js? If game code is too big I don't really want players looking at empty screen for half a minute. Although I read in Rich's article that publishers want 1 file. Any reason behind it?

[PKrawczynski]

I use a grunt task, but you could also consider using a php script to do it. I've got one here if you like. It's not elegant, but it certainly works (it actually minifies the output as well). The only thing you need to get right is the ORDER in which the files are concatenated to avoid something depending on something that may not yet exist.

 

If you could possibly post that GruntFile.js that would be great

 

my best choice after many compressors, minifiers ...etc is Google Closure compiler!

Thanks I will take a look at that as well - is it hard to start with?

[PKrawczynski]

Would it be a big problem if I divide my code into say preloader.js and game.js? If game code is too big I don't really want players looking at empty screen for half a minute. Although I read in Rich's article that publishers want 1 file. Any reason behind it?

Hey, Ive just moved from flash here, as well so I had same confusion.

You should divide your code normally as you would with flash, into objects.

 

Working with assets is quite different from actionscript because from what I see everything should be loaded as nothing is embedded into game - because its javascript. So your whole game.js is loaded into webpage at start and then you load preloader assets, after wchich you create preloader that displays progress of loading rest of game assets.

 

Rich was kind enough to post his boot and preloader on phaser forum within this topic:

http://www.html5gamedevs.com/topic/1198-downscaling/

[Antriel]

Yeah I'm also coming from flash.

What I did is create a small preloader.js that loads all my assets and after that's done it loads my game.js. I suspect my game.js will be around half a megabyte even after minimizing so it just made sense not to include it into data that needs to be loaded before preloader shows.

My preloader looks similar to what Rich posted, except I generate most of it via macro where I also process some other data.

[benny!]

my best choice after many compressors, minifiers ...etc is Google Closure compiler!

 

+1

 

I use the compiler.jar from google, too. Wrapped the minification in a simple ant build script which automatically minifies and merge my js files on deployment.

[alex_h]

Would it be a big problem if I divide my code into say preloader.js and game.js?

 

I normally deliver 3 code files. One is my root file that holds my main object, a bit like an as3 document class; it's a very small file. This then loads two other minified js files. One is my rendering framework, this gets loaded first. The other is the game specific code, which is the last to load. I've found this is a nice way to work because if I then want to swap in an updated version of my rendering framework I can do so without disturbing the rest of my code.

 

Obviously this is just the deployed version of my game, in my working copy every game class/object lives in it's own file, just like in as3.

[P.Uri.Tanner]

npm install node-minify

https://github.com/srod/node-minify

 

If you just want to concat/minify this is easier to set up than grunt. 

[rich]

node-minify looks great - just installed it How do you actually, err.. "run" it though?

 

Also the way you have to pass your files as an array is a pain in the arse. Is there a way to automate the creation of that array, or read it from a file at least?

[Chris]

Here's my grunt file for my mosaik game engine.

 

It does both concatenating and minifying.

It also adds header comments on top of both generated files.

 

Note that I listed all sourcefiles separately there, since I don't want unfinished files to be merged into the dist packs, too.

You can just concatenate/minify all files of a folder by setting src to "path/*.js".

 

This grunt config gives you three different commands:

 

"grunt"

No arguments = just uglify (minify) the JS.

 

"grunt build"

Create both concatenated + minified dist packs

 

"grunt watch"

Constantly watch for file changes and whenever you change a file, it automatically creates concatenated + minified versions.

 

 

npm command to make this work:

npm install grunt grunt-contrib-uglify grunt-contrib-concat grunt-contrib-watch --save-dev

Have fun!

module.exports = function (grunt){    'use strict';    grunt.loadNpmTasks('grunt-contrib-uglify');    grunt.loadNpmTasks('grunt-contrib-watch');    grunt.loadNpmTasks('grunt-contrib-concat');    grunt.initConfig({        uglify: {            options: {                banner: '/* Mosaik\n' +                        ' * ======\n' +                        ' * @license: CC BY-NC 3.0 (http://creativecommons.org/licenses/by-nc/3.0/)\n' +                        ' * @author: Christian Engel <[email protected]>\n' +                        ' * @updated: ' + (new Date()).toDateString() + '\n' +                        ' */\n',                sourceMap: 'dist/mosaik.min.smap.js'            },            dist: {                src: ['src/mosaik.Core.js', 'src/mosaik.Events.js', 'src/mosaik.Input.js', 'src/mosaik.Map.js', 'src/mosaik.Palette.js', 'src/mosaik.Stage.js', 'src/mosaik.Object.js', 'src/mosaik.Tween.js', 'src/mosaik._moveable.js', 'src/mosaik._animatable.js'],                dest: 'dist/mosaik.min.js'            }        },        concat: {            options: {                banner: '/* Mosaik - Tilebased Engine\n' +                        ' * ======\n' +                        ' * @license: CC BY-NC 3.0 (http://creativecommons.org/licenses/by-nc/3.0/)\n' +                        ' * @author: Christian Engel <[email protected]>\n' +                        ' * @updated: ' + (new Date()).toDateString() + '\n' +                        ' */\n'            },            dist: {                src: ['src/mosaik.Core.js', 'src/mosaik.Events.js', 'src/mosaik.Input.js', 'src/mosaik.Map.js', 'src/mosaik.Palette.js', 'src/mosaik.Stage.js', 'src/mosaik.Object.js', 'src/mosaik.Tween.js', 'src/mosaik._moveable.js', 'src/mosaik._animatable.js'],                dest: 'dist/mosaik.js'            }        },        watch: {            scripts: {                files: ['src/*.js'],                tasks: ['uglify', 'concat'],                options: {                    nospawn: true                }            }        }    });    grunt.registerTask('default', 'uglify');    grunt.registerTask('build', ['concat', 'uglify']);};

[tonytong]

I normally deliver 3 code files. One is my root file that holds my main object, a bit like an as3 document class; it's a very small file. This then loads two other minified js files. One is my rendering framework, this gets loaded first. The other is the game specific code, which is the last to load. I've found this is a nice way to work because if I then want to swap in an updated version of my rendering framework I can do so without disturbing the rest of my code.

 

Obviously this is just the deployed version of my game, in my working copy every game class/object lives in it's own file, just like in as3.

 

thanks for sharing, it's useful

[mattstyles]

What a huge load of hassle just to smash some files together 

 

bash:

cat src/*.js > bundle.js

[dimumurray]

What a huge load of hassle just to smash some files together 

 

bash:

cat src/*.js > bundle.js

I don't think that handles minification. 

[mattstyles]

I don't think that handles minification. 

 

Neither does the OP!

 

but,

cat src/*.js | uglifyjs > bundle.js

would be one way (pretty sure there are options such that uglify handles the concatenation too, so you get source-maps yada yada yada)