Setting up Mac OS X for Web Development (Part 2: Configuring Sublime Text)

In Part 1 of this post you set up Apache, PHP and MySQL on your machine and configured your first local development domain. Part 2 will be all about Sublime Text and setting it up to make HTML, LESS and JavaScript development a lot faster and easier.

Essential Packages

Before you can start installing, you need to check to see if you have Package Control installed. Package Control is Sublime Text’s very own package manager and will make it a breeze to install add-ons in Sublime Text. Go ahead and hit CMD+SHIFT+P and start typing “install.” If Package Control comes up, you can move on, if not, follow the instructions on the Package Control website to install it.

Once Package Control is installed, you can install each of the following packages by hitting CMD+SHIFT+P and choosing “Package Control: Install Package.” Sublime Text will present you with a list of all available packages ready to be installed.

Here are some useful packages that I rely on.

Emmet

Emmet will speed up your HTML writing skills by letting you write HTML the CSS way, then expanding it to HTML. For example:

div>ul>li{This is list item number $}*4

turns into

<div>
<ul>
<li>This is list item number 1</li>
<li>This is list item number 2</li>
<li>This is list item number 3</li>
<li>This is list item number 4</li>
</ul>
</div>

But that’s only a glimpse into what it can do. Have a look at their website for more information.

LESS

The LESS package makes sure Sublime Text knows how to highlight LESS code. Without it, Sublime Text would try to colour-code LESS as if it were regular CSS and would trip over things like nested selectors and LESS variables.

SublimeLinter

SublimeLinter will help you debug your syntax as you write. So, instead of having to save your JavaScript to find out you made a syntax mistake like if (checked = TRUE) {} instead of if (checked === TRUE) {}, SublimeLinter will notify you that there’s an error before you even move to the next line.

But SublimeLinter by itself doesn’t do anything, it needs child packages for each language you want it to help you with. These child packages need to be installed separately through Package Control. I have installed the following:

  • SublimeLinter-jshint: Syntax debugger for JavaScript
  • SublimeLinter-csslint: Syntax debugger for CSS/LESS
  • SublimeLinter-html-tidy: Syntax debugger for HTML

To get SublimeLinter-html-tidy to also help you with HTML5, you will need to change your Mac’s HTML tidy revision to the HEAD branch. This branch has been updated with the HTML5 syntax. You can do this with the following bash commands:

brew tap homebrew/dupes
brew install homebrew/dupes/tidy --HEAD

SublimeOnSaveBuild

Later on, we’ll be writing some build systems to minify and validate our source files, among other things. SublimeOnSaveBuild executes Sublime Text’s build command every time you save your work so that all the extra stuff that comes with LESS and linting JavaScript happens behind the scenes without interrupting your normal development workflow.

Build Systems

I use Sublime Text’s ability to run custom build systems on source files to compile LESS code into minified CSS and to uglify JavaScript files.

I prefer the Sublime Text build systems over solutions like Grunt or Gulp. The build systems don’t clutter your project directory and they’re faster. Below are the two build systems that I use: LESS and JavaScript.

LESS

The LESS build system uses a node package to help with the compiling and minifying of your LESS code. To install this package we’re going to use npm (which we installed in Part 1 of this article):

npm install -g less

When entering the above command into your terminal, npm will install the LESS package for global use (that’s what the “-g” is for).

Now we can set up our build system by moving over to Sublime Text and picking Tools > Build System > New Build System… from the menu bar. Build systems are really just files with some JSON to tell Sublime Text what to do. Paste the following code into the newly created build system and save it in the suggested folder.

{
    "cmd": ["lessc", "$file", "${file_path}/../${file_base_name}.css", "-x", "--verbose"],
    "file_regex": "^[ ]*File "(...*?)", line ([0-9]*)",
    "selector": "source.less",
    "path": "/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/share/npm/bin"
}

The code above will hand over your LESS file to the LESS package and instruct it to compile it to CSS, minify it and save it one directory level higher than the LESS file so that all your LESS source files can stay together.

JavaScript

We need to do something very much the same for JavaScript development. Install the uglify package with npm:

npm install -g uglifyjs

And write a build system:

{
   "cmd": [ "uglifyjs", "--comments", "-m", "-c", "-o", "${file_path}/${file_base_name}.min.js", "$file"],
   "selector": "source.js",
   "path": "/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/share/npm/bin:/usr/local/lib"
}

Save the JavaScript build system and that’s it. Just make sure that “Automatic” is selected in the Tools > Build System menu in Sublime Text, and the “selector” property in the JSON for each build system will make sure the appropriate build system is run when saving a source file.

LiveReload

LiveReload is probably one of the most awesome changes in the web development process in recent history. This package means the end of CMD+TABing. It attaches a “watcher” to your source files and refreshes the browser whenever you save them. It comes with tools to compile LESS and Sass files, although I’ve found them to be lacking in configuration for the bulk of my projects. Let’s have a look at installing this.

If you’re using Sublime Text 2 you can just install LiveReload through Package Control, but since LiveReload is tailored to Sublime Text 2, Sublime Text 3 users need to clone a Sublime Text 3 branch of the package from GitHub into their Sublime Text Packages folder to install it.

cd ~/.config/sublime-text-3/Packages
rm -rf LiveReload
git clone -b devel https://github.com/dz0ny/LiveReload-sublimetext2.git LiveReload

After pasting the above commands in your Terminal window and restarting Sublime Text, you should find some new LiveReload commands in your command palette (CMD+SHIFT+P).

Before you can use it though, we need to install the LiveReload browser extension. Do so by going to its Chrome Web Store page and clicking the “Add to Chrome” button. There are extensions for other popular browsers as well.

Let’s get to work

Now that all these packages and build systems are in place we can finally get to work. Here’s how I typically start a static website:

  1. Copy my “Anvil” into the ~/Sites directory and call it lab2.dev (or whatever else is free at that time)
    cp -R ~/GitHub/Anvil ~/Sites/lab2.dev
  2. Open up the newly created project in Sublime Text
    sub ~/Sites/lab2.dev
  3. Open up a browser window and open up lab2.dev
  4. Click the LiveReload extension button in the top right corner of my browser
  5. In Sublime Text, open up the command palette with CMD+SHIFT+TAB, choose “LiveReload: Enable/disable plugins,” hit enter and choose “Enable – Simple Reload width delay (400ms).” This gives my build system enough time to build before the browser reloads.
  6. Open up my source files and start coding those awesome projects.

I hope this workflow really helps you out on your future projects. If you have any questions about it or if you run into any problems while setting everything up, ask me for help via e-mail or Twitter.