javascript - 通过Gulp和BrowserSync进行SASS + CSS注入(inject)

刚开始使用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);

});

最佳答案

更新

如果您希望通过实时重载将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());
  });
});

希望对您有所帮助！

关于javascript - 通过Gulp和BrowserSync进行SASS + CSS注入(inject)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32239370/