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

Question

我正在尝试弄清楚如何结合使用浏览器同步和gulp,以及让浏览器在编译后自动更新较少文件中的更改.我现在得到的是导致系统中出现重新加载的消息"连接到浏览器同步",但我没有看到浏览器发生更改.在禁用缓存的完整手动重新加载中,我看到了预期的更改,因此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);
});

原始代码无法工作的一个原因可能是编译后对源文件的丢失引用(但这只是一个假设)