HTML and CSS Reference
In-Depth Information
Now, you can start configuring your Grunt tasks. After the last bit of code with your grunt.loadNpmTask call,
add the following code inside the module's function statement:
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
});
Note that there is a trailing comma after the package.json . You are going to continue adding each task object to
this JSON file. Start by putting the next task object after the comma, on a new line:
connect: {
server: {
options: {
port: 8080,
base: './deploy'
}
}
},
Connect is a task that will create a server locally in the directory in which you run it. This will be helpful when it
comes to testing your project. Add the next task:
typescript: {
base: {
src: ['src/**/*.ts'],
dest: 'deploy/js/game.js',
options: {
module: 'amd',
target: 'es5'
}
}
},
This task will help you run the TypeScript compiler on your code. As you can see, you are setting the source to a src
folder, which you will create later on, and the output will be a single game.js file in your deploy directory. Also, as far as
options go, you set your module output type to amd . Because you are going to be combining all your TypeScript modules
into a single file, you won't have to worry about loading them via a module manager, as with Require.js . Also, you
are going to set your target to ECMAScript 5 (ES5), which allows you to take advantage of TypeScript's more advanced
features, such as getters and setters. HTML5 games require the canvas tag to run, so you don't really need to worry about
supporting ECMAScript 3 (ES3), as canvas doesn't work on those older browsers. Next, add the final two tasks:
watch: {
files: 'src/**/*.ts',
tasks: ['typescript']
},
open: {
dev: {
path: 'http://localhost:8080/index.html'
}
}
 
Search WWH ::




Custom Search