Jump to content

How to combine multiplie js files into one


PKrawczynski
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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']);};
Link to comment
Share on other sites

  • 2 years later...

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

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...