Gulp.js 在没有 browserSync 的情况下提供 src 文件？答案

【问题标题】：Gulp.js serve src files WITHOUT browserSync?Gulp.js 在没有 browserSync 的情况下提供 src 文件？
【发布时间】：2015-05-29 22:36:11
【问题描述】：

用Yeoman Gulp-Angular搭建了一个新项目。

我了解 BrowserSync 的前提，但坦率地说，我无法理解任何人如何容忍他们的网络请求被此淹没：

我想立即从我的项目中删除 BrowserSync。

如何更正以下代码以 gulp serve 并执行与预览未缩小的 src 文件相同的功能，但没有 BrowserSync？

这是我当前的gulp/server.js，默认由gulp-angular生成：

'use strict';

var gulp = require('gulp');
var browserSync = require('browser-sync');
var browserSyncSpa = require('browser-sync-spa');

var util = require('util');

var middleware = require('./proxy');

module.exports = function(options) {

  function browserSyncInit(baseDir, browser) {
    browser = browser === undefined ? 'default' : browser;

    var routes = null;
    if(baseDir === options.src || (util.isArray(baseDir) && baseDir.indexOf(options.src) !== -1)) {
      routes = {
        '/bower_components': 'bower_components'
      };
    }

    var server = {
      baseDir: baseDir,
      routes: routes
    };

    if(middleware.length > 0) {
      server.middleware = middleware;
    }

    browserSync.instance = browserSync.init({
      startPath: '/',
      server: server,
      browser: browser,
      online: false,
      notify: false,
      open: false,
      ui: false
    });
  }

  browserSync.use(browserSyncSpa({
    selector: '[ng-app]'// Only needed for angular apps
  }));

  gulp.task('serve', ['watch'], function () {
    browserSyncInit([options.tmp + '/serve', options.src]);
  });

  gulp.task('serve:dist', ['build'], function () {
    browserSyncInit(options.dist);
  });

  gulp.task('serve:e2e', ['inject'], function () {
    browserSyncInit([options.tmp + '/serve', options.src], []);
  });

  gulp.task('serve:e2e-dist', ['build'], function () {
    browserSyncInit(options.dist, []);
  });
};

还有我现在的gulp/watch.js，默认是gulp-angular生成的：

'use strict';

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

function isOnlyChange(event) {
  return event.type === 'changed';
}

module.exports = function(options) {
  gulp.task('watch', ['markups', 'inject'], function () {

    gulp.watch([options.src + '/*.html', 'bower.json'], ['inject']);

    gulp.watch([
      options.src + '/app/**/*.css',
      options.src + '/app/**/*.less'
    ], function(event) {
      if(isOnlyChange(event)) {
        gulp.start('styles');
      } else {
        gulp.start('inject');
      }
    });

    gulp.watch(options.src + '/app/**/*.js', function(event) {
      if(isOnlyChange(event)) {
        gulp.start('scripts');
      } else {
        gulp.start('inject');
      }
    });

    gulp.watch(options.src + '/app/**/*.jade', ['markups']);

    gulp.watch(options.src + '/app/**/*.html', function(event) {
      browserSync.reload(event.path);
    });
  });
};

【问题讨论】：

标签： javascript node.js gulp gulp-watch browser-sync

【解决方案1】：

以下是如何弃用 BrowserSync 以支持 gulp-connect，这是一个简单而稳定的 Gulp 插件，用于运行网络服务器（使用 LiveReload）。

新gulp/server.js:

'use strict';

var gulp = require('gulp');
var util = require('util');
var connect = require('gulp-connect');

module.exports = function(options) {

  function createServerTask(name, pre, root) {
    gulp.task(name, pre, function() {
      connect.server({
        root: root,
        port: 3000,
        debug: true,
        livereload: true
      });
    });
  }

  createServerTask( 'serve', ['watch'], [ options.tmp+'/serve', options.src, './' ]);

  createServerTask( 'serve:dist', ['build'], [ options.dist ]);

  createServerTask( 'serve:e2e', ['inject'], [ options.tmp+'/serve', options.src, './' ]);

  createServerTask( 'serve', ['watch'], [ options.tmp+'/serve', options.src, './' ]);

  createServerTask( 'serve:e2e-dist', ['build'], [ options.dist ]);

};

然后将 gulp/watch.js 中的 BrowserSync 重新加载替换为：

gulp.src('./app/*.html')
  .pipe(connect.reload());

【讨论】：