Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Using Node & Grunt For HTML5 Build Scripts

[email protected]
August 21, 2013
450

Using Node & Grunt For HTML5 Build Scripts

This is a talk I did about my workflow with Node and Grunt for my HTML5 games and how I am able to use a single code base to deploy to multiple platforms.

[email protected]

August 21, 2013
Tweet

Transcript

  1. • Desktop Browsers: IE 9+, Chrome, Safari, & Firefox •

    Mobile Browsers: Windows Phone 8, iOS & Chrome for Android • Web Markets: Chrome Web Store and Mozilla’s Web Store • WebView/Native Wrappers: CocoonJS, AppMobi, PhoneGap and iOS using Ejecta • Windows Store: Windows 8 allows you to create native apps/games with HTML5/JS
  2. • I always develop my Windows 8 game just like

    I would any Web game. • I do all my testing in the browser. • I use Visual Studio as my IDE. • When I am ready to test on Windows 8 or Windows Phone I simply hit compile.
  3. { "name": "SuperFallingZombies", "version": "1.0.0", "description": “A game about falling

    zombies.", "main": "index.html", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git://github.com/gamecook/super-falling-zombies.git" }, "author": "Jesse Freeman", "license": "MIT", "readmeFilename": "readme.md", "gitHead": "9cb42ceab42316c3acdd88b09b284e33d71fb232", "devDependencies": { "grunt": "~0.4.1", "grunt-express-server": "~0.4.0", "express": "~3.2.6", "grunt-shell": "~0.2.2", "grunt-contrib-watch": "~0.4.4", "grunt-contrib-copy": "~0.4.1", "grunt-text-replace": "~0.3.2", "grunt-contrib-clean": "~0.4.1", "grunt-contrib-uglify": "~0.2.2", "grunt-open": "~0.2.0", "impact-weltmeister": "~0.1.4" } }
  4. 1. Copy all source code to tmp directory in deploy

    folder. 2. Combine all JS files into a single JS file. 3. Inject all JSON and other external data that would normally be loaded eternally. 4. Uglify final js. 5. Delete source code and tools from tmp Directory. 6. Perform builds for each platform. http://bit.ly/sfz-build
  5. Create app manifest, depending on what platform it’s going to

    be deployed to, and zip up the contents. This can be used for Chrome Store, Firefox OS, CocoonJS & AppMobi.
  6. // config.js { "project": "Super Paper Monster Smasher Starter Kit",

    "rootProject": "./Projects/SuperPaperMonsterSmasherStarterKitWin8/", "wp8Project": "./Projects/SuperPaperMonsterSmasherStarterKitWP8/", "deployDir": "./Deploy/", "blogRootPath": "/wp-content/games/super-paper-monster-smasher-starter- kit/media/" } // load in gruntfile.js var config = grunt.file.readJSON("config.json");
  7. grunt.registerTask('build-platforms', ['build-web', 'build-phone', 'build-blog', 'build-win8']) grunt.registerTask('bake', ['build-tmp', 'shell:game', 'clean:lib', 'replace:gamePath',

    'uglify', 'build-platforms', 'clean:tmp']); grunt.registerTask('debug', ['build-tmp', 'build-platforms', 'clean:tmp']);
  8. Use this Starter Kit to help jumpstart your next HTML5

    game on Windows 8, Windows Phone 8 & Azure! http://bit.ly/sms-kit
  9. Use this Starter Kit to help jumpstart your next HTML5

    game on Windows 8, Windows Phone 8 & Azure! http://bit.ly/srr-kit
  10. Use this Starter Kit to help jumpstart your next HTML5

    game on Windows 8, Windows Phone 8 & Azure! http://bit.ly/YLdht4
  11. Free workshops focused on Game Development here in NYC. New

    weekend events starting at the end of September and weekly studio time space every Wednesday in the Microsoft NYC office.
  12. Don’t forget to visit jessefreeman.com to learn more about HTML5

    and Windows 8 game development. You can download the slides at http://bit.ly/grunt-talk