将 browsersync 与 gulp/nodemon 结合使用 [英] Using browsersync with gulp/nodemon

问题描述

我正在尝试让 Browsersync(版本 2.12.5)与 gulp-nodemon/watching 文件一起工作.这些是我的 gulp 任务.我似乎无法让我的任何文件更新/重新加载浏览器.

I'm trying to get Browsersync (version 2.12.5) to work with gulp-nodemon/watching files. These are my gulp tasks. I can't seem to get any of my files to update/reload the browser.

  var $ = require('gulp-load-plugins')();
  var browserSync = require('browser-sync');
  var gulp = require('gulp');
  // load in gulp tasks etc......

  gulp.task('server', function() {
    return $.nodemon({
      script: 'server.js'
    });
  });

  gulp.task('browser-sync', ['server'], function() {
    browserSync.init({
      proxy: 'http://localhost:3000',
      port: 4000,
      open: false,
      notify: false,
      logConnections: false,
      reloadDelay: 1000
    });
  });

  gulp.task('watch', ['browser-sync'], function() {
    var scripts = 'public/static/scripts/**/*.js';
    var styles  = 'public/static/styles/**/*.styl';

    gulp.watch(scripts, ['scripts']);
    gulp.watch(styles,  ['styles']);
  });

  gulp.task('scripts', function() {
    return gulp.src('public/static/scripts/**/*.js')
      .pipe($.plumber())
      .pipe(gulp.dest('build/static/scripts'));
  });

  gulp.task('styles', function() {
    return gulp.src('public/static/styles/app.styl', {base: 'public'})
      .pipe($.stylus())
      .pipe(gulp.dest('build'))
  });

将 Browsersync 与 nodemon 一起使用的推荐方法是什么?

推荐答案

显然，在 nodemon 启动服务器之前，Browser sync 似乎会刷新浏览器.

Apparently, it seems Browser sync refreshes the browser, before nodemon starts the server.

这是来自我的命令行的日志，显示了 nodemon 和 Browser sync，你会看到 nodemon 开始晚了

Here's a log from my command line that shows nodemon and Browser sync, you'll see nodemon started late

[18:21:09] Finished 'jade' after 5.32 μs
[18:21:09] [nodemon] restarting due to changes...
>> node restart
[BS] Reloading Browsers...
[18:21:09] [nodemon] restarting due to changes...
>> node restart
[BS] Reloading Browsers...
[18:21:09] [nodemon] restarting due to changes...
>> node restart
[BS] Reloading Browsers...
[18:21:09] [nodemon] starting `node ./bin/www`
nodemon started

我遇到了同样的问题.以下是我的解决方案

I had this same problem. Below was my solution

// Initialize browserSync
var browserSync   = require('browser-sync').create(),
    reload        = browserSync.reload;


// watcher
gulp.task('watch', function() {
  var scripts = 'public/static/scripts/**/*.js';
  var styles  = 'public/static/styles/**/*.styl';

  gulp.watch(scripts, ['scripts']);
  gulp.watch(styles,  ['styles']);
  gulp
    .watch('public')
    .on('change', reload); // the static files you want to watch and reload
});

// browser-sync
gulp.task('browser-sync', function() {
  browserSync.init({
    proxy: 'http://localhost:3000',// Don't use proxy
    port: 4000, // Desired PORT address.
    open: false,
    notify: false,
    logConnections: false,
    reloadDelay: 1000 
    server: 'public', // Your compiled static directory
  });
})

gulp.task('default', ['scripts', 'styles', 'browser-sync', 'watch']) // This builds my script, styles and other static assets(img), starts browser-sync and watches for changes.

这篇关于将 browsersync 与 gulp/nodemon 结合使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！