通过Gulp和BrowserSync进行SASS + CSS注入

Question

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

我有点困惑的是，我可以给server属性起自己的名字。

在这里的文档中，他们使用"./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选项将baseDir存储库中的任何文件夹。 您也可以使用多个目录。 有关更多信息，请查看选件文档 。

第一。 我希望将您的任务分解。

就个人而言，我会选择执行服务器任务，例如：

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

希望对您有所帮助！