Gulp 4和BrowserSync：样式注入？

Question

我正在尝试使用与Gulp 4的浏览器同步，但是bs不保留状态，而是完全刷新。这不是很有用。似乎不再支持真正的注射。如果你想贡献，我filed an issue on 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')
);

提前致谢。

Answer 1

固定。这是我出错的地方：

browser-sync构造函数接受一个options对象，该对象可以包含files数组。我读过的大部分教程，包括谷歌自己的Web入门套件的gulpfile，都不包括这个。事实证明，这是样式注入以保持状态所必需的。

此外，不要将.stream()或.reload()作为样式任务中的最终管道。它不需要，并且会短路式注入，强制完全刷新。

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

希望这有助于任何人面对这个问题。

我还关闭了相应的github问题，以及posted my gulpfile

Answer 2

差不多3年后，Gulp 4现在看起来有点不同，请参阅https://gulpjs.com/docs/en/getting-started/creating-tasks

要获得完整的Gulp 4 kickstart示例，请参阅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