Sublime Text 2 HTML Template and Build System

I’ve been doing a lot of HTML/JS development lately. My editor of choice these days is Sublime Text 2. A really great editor with loads of features and nearly infinite customization ability. But, as I’m doing a lot of learning and experimenting, I’m finding the need to create a lot of small, throwaway projects to try something out. In sublime, doing such a thing means:

1. Creating a directory for your project.
2. Creating a project using that directory.
3. Adding that directory the project.
4. Creating a JavaScript file in that project.
5. Creating an HTML file in that project that references the JavaScript file.
6. Setting up some kind of build system to be able to quickly launch the HTML file in the browser of your choice. I’d settled on ANT for this, and have a build.xml file that I can just drop into the project.

Compare this to the good old days with Flash:

1. Open Flash.
2. Type some code.
3. Hit Control-Enter to see what it does.

So I decided to make a project template that does most of the work in setting up a project. And I think I have a pretty decent setup at this point, so I will share it.

The template comes in two pieces: a zip file and a build.xml file for ANT. Yeah, you’ll need ANT installed and functioning on your system for this to work. The build system depends on it anyway. So if you’re anti-ANT, you can stop reading here.

Download the file here. Unzip it and you’ll have the zip and xml files. Save these somewhere safe.

Now, when you want to make a new project, Here’s what you do:

1. Create a directory for the project, say “foo”.
2. Copy the template.zip and build.xml files into the directory.
3. From the command line, type “ant”.

Now you can open Sublime Text 2, and from the menu, navigate and open your new project. It should look like this:

Here we have some various useful directories for putting stuff into, including a scripts dir with a main.js file in it that looks like this:

[php lang=”JavaScript]window.onload = function() {
document.writeln(“hello world”);
}[/php]

All ready for you to insert your real code.

An index.html file that looks like this:

[php lang=”html”]

[/php]

As you can see, the title of the page has been set to your project directory name automatically, and it has a script tag already linked to main.js.

Finally, the build.xml file:

[php lang=”xml”]

[/php]

You want to go here and set up the paths to whatever browsers you use on your system. On line 10, you can easily switch between browsers by putting in the name of the browser you want to launch. The url property is set to the index.html file, but if you need to test on a server, you can set that up to launch the browser with whatever url you need. The default target is preview which merely launches the browser with the url.

Sublime Text 2 should have the build system set to automatic for a new project. When it sees that your project has a build.xml file in it, it should run ANT, launching that build.xml file as soon as you hit F7.

Template Customization

Chances are you are not on a linux based OS like me, so you’ll need to adjust your browser paths. You’ll probably also want to tweak other parts of the project each time you use it. Rather than doing this each time you make a new project, I’ll show you how the setup system works so you can change the template to your own needs.

The build.xml file that you originally copied in is not the same build.xml file that ends up in your project after you run ant. Here’s what the original looks like:

[php lang=”xml”]

The default and only target is “setup”. This first unzips the template.zip file into the current directory. It then uses some token replacement to add the current directory to the sublime project and to change the title of the HTML document to the directory name. Then it changes the name of the .sublime-project file to match your project name. Finally, it deletes the template.zip file and renames build2.xml (the final ANT build file that was in the zip) to build.xml, wiping out the original setup build.xml file.

So, if you want to change anything about the template, you just need to change the files in template.zip. Unzip it, make whatever structural changes in there that you want. You can add, remove, change folders. You can add libraries, jQuery for example, and link to them in index.html. You can add or change targets in build2.xml (which will become build.xml) and set your browser paths. When you’re done changing things, zip it back up into template.zip and all your changes will be in every project you make from there on out.

Hopefully this is useful to someone other than myself. It’s certainly been useful for me already.