Настроить Live Reload для ионного проекта на основе генератора-глотка-углового

У меня есть проект Ionic 1.3.1 с архитектурой, основанной на старом, но золотом, генераторном глотке, в котором я хотел бы включить Live Reload на устройстве (Android).

Мои пути конфигурации gulp выглядят так:

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

Это означает, что для запуска проекта в браузере я использую gulp serve и для запуска в устройстве Android я использую gulp build && ionic run android,

Я не могу использовать команду ionic run android --livereload как описано в документе здесь, потому что он синхронизирует www папка где (после gulp build) У меня есть уменьшенные файлы, а не исходные файлы.

Поэтому я хотел бы как-то смешать две команды gulp serve а также ionic run android --livereload но искренне я не знаю, как этого добиться.

1 ответ

Решение

Я решил обновить мой gulp watch задача, что каждый раз, когда есть изменение, он запускает gulp build в то время как команда ionic run android --livereload бежит.

Я добавил флаг --livereload к моему gulp watch, Так что мой /gulp/watch.js файл выглядит так:

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

Как пользоваться:

на вкладке терминала:

ionic run android --livereload

и на другой вкладке терминала:

gulp watch --livereload

Наслаждайтесь!

Другие вопросы по тегам