Automatic Content Updates In A Running IOS Simulator Instance

When I had started with the mobile application development and using AngularJS and Ionic, it was often quite annoying to rebuild the application after changing just the background color of an element or a text string. Fortunately, the building process for a iOS app doesn’t need much time as it needs to build an Android (release) app. But based on the amount and size of the used content files for the app, the iOS building process can also take a long time to finish. That’s the most typical scenario which we want to avoid and stop rebuilding the app with `ionic emulate ios` or `ionic build ios` to test your latest changes.

For our new scenario, we are using our development app folder and the folder of the running iOS simulator instance to replicate the changed files and folder between them. Without any tools and scripts, it would be more than enough to copy and paste the files we changed from the app to the sim folder, but we will do it right and automate the whole process. Using Grunt as a task manager is, in my opinion, the best way to make sure we replicate everything we need from the development app folder to the iOS simulator folder.

What tasks do we need to define?

  • watch changes of the files and folder
  • synchronize the files and folder
  • reload the application in the running iOS Simulator instance

That’s pretty much it. Easy, right? But with the tasks above we would need to run the extra [gulp watch] task from the Ionic project to recompile the changed SASS files and spit out a CSS file, which we have to minify in the end. In that case, I recommend not to run the [gulp watch] task but rather extend our Grunt tasks with the tasks we need for the SASS files.

  • watch changes of the files and folder
  • compile SASS files to CSS
  • minify the compiled CSS files
  • synchronize the files and folder
  • reload the application in the running iOS Simulator instance

We are now well positioned and would need the following Grunt modules for the previously defined tasks.

grunt-sync
grunt-livereload
grunt-contrib-watch
grunt-contrib-sass
grunt-contrib-cssmin

For the final Grunt tasks, you can clone or download the GitHub repository sim-watch-sync in the root folder of your Ionic project, install all the required dependencies by running npm install and go through the readme for the further instructions and usage.

I created a simple Ionic app which you can clone here: https://github.com/bulletinmybeard/sim-watch-sync-ionic-test. Please beware that I used the sim-watch-sync as submodule, and you have to pass through the argument --recursive when you clone the repository git clone --recursive git@github.com:bulletinmybeard/sim-watch-sync-ionic-test.git, to get full submodule content. Otherwise, you will have just an empty sim-watch-sync folder and less magic.

In the end, it’s not magic or rocket science we are doing here but with some few tasks, you can save time a lot and concentrate more on developing your mobile application.

Cheers

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn