Gulp Task: On Error Resume Next

Previously, as I have mentioned that I have been working on hybrid mobile apps using Ionic for a while. Since then, I was officially working on Node.js full-time – a great experience so far. Ionic hires Gulp as the task runner, which is really impressive.

As a developer working on anything front-end, you would like to reload the page whenever you make changes as the Minimum Viable Feature. In short, you want your developer experience smooth. So features like live preview/reload is something a front-end developer can’t live without. Like building a dream house with only hammer and nails is not fun.

Gulp comes all these features a front-end developer desire (although, they are not restricted to gulp). I am really enjoying building mobile apps while testing the most things in a browser.

  • Making changes to AngularJS controllers, it transpiles to ES5 JavaScript and reloads.
  • Making changes to html files, it refreshes.
  • Making changes to Sass files, it transpiles the css, prefix the vendor specific rules, and injects to the page.
  • Missing a semi-colon in your Sass file, … … … … … [10 seconds later], nothing happened?! Go back to shell… BOOM!!! The task crashed…

It happens all the time because typo is something very much a human factor. Terminating the Gulp instance, then re-runing the Gulp task is definitely something you want to avoid.

keep calm and on error resume next

On Error Resume Next is a super nice feature to change control flow, comes with Visual Basic in the early days. The idea is dead simple, whenever error happens, don’t crash and move on. It’s so nice a feature so even Reactive Extension offers this feature as well.

Gulp is a task runner based on the stream. It emits an error event when error happens. The reason the task crashes is because the error event is not handled properly, so the stream is never ended normally.

So to fix this is simply to guide the stream to the exit.

And in code, this is what you can do

Ionic: using $ionicHistory to calm down the ion-nav-bar

Being working on a mobile app using Ionic for a while. Find Ionic is really nice to build hybrid mobile apps. However, one thing I find uncomfortable with while dealing with workflows.

Ionic provides a directive ion-nav-bar, which displays side-menu toggle or back button based on the history managed by $ionicHistory.

It works great except this tiny little thingy. For example, given we have three screens
– Events, to show a list of events
– Event Detail, to display the details of the event
– Update Event, to update the details of the event

The workflow is simple, the app shows the events, user go to the specific event and make some changes, then go back to the events page.


But then, the ion-nav-bar still shows the back button. This might be okay for iOS app, because there isn’t a physical back button. However, on Android, I tend to tap the back button to quit the app. But instead, I go backwards like a crazy time machine!

After a bit conversion with Dr. Google, it turns out we can prevent this by reseting the navigation history. It’s actually well documented in the $ionicHistory documentation.


RTFM aye

So here is the meat

historyRoot: true

I find it nice to be part of the resolving phase, here’s the full example.