浏览器同步重新加载不起作用

Question

我正在尝试配置浏览器与 gulp 同步，我想查看我的 scss 文件并编译它们并将它们保存在名为 dist 的文件夹中，当进行更改时，我还想重新加载我的浏览器当这个过程完成时。到目前为止，我已经成功地观看、编译和加载了一个新的 window 结果，但是当在 scss 文件中进行进一步的更改时，我无法刷新浏览器 window ..这是什么我在这里做错了吗？我也想知道这样做是否正确。

这是我的 gulpfile.js

'use strict';
    var gulp = require('gulp'),
        scss = require('gulp-sass'),
        maps = require('gulp-sourcemaps'),
        browsersync = require("browser-sync");




gulp.task("ScssCompiler",function(){
    gulp.src("scss/style.scss")  
    .pipe(maps.init())
    .pipe(scss()) 
    .pipe(maps.write('./'))
    .pipe(gulp.dest('dist')); 
    console.log("entered ScssCompiler");
});

gulp.task("sass-watch",["ScssCompiler"],browsersync.reload);


gulp.task("watchsass",function(){
    browsersync({
        server:{
            baseDir:'./',
        }
    });
    gulp.watch(['scss/*.scss'],['sass-watch']);
    console.log("entered watchsass");
});

gulp.task("build",['watchsass'],function(){
    console.log("entered build");
});

gulp.task("default",['build'],function(){

});

Answer 1

你可以看看我的代码：解决所有问题。

https://github.com/krmao/template/blob/gulp/build-script/Build.js

浏览器同步重新加载不起作用

Browser sync reloading not working

gulp

browser-sync

gulp-watch

gulp-sass

gulp-browser-sync