HTML and CSS Reference
In-Depth Information
Watch lets you have Grunt monitor a directory for changes. Here, you can see that you are setting up Grunt to
check for any changes to
.ts
(TypeScript) files and call the
typescript
task, which will run the compiler on the files in
the src directory. This will allow you to generate your
game.js
file automatically anytime you click the Save button in a
.ts
file. The last task simply enables you to open the browser and load your game for testing.
To make all this work, you need to add one final thing to the end of your GruntFile, right after the closing
]);
for your task objects:
grunt.registerTask('default', ['typescript', 'connect', 'open', 'watch']);
This will register the default task for Grunt as follows: compile your TypeScript files, start the server, open the
http://localhost:8080
URL in your default browser, and then watch the src directory for any changes to your
.ts
files. Although this may seem like a lot of work, you will quickly get used to this kind of setup for TypeScript, and it's
incredibly similar to how you would automate your normal JavaScript development (instead of having the TypeScript
compiler combine JavaScript files, you would use a task called
concat
) . The last thing you need to do is set up your
project directory, as shown in Figure
19-3
.
Figure 19-3.
Note that I have added a deploy directory with a css and a js folder as well as a src directory to the project
You will want to set up a few files to get started. Create an
index.html
file in your deploy folder with the
following content:
**<!DOCTYPE html>
<html lang="en" xmlns="
http://www.w3.org/1999/xhtml
"
>
<head>
<meta charset="utf-8" />
<title>RogueTS</title>
<link rel="stylesheet" href="css/game.css" type="text/css" />
<script src="js/game.js"></script>
</head>
<body>
<h1>RogueTS Test</h1>
<canvas id="display" width="800" height="480" />
</body>
</html>
