Question

在我的构建过程中，我想将构建步骤的工件放入.tmp/serve目录中。

当我修改工作目录中的文件时，我设法设置gulp-watch来触发特定任务。 E.q.当我修改htmls时，它们被构建并且工件被粘贴到所需的.tmp/serve目录

我在使用.tmp/serve从browser-sync重新加载文件时遇到问题。当我多次保存工作目录中的更改时，browser-sync仅刷新之前的更改（ 1更改延迟）。我猜reload函数在gulp-dest完成之前触发。请注意，如果我手动刷新浏览器，则会显示当前更改。

我做错了吗？

构建htmls任务

gulp.task('html', ['styles'], () => {
  return gulp.src('app/*.html')
    .pipe($.if('*.html', $.minifyHtml({conditionals: true, loose: true})))
    .pipe(gulp.dest('.tmp/serve'))
    ;
});

Sever任务

const reload = browserSync.reload;

gulp.task('serve', ['styles', 'fonts', 'build:scripts', 'html', 'images'], () => {
  browserSync({
    notify: false,
    port: 9000,
    server: {
      baseDir: ['.tmp/serve'],
      routes: {
        '/bower_components': 'bower_components'
      }
    }
  });

  /***********  SEE THE LINES BELOW  **************/
  gulp.watch([
    '.tmp/serve/**/*',
  ]).on('change', reload);

  gulp.watch('app/styles/**/*.scss', ['styles']);
  gulp.watch('app/fonts/**/*', ['fonts']);
  gulp.watch('app/*.html', ['html']);
  gulp.watch('app/scripts/**/*', ['build:scripts']);
  gulp.watch('bower.json', ['wiredep', 'fonts']);
});

Answer 1

您可以在构建后使用run-sequence重新加载。

你的gulpfile会变成这样......

var gulp = require('gulp'),
    runSeq = require('run-sequence')
    ...
    ;

gulp.task('build', ['styles', 'fonts', 'build:scripts', 'html', 'images']);

gulp.task('serve', ['build', 'watch'], () => {
  browserSync({
    notify: false,
    port: 9000,
    server: {
      baseDir: ['.tmp/serve'],
      routes: {
        '/bower_components': 'bower_components'
      }
    }
  });

gulp.task('reload', function (callback) {
   browserSync.reload();
   callback();
});

gulp.task('watch', ['watch-styles', ...]);

gulp.task('watch-styles', function () {
   gulp.watch('app/styles/**/*.scss', function () {
      runSeq('styles', 'reload');
   });
});

/* And so on for every watch task */

请注意，run-sequence需要您的任务返回流或调用回调，否则会导致gulp无限期暂停。阅读Doc了解详情。

浏览器同步不是gulp-watch

1 个答案: