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

ionic-v1
1

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) {
  gulp
    .src(['src/**/[^_]*.pug'])
    .pipe(pug({
      basedir: 'src/views',
      doctype: 'html'
    }))
    .pipe(gulp.dest('./src/'))
    .on('end', done);
});

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

// 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: https://github.com/driftyco/ionic-app-scripts, in an attempt to ignore .pug files incase that is flagging anything, but no such luck.

Really would appreciate some help.

Cheers

2

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()
};