如何在gulp-4中添加浏览器同步

Question

//导入gulp文件到变量

    const { src , dest , watch , series , parallel } = require('gulp');
    const autoprefixer = require('autoprefixer');
    const cssnano = require('cssnano');
    const concat = require('gulp-concat');
    const postcss = require('gulp-postcss');
    const replace = require('gulp-replace');
    const sass = require('gulp-sass');
    const sourcemaps = require('gulp-sourcemaps');
    const uglify = require('gulp-uglify');
    const browserSync = require ('browser-sync').create();

// my projects文件夹中的文件路径变量

    const files = {
    scsspath:'assets/scss/**/*.scss' , 
    jspath:'assets/js/**/*.js'}

//Sass任务

    function scssTask(){
    return src(files.scsspath)
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(sourcemaps.write('.'))
    .pipe(dest('assets/css'))
    .pipe(browsersync.stream());}

//JsTask

    function jsTask(){
    return src(files.jspath)
   .pipe(concat('all.js'))
   .pipe(uglify())
   .pipe(dest('assets/js')).pipe(browsersync.stream());}

//WatchTask

   function watchTask(){
   watch([files.scsspath , files.jspath], parallel(scssTask,jsTask));}

//DefaultTask //我不知道如何在gulp-4中使用浏览器同步

   exports.default = series(parallel(scssTask,jsTask) , cashBustTask , 
   watchTask,browsersync);

Answer 1

为浏览器同步创建一个单独的任务。下面是我如何设置它的一个示例：

const bs = require('browser-sync').create();
// Other inputs used with browser-sync
const { src, dest, watch } = require('gulp');
const sass = require('gulp-sass');

function browserSync() {
  // Run serveSass function when starting the dev server to make sure the SCSS & dev CSS are the same
  serveSass();

  bs.init({
    // Dev server will run at localhost:8080
    port: 8080,
    server: {
      // I'm using 'src' as my base directory
      baseDir: 'src',
    },
  });

  // These watch for changes to files and reload in the browser
  watch('src/*.html').on('change', bs.reload);
  watch('src/scss/*.scss', serveSass);
  watch('src/js/*.js').on('change', bs.reload);
}

// This compiles Sass when running browser-sync and reloads the CSS
function serveSass() {
  // My dev Sass files are found in 'src/scss/'
  return src('src/scss/*.scss')
    .pipe(sass())
    // My dev CSS files are found in 'src/css/'
    .pipe(dest('src/css))
    .pipe(bs.stream());
}

// Then I run 'gulp serve' in the terminal to start browser-sync and my dev server
exports.serve = browserSync;

如果你想要更多的上下文，我的完整的Gulp设置是here。

Answer 2

快速解决方案：

添加触发BrowserSync的函数：

function reload(){
    browserSync.reload();
}

将watchTask()函数修改为：

function watchTask(){
    browserSync.init({
        server: { baseDir: "./dist" }
    });
    gulp.watch([files.scsspath , files.jspath], parallel(scssTask,jsTask,reload));
}

将exports修改为：

exports.default = watchTask;

Answer 3

我找到了这个guide to upgrade gulp 4，它解释了需要使用gulp.series或gulp.parallel。示例：

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();

gulp.task('browserSyncReload', gulp.series( function(done) {    
  browserSync.reload();
  done();
}));

gulp.task('default', gulp.series( function(done) {    
  browserSync.init({
      notify: false,
      proxy: "127.0.0.1:5003/nl"
  });
  gulp.watch("app/templates/**/*.", gulp.series('browserSyncReload'));
  gulp.watch("app/static/**/*.*", gulp.series('browserSyncReload'));
  done();
}));