Wes Bos

Designer, Developer & Entrepreneur making the web an awesome place.

build

A really great feature of Sublime Text 2 is the ability to create your own build scripts. A build script is helpful when you are writing in a language that needs to be compiled or executed from terminal / command line. I personally use build scripts to compile the current file into CoffeeScript as well as run the current file in Node JS.

Watch the tutorial or continue reading to learn how to make Sublime Text 2 build scripts.

Creating a Build Script

To get started, go to Tools->Build System -> New Build System... and you will be presented with the boilerplate for a build script.

We have four lines to feed into our .sublime-build file:

  • cmd is an array of commends that will be run.
  • selector is an optional way to scope the build script to a specific filetype
  • path is where the command is to be executed. Because sublime executes it in the python console, we need to specify where on our system the compliler we want to use lies.
  • file_regex specifies where the error lines are and what to be returned.

For a complete list of all the variables available within a build script, check the variable reference.

CoffeeScript Build Script

So, to create our CoffeeScript build file, we simply fill in the following three lines. Keep in mind that with the Node.js coffeescript compiler we would normally execute something similar to this in the terminal:

coffee -c /path/to/file.coffee

{
	"cmd": ["coffee","-c", "$file"],
	"selector" : "source.coffee",
	"path" : "/usr/local/bin"
}

Save your file in your user packages folder and restart Sublime Text. On OSX its located at:
~/Library/Application Support/Sublime Text 2/Packages/User

Now every time we hit CMD + B our coffeescript file will be compiled with the build script. If you want to watch the file for changes after the first compile, simply switch the first line to "cmd": ["coffee","-wc", "$file"],. If anyone is using my CoffeeScript-Growl plugin, change your first line to "cmd": ["coffee", "-r", "coffeescript-growl", "-wc", "$file"], to get growl notifications.

Node.js Files

Another use for Sublime Text build scripts is launching the nodejs file you are currently working on. Our build script now looks something like this:

{
	"cmd": ["node", "$file"],
	"selector" : "source.js",
	"path" : "/usr/local/bin"
}

Thats is!

Pretty simple, eh? There is a lot of room for expanding these builds and making them do a lot of the manual work for you. If you have anything to add, please post it in the comments and I’ll be sure to add it to the post.

As always be sure to Follow me on Twitter

Let me know when this book launches

Enter your email address below and I’ll give you a hoot when its ready plus a discount code for being so great!

This entry was posted in Code Snippets, CoffeeScript, JavaScript, NodeJS, Sublime Text, Text Editors, Uncategorized. Bookmark the permalink.

8 Responses to Sublime Text 2 Build System Scripts: CoffeeScript & Node

  1. Izikiel says:

    Hey, the npm install for your growl notifications doesn’t work anymore :(

    npm install coffeescript-growl fails, it can’t find the file

  2. amsul says:

    Awesome man! This really helped.. :)

    And in case anyone is wondering, to compile the JS output to another folder, you can do this:

    {
    "cmd": ["coffee", "-wc", "-o", "../js", "$file_path" ],
    "selector": "source.coffee",
    "path": "/usr/local/bin"
    }

  3. Pingback: Improved Developer Tooling and Yeoman

  4. Rob Simpson says:

    Any suggestions on how to do this with Sass? I am going to give it a shot but thought I would ask for suggestions while I work on testing making a build instead of always having to do it from the command line.

  5. To find a selector for your file do this:

    Open the file in question
    Click on some bit of code that you care about
    Command+option+P
    This will display the source in the lower left corner of the screen: http://d.pr/i/slYm

    Precedence flows from the left. So you can capture all scss definitions by source.scss or something more specific by using a selector from the right of the list.

  6. Pingback: Ich nehme mir Zeit für Sublime Text 2. Teil 2. » dotwired

  7. kris says:

    I have seen many people at linux use Nodejs to compile coffeescript. I have a see a plugin also that format the html code.

    Can you help me to figure out Compile Coffeescript into Js on windows through Node.js.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>