Html 使用浏览器同步重新加载CSS更改页面

我正在一个项目中使用，并尝试在Gulp中设置一个任务，当我更改

.scss

文件时，该任务将刷新我的浏览器

当前的

gulpfile.js

，我正在考虑使用它来实现这一点。除了我不知道如何实现这一点，因为这个框架使用Swig模板

我本来想做这样的事情，但这似乎不起作用

var browserSync = require('browser-sync');

gulp.task('bs-reload', function () {
    browserSync.reload();
});

gulp.task('watch-css', ['basswork', 'site-basswork', 'customizer-data'], function() {
  gulp.watch([
    './src/**/*.css',
    './docs/src/css/**/*.css'],
    ['basswork', 'site-basswork', 'customizer-data', 'bs-reload']);
});

如果有人能在这方面帮助我，我将非常感激

---

提前谢谢

您在哪里启动服务器？你试着跟着吗

您必须设置与此类似的任务：

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./"
        }
    });
});

重新加载浏览器同步不需要任务，每次调用此任务时，如果服务器未运行，它将创建服务器，或者同步/重新加载文件

另外，您只需将

浏览器同步

任务添加到调用的任务数组中，类似于您现在所做的操作：

gulp.task('watch-css', ['basswork', 'site-basswork', 'customizer-data'], function () {
    gulp.watch([
        './src/**/*.css',
        './docs/src/css/**/*.css'
    ], ['basswork', 'site-basswork', 'customizer-data', 'browser-sync']);
});

---

最后就这样解决了：

var browserSync = require('browser-sync');
var reload = browserSync.reload;

gulp.task('browser-sync', function(){
  browserSync({
    server: {
      baseDir: "./"
    }
  });
});

gulp.task('sass', function() {
  gulp.src(['./scss/*.scss'])
  .pipe(sass({
    outputStyle: 'expanded'
  }))
  .pipe(gulp.dest('./css'))
  .pipe(minifycss())
  .pipe(gulp.dest('./css'))
  .pipe(reload({stream: true}));
});

---

现在，每次我更改.scss文件时，浏览器都会用更新的CSS刷新。希望这对某人有所帮助。

我对此有点困惑，因为第31行似乎正在启动服务器。这些服务器不会冲突吗？第31行？你是什么意思？我在问题（）中链接了当前的gulpfile。第31行有一个任务叫做

service

。为什么要创建gulp Web服务器？浏览器同步将为您创建一个服务器。正在从相对于gulpfile.js的

/

（当前文件夹）创建服务器。如果您必须预编译任何模板，您可以使用它来实现自动化。编译完文件后，任何静态服务器（gulp-webserver、connect、livereload、browser sync等）都将以相同的方式工作，您提供服务器根，它将从浏览器到服务器根的路径转换并返回相应的文件。