我正在尝试使用 gulp 配置浏览器同步,我想观看我的 scss 文件并将它们编译并保存在一个名为 dist 的文件夹中,当进行更改时,我还想在此过程完成后重新加载我的浏览器。到目前为止,我成功地在新窗口中观看、编译和加载结果,但是当在 scss 文件中进行进一步更改时,我无法刷新浏览器窗口..我在这里做错了什么?我也想知道这是否是正确的方法。
这是我的 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(){
});