时间戳

首页 > 解决方案 > 升级 Gulp 3 到 Gulp 4 无需重新加载 BrowserSync

javascript - 升级 Gulp 3 到 Gulp 4 无需重新加载 BrowserSync

问题描述

我正在尝试从 gulp 3.9 升级到 gulp 4，起初似乎一切正常，但是当我进行更改（sass、pug 或 html 文件）时，它不会使用 browsersync 重新加载），我现在知道是否watch或 jekyll 是导致这个问题。

我在用：

会发生什么？

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var cp          = require('child_process');
var pug         = require('gulp-pug');
var sass        = require('gulp-sass');
var prefix      = require('gulp-autoprefixer');
var minifycss   = require('gulp-minify-css');
var bourbon     = require('bourbon').includePaths;
var rename      = require('gulp-rename');

// Message
var messages = {
    jekyllBuild: '<span style="color: white">Running:</span> $ jekyll build'
};

// Paths
var paths = {
  html: {
    src: ['*.html', '_layouts/*.html', '_posts/*', '_includes/*'],
    dest: '_includes'
  },
  pugFiles: {
    src: '_jadefiles/*.jade',
    dest: '_includes'
  },
  styles: {
    all: 'assets/css/**',
    src: 'assets/css/main.scss',
    dest: ['assets/css', '_site/assets/css']
  },
  scripts: {
    src: ['assets/js/**/*.js', 'js/*.js'],
    dest: ['js', '_site/assets/js']
  }
}

// Compile Pug|Jade files into .html
gulp.task('pug', function() {
  return gulp.src(paths.pugFiles.src)
    .pipe(pug())
    .pipe(gulp.dest(paths.pugFiles.dest));
});

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
  return gulp.src(paths.styles.src)
    .pipe(sass({
      includePaths: [bourbon],
      onError: browserSync.notify
    }).on('error', sass.logError))
    .pipe(gulp.dest(paths.styles.dest))
    .pipe(prefix({
        browsers: ['last 15 versions', '> 1%', 'ie 8', 'ie 7'],
        cascade: true
      }))
    .pipe(rename({suffix: '.min', prefix : ''}))
    .pipe(minifycss())
    .pipe(browserSync.stream());
});

// Watch changes on files
gulp.task('watch', function() {
  // gulp.watch(paths.scripts.src).on('change', browserSync.reload);
  gulp.watch(paths.html.src, gulp.series('jekyll-rebuild'));
  gulp.watch(paths.pugFiles.src, gulp.series('pug'));
  gulp.watch(paths.styles.all, gulp.series('sass'));
  gulp.watch(paths.html.dest).on('change', browserSync.reload);
});

// Build Jekyll
gulp.task('jekyll-build', function (done) {
  browserSync.notify(messages.jekyllBuild);
  var pl = process.platform === "win32" ? "jekyll.bat" : "jekyll";
  return cp.spawn(pl, ['build'], {stdio: 'inherit'})
    .on('close', done);
});

// Rebuild Jekyll site
gulp.task('jekyll-rebuild',
  gulp.series('jekyll-build', function () {
    browserSync.reload();
  })
);

// Static Server
gulp.task('serve', function() {
  browserSync.init({
    server: {
      baseDir: '_site'
    }
  });
});

gulp.task('default', gulp.series('serve', gulp.parallel('sass', 'pug', 'watch', 'jekyll-build')));

标签： javascriptgulpjekyll

解决方案

推荐阅读