Configure Live Reload on a Ionic project based on the generator-gulp-angular

Question

I have an Ionic 1.3.1 project with an architecture based on the, old but gold, generator-gulp-angular in which I would like to enable Live Reload on the device (Android).

My gulp config paths look like:

exports.paths = {
  src: 'src',
  dist: 'www',
  tmp: '.tmp',
  e2e: 'e2e'
};

This means that to run the project in the browser I use gulp serve and to run in the Android device I use gulp build && ionic run android.

I can't use the command ionic run android --livereload as described in the doc here because it synchronizes the www folder where (after a gulp build) I have the minified files and not the source files.

So I would like to mix up in some way the two commands gulp serve and ionic run android --livereload but sincerely I don't know how to achieve this.

hello, you can check this link https://codepen.io/leob6/post/quick-tip-using-gulp-to-customize-the-serve-run-and-build-process-for-your-ionic-framework-apps — arjunaaji, Nov 14 '16 at 20:17

score 3 · Accepted Answer · answered Nov 15 '16 at 03:21

I solved updating my gulp watch task that every time there's a change it runs the gulp build while the command ionic run android --livereload is running.

I added a flag --livereload to my gulp watch, so my /gulp/watch.js file looks like:

gulp.task('watch', ['inject'], function () {

  var livereload = process.argv.length === 4 && process.argv[3] === '--livereload';

  gulp.watch([path.join(conf.paths.src, '/*.html'), 'bower.json'], ['inject-reload']);

  gulp.watch([
    path.join(conf.paths.src, '/app/**/*.css'),
    path.join(conf.paths.src, '/app/**/*.scss'),
    path.join(conf.paths.src, '/scss/*.scss')
  ], function(event) {
    if (livereload) {
      gulp.start('build');
    } else {
      if(isOnlyChange(event)) {
        gulp.start('styles-reload');
      } else {
        gulp.start('inject-reload');
      }
    }
  });

  gulp.watch(path.join(conf.paths.src, '/app/**/*.js'), function(event) {
    if (livereload) {
      gulp.start('build');
    } else {
      if(isOnlyChange(event)) {
        gulp.start('scripts-reload');
      } else {
        gulp.start('inject-reload');
      }
    }
  });

  gulp.watch(path.join(conf.paths.src, '/app/**/*.html'), function(event) {
    if (livereload) {
      gulp.start('build');
    } else {
      browserSync.reload(event.path);
    }
  });
});

How to use:

on a terminal tab:

ionic run android --livereload

and, on another terminal tab:

gulp watch --livereload

Enjoy!

Configure Live Reload on a Ionic project based on the generator-gulp-angular

1 Answers1