Gulp 4 & BrowserSync：样式注入？

Question

我正在尝试使用 Gulp 4 的浏览器同步，但 bs 不保留状态，而是进行完全刷新。这不是很有用。看来 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 构造函数接受一个选项对象，它可以包含一个 files 数组。我读过的大多数教程，包括 Google 自己的 Web Starter Kit 的 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

Gulp 4 & BrowserSync：样式注入？

Gulp 4 & BrowserSync: Style Injection?

javascript

gulp

browser-sync