Sass 如何处理BrowserSync和gulp手表？

我正在尝试设置我的gulpfile.js文件，其中包含“scss到css转换”/“watcher/live reload”等功能

// 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'));

首先，在我做了watcher之后，我构建了css转换代码，它工作得很好，但是当我添加了“browserSync”部分时，它破坏了一切。 当我启动“startDev”时，新选项卡将打开，因此我猜服务器将启动，但之后不会发生任何事情，正如您在控制台上看到的：

你知道问题出在哪里吗

---

提前感谢

第一步：不要将您的任务和所需的软件包同时命名为

browserSync

。更改其中一个。我将我的任务重命名为“同步”。但是它会在控制台上产生相同的结果：/n您有这个选项：

baseDir:'src'

但是您的css目标是

dist

。所以您正在尝试加载

src

html-应该是

dist

？哦，好的。。我用baseDir:destination替换了baseDir:'src'，它等于./dist。还没有改变：/对于每个想做几乎相同事情的人来说：我在这个视频中找到了解决方案：