在基于生成器的 Ionic 项目上配置 Live Reload-gulp-angular

Question

我有一个 Ionic 1.3.1 项目，其架构基于古老但黄金的生成器-gulp-angular，我想在其中启用 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 as described in the doc here 因为它会同步 www 文件夹，其中（在 gulp build 之后）我有缩小的文件而不是源文件。

所以我想以某种方式混合使用 gulp serve 和 ionic run android --livereload 这两个命令，但我真的不知道如何实现。

Answer 1

我解决了更新我的 gulp watch 任务，每次有变化它都会运行 gulp build 而命令 ionic run android --livereload 是运行。

我在我的 gulp watch 中添加了一个标记 --livereload，所以我的 /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

尽情享受吧！

在基于生成器的 Ionic 项目上配置 Live Reload-gulp-angular

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

android

angularjs

gulp

ionic-framework

gulp-livereload