Npm browsersync+gulp不注入css-仅重新加载

我最近开始使用BrowserSync，我遵循他们的建议，调整了一些东西来解决我遇到的一些问题，但是现在，当它工作时，它似乎每次都重新加载页面，而不是注入CSS

我的吞咽文件：

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('autoprefixer');

gulp.task('scripts', function() {
    return gulp.src([
        'js/dev/main/**/*.js',
        // We have to set the bootstrap lines separately as some need to go before others
        'js/dev/bootstrap/alert.js',
        'js/dev/bootstrap/collapse.js',
        'js/dev/bootstrap/tooltip.js',
        'js/dev/bootstrap/popover.js',
        'js/dev/bootstrap/tab.js',
        'js/dev/bootstrap/transition.js',
    ])
        .pipe(sourcemaps.init())
            .pipe(concat('scripts.js'))
        .pipe(sourcemaps.write('../maps'))
        .pipe(gulp.dest('./js'));
});

gulp.task('uglify', ['scripts'], function() {
    return gulp.src('js/scripts.js')
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify({
            mangle: false
        }))
        .pipe(gulp.dest('./js'));
});

// create a task that ensures the `uglify` task is complete before
// reloading browsers
gulp.task('js-watch', ['uglify'], function (done) {
    browserSync.reload();
    done();
});

/* Creates the standard version */

gulp.task('styles', function() {
    return gulp.src('scss/**/*.scss')
        .pipe(sourcemaps.init())
            .pipe(sass().on('error', sass.logError))
            .pipe(postcss([
                autoprefixer({
                    browsers: [
                        'last 4 Chrome versions',
                        'last 4 Firefox versions',
                        'last 4 Edge versions',
                        'last 2 Safari versions',
                        'ie >= 10',
                        '> 1.49%',
                        'not ie <= 9'
                    ],
                    cascade: false
                }),
            ]))
        .pipe(sourcemaps.write('../maps'))
        .pipe(gulp.dest('./css/'))
        .pipe(browserSync.stream(({match: 'css/**/*.css'})));
});

/* Creates the minified version */

gulp.task('css-minify', ['styles'], function() {
    return gulp.src('scss/**/*.scss')
        .pipe(sourcemaps.init())
            .pipe(sass({
                outputStyle: 'compact' // Options: nested, expanded, compact, compressed
            }).on('error', sass.logError))
            .pipe(postcss([
                autoprefixer({
                    browsers: [
                        'last 4 Chrome versions',
                        'last 4 Firefox versions',
                        'last 4 Edge versions',
                        'last 2 Safari versions',
                        'ie >= 10',
                        '> 1.49%',
                        'not ie <= 9'
                    ],
                    cascade: false
                }),
            ]))
            .pipe(cleanCSS({
                advanced: false,
                aggressiveMerging: false
            }))
            .pipe(rename({suffix: '.min'}))
        .pipe(sourcemaps.write('../maps'))
        .pipe(gulp.dest('./css/'));
});

gulp.task('browser-sync', function() {
    browserSync.init({
        open: 'external',
        proxy: "bmmedia.dev",
        host: 'bmmedia.dev',
        // port: 5000,
        browser: "chrome",
    });
});

gulp.task('watch', ['browser-sync', 'js-watch', 'css-minify'], function() {
    gulp.watch(['scss/**/*.scss', 'js/dev/**/*.js'], ['js-watch', 'css-minify']);
});

gulp.task('default', ['js-watch', 'css-minify']);

---

但是现在当.scss文件更改时，它不会注入或重新加载。

我相信我已经修复了它

我的手表任务我改为：

gulp.task('watch', ['browser-sync'], function() {
    gulp.watch(['scss/**/*.scss'], ['css-minify']);
    gulp.watch(['js/dev/**/*.js'], ['js-watch']);
});

然后在我的样式任务中，我更改了这一行：

.pipe(browserSync.stream(({match: 'css/**/*.css'})));

致：

---

不确定为什么它找不到CSS更改，我所知道的是它现在似乎工作了。

您也可以尝试只查看编译后的输出文件

Dest/css/styles.css
Dest/js/my.js

对sass/js模块的任何更改都将反映在最终的css/js输出文件中。浏览器重新加载仅在css/js编译完成时触发，而不是在sass/js包编译时尝试重新加载

另外，看一看吞咽更新。如果最终输出文件dest/css/styles.css相对于使其成为src/sass/**.scss的文件发生了更改，则可以使用该文件检查/触发任务

---

这对于图像也非常方便，无需在每个版本上缩小它们，只有在添加了更新的其他检查时，您才需要执行更改。

您的意思是将浏览器同步任务与监视任务分离，这样它就不会试图在包完成时运行？另外，感谢您提供的关于gulp更新版的提示，它看起来是一个不错的插件。pipereload{stream:true}；应该放在每个脚本进程的末尾，以确保刷新浏览器，因此在主监视任务fn期间无需监视浏览器重新加载任务。好的，我没有监视任务-它只是在监视运行时运行；但由于监视任务是一个空闲等待更改的进程，我不确定，但我假设它只运行一次，然后在发生更改时运行请求的任务，其中不包括浏览器同步任务，因为只有在监视任务本身运行时才应启动该任务。

.pipe(browserSync.stream());

Dest/css/styles.css
Dest/js/my.js