Gulp 4 & BrowserSync: Style Injection?

问题

I'm attempting to use browser-sync with Gulp 4, but bs is not preserving state, and instead does a full refresh. This is not very useful. It seems bs no longer supports true injection. I filed an issue on GH if you want to contribute.

Here is the pertinent code:

// 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')
);

Thanks in advance.

回答1:

Fixed. Here's where I went wrong:

The browser-sync constructor takes an options object, which can include a files array. Most of the tutorials I've read, including the gulpfile for Google's very own Web Starter Kit, do not include this. As it turns out, this is required for style injection to preserve state.

Furthermore, do not pass .stream() or .reload() as the final pipe in your styles task. It is not needed, and will short circuit style injection, forcing a full refresh.

Finally, the browserSync process must not be terminated, and watch and browserSync tasks must execute in parallel in order for live style injection to take place.

Hope this helps anybody facing this issue.

I also closed the corresponding github issue, and posted my gulpfile

回答2:

Almost 3 years later Gulp 4 now looks a little bit different, see https://gulpjs.com/docs/en/getting-started/creating-tasks

To have a complete Gulp 4 kickstart example, see 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

来源：https://stackoverflow.com/questions/34582816/gulp-4-browsersync-style-injection

标签

javascript

gulp

browser-sync