# A Grunt Build Task for WinningJS Applications Building Windows 8 applications with HTML5 and JavaScript is not a great experience, by default. The "WinJS" framework has no notion of a module system, and hasn't caught up with the latest and greatest in rapid web development. But it's 2013: nobody wants to code JavaScript using globals and "namespaces," or hand-write their CSS, or even write out verbose HTML. The WinningJS framework is meant to help fix the WinJS development experience. And the WinningJS-build package in particular is meant to modernize the development stack. It is a simple [Grunt][] build task which gives: * A proper module system, via [Browserify][] * A wonderfully modern CSS replacement with [Stylus][] * Concise and beautiful HTML templates with [Jade][] and [Simple Jadeify][] ## How to Use To use this build task, include `"winningjs-build"` in your `package.json` and install it. Also, add an `index.jade` file to your project, using the template variables `scripts` and `styles`, like so: ```jade html head meta(charset="utf-8") title My Awesome Windows 8 App //- WinJS references link(href="//Microsoft.WinJS.1.0/css/ui-dark.css", rel="stylesheet") script(src="//Microsoft.WinJS.1.0/js/base.js") script(src="//Microsoft.WinJS.1.0/js/ui.js") each script in scripts script(src=script) each style in styles link(href="#{style}", rel="stylesheet") body ``` With these in place, you can use the build task inside your root `grunt.js` file, for example like so: ```js grunt.loadNpmTasks("winningjs-build"); grunt.initConfig({ "WinningJS-build": { src: "index.jade", dest: "out/index.html", browserify: { entry: "lib/start.js", dest: "out/browserified", aliases: { "jquery": "jquery-browserify" }, middleware: [require("simple-jadeify")] }, stylus: { src: ["styles/**/*.styl", "components/**/*.styl"], dest: "out/css" } } }); ``` In total, this build task will: * [Browserify][] all modules recursively required by the `WinningJS-build.browserify.entry` module. The results will be written, one file at a time (for better debugability), to the `WinningJS-build.browserify.dest` location. * Browserify aliases are also supported, through the `WinningJS-build.browserify.aliases` setting. * Any browserify middleware is applied; for example, the [Simple Jadeify][] middleware shown in the example above compiles Jade templates into modules that export the template function. * Compile all [Stylus][] files specified in the `WinningJS-build.stylus.src` setting, writing the results to the `WinningJS-build.stylus.dest` location. * Compile a [Jade][] index file template (as shown above) into a HTML page, with all of the Browserified modules referenced as `