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

Using Node & Grunt For HTML5 Build Scripts

Bcc93abebe48d10fc4471388e69bafec?s=47 jessefreeman@gmail.com
August 21, 2013
430

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.

Bcc93abebe48d10fc4471388e69bafec?s=128

jessefreeman@gmail.com

August 21, 2013
Tweet

Transcript

  1. You can download the slides at http://bit.ly/grunt-talk

  2. None
  3. http://bit.ly/play-sfz

  4. None
  5. None
  6. None
  7. None
  8. • 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
  9. None
  10. None
  11. None
  12. None
  13. None
  14. Getting started with

  15. http://nodejs.org/

  16. http://gruntjs.com/

  17. http://git-scm.com/downloads

  18. None
  19. None
  20. None
  21. • 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.
  22. Installing

  23. None
  24. None
  25. What is the

  26. None
  27. None
  28. None
  29. > npm init

  30. { "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" } }
  31. > npm install -g grunt-cli

  32. Understanding the

  33. None
  34. None
  35. None
  36. What does

  37. 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
  38. None
  39. > npm install express --save-dev

  40. > npm install grunt-shell --save-dev

  41. > npm install grunt-contrib-watch --save-dev

  42. > npm install grunt-text-replace --save-dev

  43. > npm install grunt-contrib-clean --save-dev

  44. > npm install grunt-contrib-uglify --save-dev

  45. > npm install grunt-open --save-dev

  46. Running the

  47. > grunt

  48. None
  49. None
  50. > grunt bake

  51. Copy over tmp folder as is to deploy directory and

    it’s ready to be uploaded.
  52. Change paths in source code to load from final deployment

    url structure.
  53. Copy over minified JS file to Win8 project’s JS directory.

  54. Copy over tmp directory to Html folder inside of the

    WP8 project.
  55. 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.
  56. Making a

  57. // 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");
  58. 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']);
  59. > grunt debug

  60. None
  61. http://bit.ly/10733d1

  62. http://bit.ly/12GLDUU

  63. Automating

  64. None
  65. http://bit.ly/12lLrZy

  66. http://bit.ly/ZfTje9

  67. Why did you

  68. http://onegameamonth.com

  69. Use this Starter Kit to help jumpstart your next HTML5

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

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

    game on Windows 8, Windows Phone 8 & Azure! http://bit.ly/YLdht4
  72. 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.
  73. 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