SASS + CSS 使用 Gulp 和 BrowserSync 注入

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());
  });
});

希望对您有所帮助！

SASS + CSS 使用 Gulp 和 BrowserSync 注入

SASS + CSS Injecting with Gulp and BrowserSync

html

javascript

css

sass

browser-sync