Gulp + Browsersync：只想注入 CSS

Question

我已经尝试让实时注射工作两天了...准备放弃，因为我已经阅读了码头和更多的 git is:issues than I want to repeat.

我不使用像 less 或 sass 这样的预处理器。我只想通过 Browsersync 重新加载更改后的 CSS。如果我保存文件并且设置了标题，则页面会重新加载。我已经尝试了很多选择，我的头在旋转。 这是我尝试的最新版本。有人愿意带我走正确的道路吗？

var gulp        = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();

gulp.task('serve', function() {
    browserSync.init({
      proxy: "https://subdomain.mysite.dev",
      open: false,
      browser: 'firefox-developer',
      injectChanges: true,
      logLevel: "debug"
    });
    gulp.watch("./style.css", ['css']);
});

gulp.task('css', function() {
  return gulp.src('./style.css')
    .pipe(autoprefixer('last 2 versions'))
    .pipe(browserSync.stream());
});

gulp.task('default', ['serve']);

Kubuntu Linux 17.04

浏览器同步--版本

2.18.12

节点-v

v7.10.0

npm -v

5.0.1

Answer 1

试试

.pipe(browserSync.reload({ stream:true }));

而不是

.pipe(browserSync.stream());

然后正如@The Dancing Code 所说，在您调用 autoprefixer 之后使用 gulp.dest，并确保生成的文件是您的 html 中的文件。