Sublime Text 2 HTML Template and Build System

Nov 11 2011 Published by under JavaScript

Send to Kindle

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:

window.onload = function() {
    document.writeln("hello world");
}

All ready for you to insert your real code.

An index.html file that looks like this:

<html>
<head>
	<title>foo</title>
	<script type="text/javascript" src="./scripts/main.js"></script>
</head>
<body>

</body>
</html>

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:

<project default="preview">
    <!-- tools. change paths to where these are on your system -->
    <property name="chrome" location="/usr/bin/google-chrome"/>
    <property name="firefox" location="/usr/bin/firefox"/>
    <property name="safari" location=""/>
    <property name="ie" location=""/>
    <property name="opera" location=""/>
    
    
    <!-- choose your browser -->
    <property name="browser" value="${chrome}"/>
    <!-- file/url to launch -->
    <property name="url" value="index.html"/>



    <!-- previews url in browser -->
    <target name="preview">
        <exec executable="${browser}">
            <arg value="${url}"/>
        </exec>    
    </target>
</project>

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:

<project default="setup">
    <!-- setup properties. don't change -->
    <dirname property="project_dir" file="build.xml"/>
    <basename property="project_name" file="${project_dir}"/>
    
    <!-- creates full sublime project in current directory -->
    <target name="setup">
        <unzip src="template.zip" dest="."/>
        <replace file="project.sublime-project" token="@project_dir@" value="${project_dir}"/>
        <replace file="index.html" token="@project_name@" value="${project_name}"/>
        <move file="project.sublime-project" tofile="${project_name}.sublime-project"/>
        <delete file="template.zip"/>
        <move file="build2.xml" tofile="build.xml"/>
    </target>

</project>

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.

Send to Kindle

14 responses so far

  • Rob Eberhardt says:

    Thanks so much, I discovered Sublime Text 2 via your recommendation on Twitter and it’s the best editor I’ve used in years…

  • Telly Koosis says:

    Yes, thanks much for this, very useful!

    However, I’ve tried to customize things a little bit (OS X 10.6.8) and am having issues when I try to run the ant build again: http://dpaste.com/hold/656579/

    This happens even if I simply unzip your default template.zip and zip it back up again.

    Am I missing something obvious?

    Thanks again,
    -tk

    • keith says:

      Well, it’s trying to find project.sublime-project and failing. Probably that got renamed or something. Once you run the ant setup initially, it changes names and replaces stuff in the files. You need to start fresh with the original files if you’re going to change things.

      • Telly Koosis says:

        That’s why it’s odd because I do try it with all untouched files:

        sublime_template >
        template.zip >
        unzip it >
        change nothing >
        zip it back up >
        copy template.zip & build.xml to test project >
        run “ant” in terminal >
        build fails

        Only things that come to mind is the OS X native compression and/or .DS_STORE injection are screwing things up.

        Either way, thanks again!

  • keith says:

    Well, again, it’s saying that project.sublime-project doesn’t exist. It should after the unzipping task runs. Does it? I’m thinking your rezipping process may have messed with the path.

  • Hi Keith,

    Thanks for the environment.

    How would you recommend including jQuery?

    best,
    pk

  • JasonDavis says:

    Thank you for this, I am new to using build scripts just learning them, I code with PHP, Javascript, HTML, CSS so this project is perfect for me. As a PHP user, I just started using Phing, it is JUST like ANT but built in PHP. I have never used Ant but from what I read, since they are so similar, most Ant projects are drop in and work with Phing so I was able to use this project with Phing instead of Ant. Phing is based on Ant which means it can share Ant’s codebase and actually has a little more feature then Ant. Highly recommend it to PHP users. Figured it might be worth mentioning when I saw the comment ” So if you’re anti-ANT, you can stop reading here.”

    • I think I have the HTML/JavaScript pretty well figured out by now (I have been coding for about 25 days with this environment). The next thing I want to do is I/O with my database. I’m not entirely sure how I will proceed, whether it’s via HTML5 netsocket or PHP, however, I’ll check out Phing for starters. Thanks.

  • jim says:

    Hey Keith,

    I couldn’t get your ANT script to launch a browser on OS X 10.6.8.

    I ran into the same problems as people here:

    http://ds327.blueboxgrid.com/pipermail/flashcodersny_flashcodersny.org/2008-September/009288.html

    http://archive.darronschall.com/weblog/2007/12/launching-firefox-from-ant-on-osx.html

    I could sort of get Firefox to work but not Chrome.

  • Mark Burvill says:

    Thanks for this Keith. Really helpful.

    For anyone else still having problems getting the browsers to launch in OS X, this is how I solved it:

    I had to change the filename of Chrome from “Google Chrome.app” to “Chrome.app” as it didn’t like the space and I couldn’t work out another way around it, but it all works great.

  • [...] the idea of creating a plugin that would simplify the creation of a project. My first stab at it can be found here. That, of course, wasn’t a plugin, but an Ant build file that copied files over to a new [...]

Leave a Reply