Preliminaries

Everyone working with Apache Cordova knows very well the Ripple emulator for Chrome (if you don’t, please refer to its official page).

Also, every serious Cordova developer knows that in the last months Apache Cordova is available as a Node module and that it can be used in a local development environment. If you do not know how to do it, follow the instructions in this post by Raymond Camden.

The problem

If you are using Sublime Text as your development environment for Cordova applications, you know that your typical development workflow is something like this:

1. edit some parts of your source code (e.g., a portion of CSS, an HTML template, a JS file, etc.)

2. open your command line and cd to the root of your Cordova project

3. run the following command in your terminal window to copy all the modified resources to their corresponding folders in the platform folder, and to set the correct binding to the cordova.js script

cordova prepare

4. run the Ripple command to start the local server hosting the Ripple engine

ripple emulate --path platforms/ios/www

Everything goes fine here and you can correctly see your app running, however there are two flaws in this workflow:

  • every time you have to run your app you have to switch to the terminal window, kill the Ripple process, run the cordova prepare command, and finally run the Ripple emulate command;
  • at each run a new Chrome tab is created, quickly leading to a very large set of opened tabs to be manually closed

The solution

I created a new Build system in my Sublime Text distribution so that I just need to press cmd+B to perform all the above mentioned steps automatically. Follow the steps below to use it:

1. Create a new Sublime project based on the folders and files being opened
step0

2. Create a new Build system in Sublime Text
step1

3. Setup the Build system so that it can reference the emulate.sh shell script located in the root of the Sublime project you created in step 1
step2

4. create the emulate.sh shell script and place it in the root of your Sublime project


cordova prepare && if ! pgrep node; then ripple emulate –path platforms/ios/www; exit; fi
exec <"$0" || exit; read v; read v; exec /usr/bin/osascript - "$@"; exit tell application "Google Chrome" activate tell application "System Events" tell process "Google Chrome" keystroke "r" using {command down, shift down} end tell end tell end tell [/code_text] Basically, the script performs the following steps: [list_wrap list_type="arrow"] [list_item]run the Cordova prepare command[/list_item] [list_item]if the node process (Ripple is based on it) is not running, then execute the Ripple emulate command[/list_item] [list_item]refresh the currently opened tab in Google Chrome[/list_item] [/list_wrap] 5. From now on, every time you have to run and debug your application, just press cmd+B

Hope it helps! 🙂

The following figure shows how the final structure of your Sublime Text project should look like.
step3