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

【问题标题】：Browsersync gulp task will not inject CSS (or gulp won`t run another watch task in background)Browsersync gulp 任务不会注入 CSS（或者 gulp 不会在后台运行另一个监视任务）
【发布时间】：2018-02-05 17:04:36
【问题描述】：

似乎监视任务在 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 VM (homestead/laravel) 中运行它，如果它有什么不同的话。

【问题讨论】：

标签： gulp browser-sync

【解决方案1】：

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

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 上。

【讨论】：

【解决方案2】：

试试这个

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

【讨论】：