Javascript 浏览器同步多个重新加载

我是Gulp.js的新手，我正在尝试使用slim/coffee/sass和浏览器同步为静态网站创建一个模板

我的slim任务（将slim编译为html）有一个问题：当我编辑slim文件时，根据项目中slim文件的数量，大量运行slim任务。（因此，如果我有5个slim文件，并且编辑其中一个文件的标题，gulp将运行slim任务5次。）

问题是，在此任务中，每当我编辑slim文件时，我都会要求Browser Sync重新加载服务器。再次使用上面的示例，如果我在一个文件中编辑一个标题，服务器将重新加载5次。这真的很烦人

我希望有人能解决这个问题：）

这里是我的gulpfile中的slim任务：

gulp.task('slim', function () {
 return gulp.src(slim_dev + '/**/*.slim')
  // prevent server from crashing
  .pipe(plugins.plumber({ errorHandler: function(err) {
    plugins.notify.onError({
      title: "Gulp error in " + err.plugin
    })(err);
  }}))
  // compile slim to html
  .pipe(plugins.slim({
    pretty: false,
    include: true
  }))
  // minify html
  .pipe(plugins.minifyHtml())
  // copy result to build folder
  .pipe(gulp.dest(slim_build))
  // reload server on slim save
  .pipe(reload({stream:true}))
  // notify when task completed
  .pipe(plugins.notify('Slim compilation completed !'));
});

// GULP TEMPLATE - Gulfile.js - Victor Allegret
//
//   - $ gulp
//   - $ gulp build
//   - $ gulp clean
//
// --------------------------------------------------------

////////////////////
// VARIABLES
////////////////////////////////////////////////////////////////////////////////


// REQUIRE
// ---------------------------------------------------------

var gulp    = require('gulp'),
    plugins = require('gulp-load-plugins')({
        pattern: '*'
    }),
    reload  = plugins.browserSync.reload


// PATH
// ---------------------------------------------------------

///// PATHS FOR DEV
var slim_dev    = './dev/views/',
    sass_dev    = './dev/assets/stylesheets/',
    coffee_dev  = './dev/assets/javascripts/',
    fonts_dev   = './dev/assets/fonts/',
    img_dev     = './dev/assets/images/',
    dev         = './dev';

///// PATH FOR PROD
var slim_build     = './build/views/',
    sass_build     = './build/assets/stylesheets/',
    coffee_build   = './build/assets/javascripts/',
    fonts_build    = './build/assets/fonts/',
    img_build      = './build/assets/images/',
    build          = './build';





////////////////////
// TASKS
////////////////////////////////////////////////////////////////////////////////


// COMPILE SLIM TO HTML
// ---------------------------------------------------------
gulp.task('slim', function () {
  return gulp.src(slim_dev + '/**/*.slim')
    // prevent server from crashing
    .pipe(plugins.plumber({ errorHandler: function(err) {
      plugins.notify.onError({
          title: "Gulp error in " + err.plugin
      })(err);
    }}))
    // compile slim to html
    .pipe(plugins.slim({
      pretty: false,
      include: true
    }))
    // minify html
    .pipe(plugins.minifyHtml())
    // copy result to build folder
    .pipe(gulp.dest(slim_build))
    // reload server on slim save
    .pipe(reload({stream:true}))
    // notify when task completed
    .pipe(plugins.notify('Slim compilation completed !'));
});


// COMPILE SASS TO CSS
// ---------------------------------------------------------
gulp.task('sass', function () {
  return gulp.src(sass_dev + '/**/*.{sass,css,scss}')
    // prevent server from crashing
    .pipe(plugins.plumber({ errorHandler: function(err) {
      plugins.notify.onError({
          title: "Gulp error in " + err.plugin,
      })(err);
    }}))
    // compile sass to css
    .pipe(plugins.sass())
    // add auto-prefixes
    .pipe(plugins.autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false
    }))
    // concat all files
    .pipe(plugins.concat('main.css'))
    // rename to .min
    .pipe(plugins.rename('main.min.css'))
    // minify css
    .pipe(plugins.minifyCss())
    // copy result to build folder
    .pipe(gulp.dest(sass_build))
    // reload on sass save
    .pipe(reload({stream:true}))
    // notify when task completed
    .pipe(plugins.notify('Sass compilation completed !'));
});


// COMPILE COFFEE TO JS
// ---------------------------------------------------------
gulp.task('coffee', function() {
  return gulp.src(coffee_dev + '/**/*.coffee')
    // compile coffee to js
    .pipe(plugins.coffee())
    // concat all files
    .pipe(plugins.concat('all.js'))
    // rename to .min
    .pipe(plugins.rename('all.min.js'))
    // minify js
    .pipe(plugins.uglify())
    // copy result to build folder
    .pipe(gulp.dest(coffee_build))
    // notify when task completed
    .pipe(plugins.notify('Coffee compilation completed !'));
});


// FONTS
// ---------------------------------------------------------
gulp.task('fonts', function() {
  return gulp.src(fonts_dev + '/**/*.{eot,svg,ttf,woff}')
    // copy result to build folder
    .pipe(gulp.dest(fonts_build))
});


// REMOVE UNUSED CSS
// ---------------------------------------------------------
gulp.task('uncss', function () {
  return gulp.src(sass_build + '/app.css')
  // remove unused css
   .pipe(plugins.uncss({
      html: [build + '/**/*.html']
   }))
   // minify css
   .pipe(plugins.minifyCss())
   // copy result to build folder
   .pipe(gulp.dest(sass_build))
   // notify when task completed
   .pipe(plugins.notify('Unused CSS removed !'));
});


// MINIFY IMAGES
// ---------------------------------------------------------
gulp.task('img', function () {
  return gulp.src(img_dev + '/**/*.{png,jpg,jpeg,gif,svg}')
    // minify images
    .pipe(plugins.imagemin())
    // copy result to build folder
    .pipe(gulp.dest(img_build))
    // notify when task completed
    .pipe(plugins.notify('Images are optimized!'));
});


// REMOVE BUILD FOLDER
// ---------------------------------------------------------
gulp.task('removeBuild', function () {
  return gulp.src(build, { read: false})
    .pipe(plugins.rimraf())
    .pipe(plugins.notify('Prod folder deleted !'));
});





////////////////////
// COMMANDS
////////////////////////////////////////////////////////////////////////////////


// RUN SLIM | SASS | COFFEE ($ gulp dev)
// ---------------------------------------------------------
gulp.task('dev', ['slim', 'sass', 'coffee', 'fonts']);


// RUN SLIM | SASS | COFFEE | UNCSS | IMG ($ gulp build)
// ---------------------------------------------------------
gulp.task('build', ['slim', 'sass', 'coffee', 'fonts', 'uncss', 'img']);


// RUN CLEAN ($ gulp clean)
// ---------------------------------------------------------
gulp.task('clean', ['removeBuild']);


// RUN SERVER ($ gulp)
// ---------------------------------------------------------

///// WATCH
gulp.task('watch', ['dev'], function () {
  plugins.browserSync.init({
    server: {
      baseDir: slim_build,
      index: "index.html"
    },
    scrollProportionally: true,
    notify: false
  })
  gulp.watch(dev + '/**/*.slim', ['slim']);
  gulp.watch(dev + '/**/*.sass', ['sass']);
  gulp.watch(dev + '/**/*.coffee', ['coffee']);
  gulp.watch(build  + '/**/*.html').on('change', reload);
});

////// COMMAND
gulp.task('default', ['watch'])

这里是全球海湾文件：

gulp.task('slim', function () {
 return gulp.src(slim_dev + '/**/*.slim')
  // prevent server from crashing
  .pipe(plugins.plumber({ errorHandler: function(err) {
    plugins.notify.onError({
      title: "Gulp error in " + err.plugin
    })(err);
  }}))
  // compile slim to html
  .pipe(plugins.slim({
    pretty: false,
    include: true
  }))
  // minify html
  .pipe(plugins.minifyHtml())
  // copy result to build folder
  .pipe(gulp.dest(slim_build))
  // reload server on slim save
  .pipe(reload({stream:true}))
  // notify when task completed
  .pipe(plugins.notify('Slim compilation completed !'));
});

// GULP TEMPLATE - Gulfile.js - Victor Allegret
//
//   - $ gulp
//   - $ gulp build
//   - $ gulp clean
//
// --------------------------------------------------------

////////////////////
// VARIABLES
////////////////////////////////////////////////////////////////////////////////


// REQUIRE
// ---------------------------------------------------------

var gulp    = require('gulp'),
    plugins = require('gulp-load-plugins')({
        pattern: '*'
    }),
    reload  = plugins.browserSync.reload


// PATH
// ---------------------------------------------------------

///// PATHS FOR DEV
var slim_dev    = './dev/views/',
    sass_dev    = './dev/assets/stylesheets/',
    coffee_dev  = './dev/assets/javascripts/',
    fonts_dev   = './dev/assets/fonts/',
    img_dev     = './dev/assets/images/',
    dev         = './dev';

///// PATH FOR PROD
var slim_build     = './build/views/',
    sass_build     = './build/assets/stylesheets/',
    coffee_build   = './build/assets/javascripts/',
    fonts_build    = './build/assets/fonts/',
    img_build      = './build/assets/images/',
    build          = './build';





////////////////////
// TASKS
////////////////////////////////////////////////////////////////////////////////


// COMPILE SLIM TO HTML
// ---------------------------------------------------------
gulp.task('slim', function () {
  return gulp.src(slim_dev + '/**/*.slim')
    // prevent server from crashing
    .pipe(plugins.plumber({ errorHandler: function(err) {
      plugins.notify.onError({
          title: "Gulp error in " + err.plugin
      })(err);
    }}))
    // compile slim to html
    .pipe(plugins.slim({
      pretty: false,
      include: true
    }))
    // minify html
    .pipe(plugins.minifyHtml())
    // copy result to build folder
    .pipe(gulp.dest(slim_build))
    // reload server on slim save
    .pipe(reload({stream:true}))
    // notify when task completed
    .pipe(plugins.notify('Slim compilation completed !'));
});


// COMPILE SASS TO CSS
// ---------------------------------------------------------
gulp.task('sass', function () {
  return gulp.src(sass_dev + '/**/*.{sass,css,scss}')
    // prevent server from crashing
    .pipe(plugins.plumber({ errorHandler: function(err) {
      plugins.notify.onError({
          title: "Gulp error in " + err.plugin,
      })(err);
    }}))
    // compile sass to css
    .pipe(plugins.sass())
    // add auto-prefixes
    .pipe(plugins.autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false
    }))
    // concat all files
    .pipe(plugins.concat('main.css'))
    // rename to .min
    .pipe(plugins.rename('main.min.css'))
    // minify css
    .pipe(plugins.minifyCss())
    // copy result to build folder
    .pipe(gulp.dest(sass_build))
    // reload on sass save
    .pipe(reload({stream:true}))
    // notify when task completed
    .pipe(plugins.notify('Sass compilation completed !'));
});


// COMPILE COFFEE TO JS
// ---------------------------------------------------------
gulp.task('coffee', function() {
  return gulp.src(coffee_dev + '/**/*.coffee')
    // compile coffee to js
    .pipe(plugins.coffee())
    // concat all files
    .pipe(plugins.concat('all.js'))
    // rename to .min
    .pipe(plugins.rename('all.min.js'))
    // minify js
    .pipe(plugins.uglify())
    // copy result to build folder
    .pipe(gulp.dest(coffee_build))
    // notify when task completed
    .pipe(plugins.notify('Coffee compilation completed !'));
});


// FONTS
// ---------------------------------------------------------
gulp.task('fonts', function() {
  return gulp.src(fonts_dev + '/**/*.{eot,svg,ttf,woff}')
    // copy result to build folder
    .pipe(gulp.dest(fonts_build))
});


// REMOVE UNUSED CSS
// ---------------------------------------------------------
gulp.task('uncss', function () {
  return gulp.src(sass_build + '/app.css')
  // remove unused css
   .pipe(plugins.uncss({
      html: [build + '/**/*.html']
   }))
   // minify css
   .pipe(plugins.minifyCss())
   // copy result to build folder
   .pipe(gulp.dest(sass_build))
   // notify when task completed
   .pipe(plugins.notify('Unused CSS removed !'));
});


// MINIFY IMAGES
// ---------------------------------------------------------
gulp.task('img', function () {
  return gulp.src(img_dev + '/**/*.{png,jpg,jpeg,gif,svg}')
    // minify images
    .pipe(plugins.imagemin())
    // copy result to build folder
    .pipe(gulp.dest(img_build))
    // notify when task completed
    .pipe(plugins.notify('Images are optimized!'));
});


// REMOVE BUILD FOLDER
// ---------------------------------------------------------
gulp.task('removeBuild', function () {
  return gulp.src(build, { read: false})
    .pipe(plugins.rimraf())
    .pipe(plugins.notify('Prod folder deleted !'));
});





////////////////////
// COMMANDS
////////////////////////////////////////////////////////////////////////////////


// RUN SLIM | SASS | COFFEE ($ gulp dev)
// ---------------------------------------------------------
gulp.task('dev', ['slim', 'sass', 'coffee', 'fonts']);


// RUN SLIM | SASS | COFFEE | UNCSS | IMG ($ gulp build)
// ---------------------------------------------------------
gulp.task('build', ['slim', 'sass', 'coffee', 'fonts', 'uncss', 'img']);


// RUN CLEAN ($ gulp clean)
// ---------------------------------------------------------
gulp.task('clean', ['removeBuild']);


// RUN SERVER ($ gulp)
// ---------------------------------------------------------

///// WATCH
gulp.task('watch', ['dev'], function () {
  plugins.browserSync.init({
    server: {
      baseDir: slim_build,
      index: "index.html"
    },
    scrollProportionally: true,
    notify: false
  })
  gulp.watch(dev + '/**/*.slim', ['slim']);
  gulp.watch(dev + '/**/*.sass', ['sass']);
  gulp.watch(dev + '/**/*.coffee', ['coffee']);
  gulp.watch(build  + '/**/*.html').on('change', reload);
});

////// COMMAND
gulp.task('default', ['watch'])

非常感谢

见。因此，改变这一点：

.pipe(reload({stream:true}))  // in 'slim' task

到

该选项应在每个流中仅重新加载browserSync一次。

请参阅。因此，改变这一点：

.pipe(reload({stream:true}))  // in 'slim' task

到

---

该选项假定每个流只重新加载browserSync一次。

这解决了重新加载多次的问题。我不知道slim，也不知道编辑每个slim文件时是否需要或想要为每个slim文件运行“slim”任务。如果这是不必要的，那么有一些方法可以解决，比如喝新的或改变的酒，等等。您的解决方案似乎有效，谢谢！）这解决了重新加载问题。另外，gulp更新版看起来对我的模板非常有用谢谢这解决了多次重新加载的问题。我不知道slim，也不知道编辑每个slim文件时是否需要或想要为每个slim文件运行“slim”任务。如果这是不必要的，那么有一些方法可以解决，比如喝新的或改变的酒，等等。您的解决方案似乎有效，谢谢！）这解决了重新加载问题。另外，吞咽新的看起来真的对我的模板有用谢谢