Executing custom Gulp tasks when using the Ionic server

The Ionic server is the easiest way to test your app while still in development. ionic serve starts a local server and opens your app in your default browser, where you can test and debug. The server is smart enough to watch for changes on your files, so you don’t have to restart it, or refresh the page all the time. I even compiles your custom SASS code automatically.

One thing I wanted to do was to bundle custom Gulp tasks, so they would get executed when I start the server. Although not really documented, this is possible. I figured it out by looking at the source code of the serve.js file

https://github.com/driftyco/ionic-cli/blob/master/lib/ionic/serve.js#L139

All you need to do is to provide an array of startup tasks to the ionic.project file (if one exists already, simply plug in your custom tasks as items in the array).

"gulpStartupTasks": ["browserify", "sass", "watch"]

NOTE : Startup tasks will be called only once, when you call ionic serve. This means that if you have tasks that require execution on code change, they won’t work. This turned out to be my case. I wanted to integrate browserify in my ionic app, so I created a browserify gulp task. It executes every time I start the server, but does not work upon code change (unless I restart the server). To make it work on code change, I will have to search for other ways, like integrate it as part of the watch task. Later, I will write about that too.