浏览器同步重新加载但 CSS 没有随 LESS 和 Gulp 改变

Question

我想弄清楚如何将浏览器同步与 gulp 和 less 结合使用，以使浏览器在编译后 less 文件发生更改时自动更新。我现在得到的是导致系统似乎重新加载并显示一条消息 "Connected to Browser Sync" 但我没有看到浏览器中发生变化。在禁用缓存的完全手动重新加载时，我看到了预期的更改，因此 css / less 任务似乎部分工作但我在浏览器同步中遗漏了一些东西。

哦，我在主 .less 文件中使用 @import 语句来为每个单独的模块引入更少的文件。感谢您的宝贵时间和帮助！

gulp.task('less', function(){
return gulp.src(basepath + 'styles/emma.less')
    .pipe(plumber())
    .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(autoprefixer({
            browsers: ['last 2 versions']
        }))
        .pipe(minifyCSS())
    .pipe(sourcemaps.write('./'))
    .pipe(filesize())
    .pipe(gulp.dest( paths.dest + '/css' ))
    .pipe(reload({stream: true}));
});
gulp.task('browser-sync', function() {
    browserSync({
        proxy: 'localhost:8080'
    });
});    
//dev task to compile things on the fly
gulp.task('dev', ['browser-sync'], function(){
    gulp.watch(paths.scripts, ['scripts']);
    gulp.watch(paths.less, ['less']);
    gulp.watch(paths.templates, ['templates']);
});

Answer 1

使 browserSync 以这种方式工作的一个好方法是在生成的文件上设置一个新的侦听器。您将 LESS 编译为 CSS、

gulp.task('less', function(){
return gulp.src(basepath + 'styles/emma.less')
    .pipe(plumber())
    .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(autoprefixer({
            browsers: ['last 2 versions']
        }))
        .pipe(minifyCSS())
    .pipe(sourcemaps.write('./'))
    .pipe(filesize())
    .pipe(gulp.dest( paths.dest + '/css' ));
});

并将文件观察器放在结果上，触发重新加载：

gulp.task('dev', ['browser-sync'], function(){
    gulp.watch(paths.less, ['less']);
    gulp.watch(paths.dest + '/css/**/*.css', reload);
});

原始代码无法运行的一个原因可能是源文件在编译后丢失了引用（不过这只是一个假设）

浏览器同步重新加载但 CSS 没有随 LESS 和 Gulp 改变

Browser sync reloading but CSS not changing with LESS and Gulp

less

gulp

browser-sync