Browsersync gulp 任务不会注入 CSS（或者 gulp 不会运行后台另一个监视任务）

Question

似乎监视任务停止在 browserSync.init。例如，我可以通过 gulp cssInkject 单独调用所有任务运行，但它们赢得了 t run when gulp watch is run. Browsersync will give "File event [change] : resources/assets/styles/modules/_breadcrumbs.css" notification but wont 运行捆绑 css 的任务并且不会注入 CSS（流）。

下面是代码：

var gulp = require('gulp'),
watch = require('gulp-watch'),
browserSync = require('browser-sync').create();

gulp.task('watch', function() {

    browserSync.init(null, {
        notify: false,
        browser: "chrome",
        server: {baseDir: "app"},
        port: 8000
    });

    watch('./app/*.html', function() {
        browserSync.reload();
    });

    watch('./app/assets/styles/**/*.css', function() {
        gulp.start('cssInject');
    });

    watch('./app/assets/scripts/**/*.js', function() {
        gulp.start('scriptsRefresh');

    });

});

gulp.task('cssInject', ['styles'], function() {
    return gulp.src('./app/temp/styles/styles.css')
    .pipe(browserSync.stream());
});

gulp.task('scriptsRefresh', ['scriptsBundle'], function() {
        browserSync.reload();

    });

gulp.task('styles', function() {
  return gulp.src('./app/assets/styles/styles.css')
    .pipe(postcss([cssImport, mixins, cssvars, nested, hexrgba, autoprefixer]))
    .on('error', function(errorInfo) {
      console.log(errorInfo.toString());
      this.emit('end');
    })
    .pipe(gulp.dest('./app/temp/styles'));
});

我在 Ubuntu 虚拟机 (homestead/laravel) 中运行安装它，如果它有任何不同的话。

Answer 1

试试这个

gulp.task('cssInject', ['styles'], function() {
    browserSync.stream();
});

Answer 2

我不知道它为什么有效，但它有效：

gulp.watch('./app/*.html', function() {
    browserSync.reload();
});

gulp.watch('./app/assets/styles/**/*.css', function() {
    gulp.start('cssInject');
});

gulp.watch('./app/assets/scripts/**/*.js', function() {
    gulp.start('scriptsRefresh');

});

基本上将 'gulp' 添加到 'watch' 就解决了这个问题，这更奇怪，因为它只在本地 windows 环境中与 'watch' 一起使用，而不是在 homestead laravel.

Browsersync gulp 任务不会注入 CSS（或者 gulp 不会 运行 后台另一个监视任务）

Browsersync gulp task will not inject CSS (or gulp won`t run another watch task in background)

gulp

browser-sync

Browsersync gulp 任务不会注入 CSS（或者 gulp 不会运行后台另一个监视任务）