manzapanza manzapanza - 25 days ago 8
Android Question

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

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.

Answer

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!