Set up Live Reload on a gulp generator based Ionic project - angular

Question

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

My gulp configuration paths are as follows:

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

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

I cannot use the ionic run android --livereload as described here in the document , because it synchronizes the www folder, where (after a gulp build ) I have mini files, not source files.

So, I would like to somehow mix the two commands gulp serve and ionic run android --livereload , but I sincerely don't know how to do this.

Answer 1

I decided to update my gulp watch task, which every time a change occurs there, it starts gulp build while the ionic run android --livereload .

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

 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 the terminal tab:

 ionic run android --livereload 

and in another terminal tab:

 gulp watch --livereload 

Enjoy it!