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.

Transcript

1. You can download the slides at http://bit.ly/grunt-talk
3. http://bit.ly/play-sfz
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
14. Getting started with
15. http://nodejs.org/
16. http://gruntjs.com/
17. http://git-scm.com/downloads
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
25. What is the
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
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
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
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
61. http://bit.ly/10733d1
62. http://bit.ly/12GLDUU
63. Automating
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