Building

Edit: version numbers for the listed src files are older in this document, but the process works all the same.

The boilerplate comes with a Grunt setup that will compile all the JS files together and distribute them to a build directory.

To try it out, clone the repository:

 git clone https://github.com/melonjs/boilerplate.git
 cd boilerplate

Install the dependencies (you need to have Node.js)

 npm install

Then have a look at the index.html file. You will see something like this:

<!-- build:js js/app.min.js -->
<script type="text/javascript" src="lib/melonJS-1.0.0-min.js"></script>

<!-- Plugin(s) -->
<script type="text/javascript" src="lib/plugins/debugPanel.js"></script>

<!-- Game Scripts -->
<script type="text/javascript" src="js/game.js"></script>
<script type="text/javascript" src="js/resources.js"></script>

<script type="text/javascript" src="js/entities/entities.js"></script>
<script type="text/javascript" src="js/entities/HUD.js"></script>

<script type="text/javascript" src="js/screens/title.js"></script>
<script type="text/javascript" src="js/screens/play.js"></script>
<!-- /build -->

Those build comments are utilized by the grunt task to replace the file paths in there with a single script tag to app.min.js. Add your script tags into there as you need to when developing your game. Just keep them between the two comments.

Open up the Gruntfile.js, it will look something like this:

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      dist: {
        src: ['lib/melonJS-<%= pkg.version %>.js', 'lib/plugins/*.js', 'js/game.js', 'js/resources.js','js/**/*.js'],
        dest: 'build/js/app.js'
      }
    },
    copy: {
      dist: {
        files: [{
          src: 'index.css',
          dest: 'build/index.css'
        },{
          src: 'data/**/*',
          dest: 'build/'
        }]
      }
    },
    processhtml: {
      dist: {
        options: {
          process: true,
          data: {
            title: 'My app',
            message: 'This is production distribution'
          }
        },
        files: {
          'build/index.html': ['index.html']
        }
      }
    },
    uglify: {
      options: {
        report: 'min',
        preserveComments: 'some'
      },
      dist: {
        files: {
          'build/js/app.min.js': [
            'build/js/app.js'
          ]
        }
      }
    },
  });

  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-processhtml');
  grunt.registerTask('default', ['concat', 'uglify', 'copy', 'processhtml']);
}

The concat task will try to grab all files in the js directory, prioritizing plugins, game, and resources first. You may need to add paths or change it around to support your game, but it should work fairly out of the box.

Now to try it out, run:

grunt

That will create a build directory which contains the html, css and data files. Try it locally or on a web server to see it work.