使用 Gulp 和 BrowserSync 进行 SASS + CSS 注入

Question

刚刚开始使用 BrowserSync，我有一个关于 SASS + CSS 注入配置的常见用例的问题。

我有点困惑的是天气我可以给server 属性命名。

在文档here 中，他们使用"./app"。我可以使用其他名称，例如"./site"，还是只能使用"./app"？

这是代码

// task 
gulp.task('serve',['sass'], function (){

    // static server 
    browserSync.init({
        server: "./app"
    });

    // watching html and scss files for changes then reloading browser
    gulp.watch("app/scss/*.scss", ['sass']);
    gulp.watch("app/*.html").on('change', browserSync.reload);

});

Answer 1

更新

如果您希望将browserSync 设置为具有实时重新加载功能的静态服务器，那么您的方法非常正确。您可以使用 baseDir 选项将 browsersync 指向存储库中的任何文件夹。您还可以使用多个目录。如需更多信息，请查看选项documentation。

首先。我希望将您的任务分开。

就个人而言，我会选择让我的服务器任务类似于；

gulp.task('serve', ['build'], function(event) {
  var server = browsersync.create();
  server.init({
    baseDir: 'app/'
  });
  return server.watch('app/**', function(evt, file) {
    server.reload();
  });
});

注意build 是如何依赖的。这可确保在我们启动 BrowserSync 时，我们提供的所有文件都已到位。

保持其通用性，然后我们可以将 SCSS 相关任务拆分为它们自己的任务，例如 scss:compile 和 scss:watch。

gulp.task('scss:compile', function(){
    return gulp.src('src/scss/**/*.scss')
        .pipe(plumber())
        .pipe(scss())
        .pipe(gulp.dest('app/css/');
});

和

gulp.task('scss:watch', function() {
    gulp.watch('src/scss/**/*.scss', ['scss:compile']);
});

用于 CSS 注入。这样做有两种选择

记住注入不同于重新加载。重新加载会重置页面状态，而注入不会影响当前页面状态，只会注入样式。

选项一是使用您的 SASS 编译的管道内容调用 browsersync.stream()，如下所示；

gulp.task('scss:compile', function() {
  return gulp.src('src/scss/**/*.scss')
    .pipe(plumber())
    .pipe(scss())
    .pipe(gulp.dest('app/css')
    .pipe(browsersync.stream());
});

请注意，最后一个管道会注入更改。这也需要检查 BrowserSync 手表中的文件类型，以便仅在非 CSS 文件更改时重新加载。

这个选项没问题。但是，我认为将它捆绑在最后并与 BrowserSync 设置代码分开还不清楚。

第二个选项（个人首选）是使用 BrowserSync 观察更改，如果 CSS 文件发生更改，请使用 vinyl 将这些更改流式传输到 BrowserSync。

类似以下的东西往往会起作用；

var gulp      = require('gulp'),
  browsersync = require('browser-sync'),
  vss         = require('vinyl-source-stream'),
  vb          = require('vinyl-buffer'),
  vf          = require('vinyl-file');

gulp.task('serve', ['build'], function() {
  var server = browsersync.create();
  server.init({ baseDir: 'app/' });
  return server.watch('app/**', function(evt, file) {
    if (evt === 'change' && file.indexOf('.css') === -1)
      server.reload();
    if (evt === 'change' && file.indexOf('.css') !== -1)
      vf.readSync(file)
        .pipe(vss(file))
        .pipe(vb())
        .pipe(server.stream());
  });
});

希望能帮到你！