Your working environment in one click

in Front-End Development

As front-end development becomes more and more automated, the introduction of task runners such as grunt and gulp are helping developers cut out the manual repetition of day to day actions. Automation however does have a manual process; opening all the terminal windows to run those tasks.

I like to keep a few windows open for the different types of tasks I'm running, rests, gulp/grunt watch tasks etc. Doing this increases my manual step at the beginning of each day. I wanted to make this a little bit easier for me.

My Daily chore.

Everyday, before I could begin working on a project I would open 2 or three terminal windows. 1 to start my web app or website (nodejs application), 1 to run my tasks and 1 to run my tests. For every terminal window I opened I would manually type commands to navigate to the correct directory before I could instruct my task runner to perform its task.

I would also have to open my text editor of choice to begin work on a particular project.

The more windows I opened the more frustrated I became with the amount of time I was wasting each morning.

Automating my automation

We have automation for all other tasks, why isn't there a task I could run to perform all this manual processing I was putting myself through.

I decided I was going to try to remove my frustration. I looked at a few options.

Bash script was first on my list to try to write a script to do this. I managed it to a point but I didn't like the ugly .command file that I had to create. I'm sure there is a way around this, but I didn't hang around to find out.

I quickly turned my attention to AppleScript which would allow me to create an app that I could pick up and drop in any project.

on openInSublime(folder)  
    tell application "Sublime Text 2"
        open folder
    end tell
end openInSublime

tell application "Finder"  
    set sel to item 1 of (get selection)
    if class of sel is folder then
        set currentDir to sel as text
        set currentDir to (container of sel) as text
    end if
end tell


tell application "Terminal"  
end tell

tell application "System Events"  
    tell process "Terminal" to keystroke "n" using command down
end tell

tell application "Terminal"  
    do script with command "cd " & (quoted form of POSIX path of currentDir) in window 2
    do script with command "cd " & (quoted form of POSIX path of currentDir) in window 1
    do script with command "node website.js" in window 2
    do script with command "gulp" in window 1

end tell  

link to script on github

You can take this script and create your own little mac app. Use it, tweak it to suit your needs.

Here are the steps to create your own.

  1. Open Script Editor. Applications > Utilities > Script Editor.
  2. Write code (or copy from link above)
  3. File > Save (chose application from the file format)

That's it. Drag your application into any folder where your project resides. For the script above it needs to be at the root where your gulp file is.

Double click the application and it should open the relevant programs and windows for you.