Gulp 4和BrowserSync：样式注入？

Question

我正在尝试在Gulp 4中使用browser-sync，但bs没有保留状态，而是进行了完全刷新。这并不是很有用。看起来bs不再支持真正的注入。如果您想要贡献，我在GH上提出了一个问题。

以下是相关代码：

// styles:dev task    
gulp.task('styles:dev', function() {
    return gulp.src(config.src)
        .pipe(sourcemaps.init())
        .pipe(postcss(config.postcss.dev))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(config.dest.dev))
        .pipe(browserSync.stream());
});

// browserSync task    
gulp.task('browserSync', function(cb) {
    browserSync.init(config, cb);
});

// Watch task:
gulp.task('watch:styles', function() {
    return gulp.watch(config.paths.css,
        gulp.series('styles:dev'));
});

gulp.task('watch', gulp.parallel('watch:styles'));

// default task    
gulp.task('default',
    gulp.series('clean:dev',
        gulp.parallel('copy:dev', 'styles:dev'), 'browserSync', 'watch')
);

提前感谢。

- JamesJosephFinn

Answer 1

问题已解决。我犯了以下错误：

browser-sync构造函数需要一个options对象，其中可以包含一个files数组。我阅读的大部分教程，包括谷歌自己的Web Starter Kit的gulpfile都没有包括这个选项。事实证明，这是必需的，以保留状态进行样式注入。

此外，在样式任务中不要将.stream()或.reload()作为最后一个管道传递。这是不必要的，并且会短路样式注入，强制进行完全刷新。

最后，browserSync进程不能被终止，watch和browserSync任务必须并行执行，以便进行实时样式注入。

希望这能帮助面临此问题的任何人。

我也关闭了相应的github问题，并发布了我的gulpfile

- JamesJosephFinn

---

如上所述，我在Github上发布了gulpfile：https://github.com/BrowserSync/browser-sync/issues/951 - JamesJosephFinn

它不应该被终止是什么意思？ - Muhammad Umer

非常感谢。 “watch和browserSync任务必须并行执行”这部分是救了我。 - Shad

Answer 2

近3年后，Gulp 4现在看起来有些不同，详见https://gulpjs.com/docs/en/getting-started/creating-tasks

要获得完整的Gulp 4快速启动示例，请参见https://gist.github.com/leymannx/8f6a75e8ad5055276a71d2901813726e

// Requires Gulp v4.
// $ npm uninstall --global gulp gulp-cli
// $ rm /usr/local/share/man/man1/gulp.1
// $ npm install --global gulp-cli
// $ npm install
const { src, dest, watch, series, parallel } = require('gulp');
const browsersync = require('browser-sync').create();
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
const plumber = require('gulp-plumber');
const sasslint = require('gulp-sass-lint');
const cache = require('gulp-cached');

// Compile CSS from Sass.
function buildStyles() {
  return src('scss/ix_experience.scss')
    .pipe(plumber()) // Global error listener.
    .pipe(sourcemaps.init())
    .pipe(sass({ outputStyle: 'compressed' }))
    .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7']))
    .pipe(sourcemaps.write())
    .pipe(dest('css/'))
    .pipe(browsersync.reload({ stream: true }));
}

// Watch changes on all *.scss files, lint them and
// trigger buildStyles() at the end.
function watchFiles() {
  watch(
    ['scss/*.scss', 'scss/**/*.scss'],
    { events: 'all', ignoreInitial: false },
    series(sassLint, buildStyles)
  );
}

// Init BrowserSync.
function browserSync(done) {
  browsersync.init({
    proxy: 'blog.localhost', // Change this value to match your local URL.
    socket: {
      domain: 'localhost:3000'
    }
  });
  done();
}

// Init Sass linter.
function sassLint() {
  return src(['scss/*.scss', 'scss/**/*.scss'])
    .pipe(cache('sasslint'))
    .pipe(sasslint({
      configFile: '.sass-lint.yml'
    }))
    .pipe(sasslint.format())
    .pipe(sasslint.failOnError());
}

// Export commands.
exports.default = parallel(browserSync, watchFiles); // $ gulp
exports.sass = buildStyles; // $ gulp sass
exports.watch = watchFiles; // $ gulp watch
exports.build = series(buildStyles); // $ gulp build

- leymannx