Customising Ionic App Scripts - JS build triggered on html change - Watch issue?

Currently building an Ionic 2 app and we have a relatively unique templating process. Our web dev team are using pug/jade to build out the html templates. This requires a seperate gulp file, that runs alongside ionic serve.

gulpfile.js (for reference)

var gulp = require('gulp');
var pug = require('gulp-pug');
var watch = require('gulp-watch');

gulp.task('build', function(done) {
      basedir: 'src/views',
      doctype: 'html'
    .on('end', done);

// gulp.task('watch', [ 'clean', 'build' ], function() {
gulp.task('watch', ['build'], function() {
  watch(['src/**/*.pug'], function() {

// gulp.task('default', [ 'clean', 'build' ]);
gulp.task('default', ['watch']);

We are finding that when we update a .pug template that Ionic detects the change in the resulting HTML (desired outcome) but is also reporting a change in www/build/main.js and begins a full rebuild (undesired). This results in a less than stellar workflow as the page is live-reloaded twice in the browser.

As you can see from the gulpfile, no js is never touched by our gulpfile, so we are bit stumped as to why it’s reporting a change in the www/build/main.js and rebuilding.

Any ideas?

We have followed the guide here:, in an attempt to ignore .pug files incase that is flagging anything, but no such luck.

Really would appreciate some help.


Extra Info

Here is our custom watch.config.js. No errors during ionic serve.

var watch = require('@ionic/app-scripts/dist/watch');
var copy = require('@ionic/app-scripts/dist/copy');
var copyConfig = require('@ionic/app-scripts/config/copy.config');

//Custom Watch config to ignore changes in pug templates.
module.exports = {
  srcFiles: {
    paths: ['{{SRC}}/**/*.(ts|html|s(c|a)ss)'],
    options: { ignored: ['{{SRC}}/**/*.spec.ts', '{{SRC}}/**/*.e2e.ts', '**/*.DS_Store', '{{SRC}}/**/*.pug', '**/*.pug'] },
    callback: watch.buildUpdate
  copyConfig: copy.copyConfigToWatchConfig()