在Ionic项目上基于generator-gulp-angular配置Live Reload

Question

我有一个Ionic 1.3.1项目，其架构基于旧的但黄金的generator-gulp-angular，我想在该设备(Android)上启用Live Reload。

我的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这两个命令，但我真的不知道如何实现这一点

Answer 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

享受吧!