sass - 如何处理 BrowserSync 和 gulp-watch？

Question

我尝试使用“scss 到 css 转换”/watcher/live reload 等功能设置我的 gulpfile.js 文件。

// Variables
var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
var source = './src';
var destination = './dist';
var browserSync = require('browser-sync');

// Server
gulp.task('browserSync', function(){
    browserSync.init({
        server: {
            baseDir: 'src'
        }
    })
});

// Task build : Scss -> Css
gulp.task('buildCss', function () {
    return gulp.src(source + '/assets/styles/*.scss')
        .pipe(plugins.sass())
        .pipe(plugins.cssbeautify({indent: '  '}))
        .pipe(plugins.autoprefixer())
        .pipe(gulp.dest(destination + '/assets/styles/'));
});

gulp.task('watch', function () {
    gulp.watch(source + '/assets/styles/*.scss', gulp.series('buildCss'));
});

gulp.task('startDev', gulp.series('browserSync', 'watch'));

首先，我构建了 css 转换代码，在我做了观察器之后它运行良好，但是当我添加“browserSync”部分时，它打破了一切。当我启动“startDev”时，新选项卡会打开，所以我猜服务器正在启动，但是正如您在控制台上看到的那样，之后什么也没有发生：https ://i.stack.imgur.com/u82Jn.png

你知道问题出在哪里吗？

提前致谢

标签： sassgulpbrowser-syncgulp-watch