Gulp.js serve i file src SENZA browserSync?

Question

Ponteggi un nuovo progetto con Yeoman Gulp-Angular.

Capisco la premessa di BrowserSync, ma francamente non riesco a capire come si tollera che le loro richieste di rete allagate da questo:

Vorrei rimuovere immediatamente BrowserSync dal mio progetto.

Come si fa a correggere il seguente codice al fine di gulp serve ed eseguire la stessa funzionalità di vedere in anteprima i file non minified src, ma SENZA BrowserSync?

Ecco il mio attuale gulp/server.js, il default generato da 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, []); 
    }); 
}; 

E il mio attuale gulp/watch.js, il default generato da 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); 
    }); 
    }); 
}; 

Answer 1

Ecco come deprecare BrowserSync a favore di gulp-connect , un plugin Gulp semplice e stabile per eseguire un server web (con LiveReload).

Nuovo 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 ]); 

}; 

Quindi sostituire la ricarica BrowserSync in gulp/watch.js con:

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