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
2. Create a new Build system in Sublime Text
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
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.
Nice post.
I am trying your idea in windows and when i am pressing ctrl+b it is building the app but nothing happens. does this should open the chrome?
Hi Danny, the script actually is an AppleScript, so it will not work in Windows. 🙁
Anyway, let me know if you manage to create a version supported on Windows, ok?
I tried same but it’s not working cmb+b not doing anything. In your file structure I can’t see Ripple.sublime-build?