Gulp.js dienen Src-Dateien ohne BrowserSync?

Question

Scaffolded ein neues Projekt mit Yeoman Gulp-Angular.

verstehe ich die Prämisse der BrowserSync, aber ehrlich gesagt kann ich nicht verstehen, wie jemand ihre Netzwerkanforderungen toleriert durch diese überflutet mit:

Ich möchte sofort BrowserSync von meinem Projekt entfernen.

Wie korrigiert man den folgenden Code um gulp serve und führen Sie die gleiche Funktionalität der Vorschau der nicht-minified src Dateien, aber OHNE BrowserSync?

Hier ist mein aktueller gulp/server.js, der Standard erzeugt durch 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, []); 
    }); 
}; 

Und meine aktuellen gulp/watch.js, der Standard erzeugt durch 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

Hier ist, wie BrowserSync für gulp-connect deprecate , ein einfaches und stabiles Gulp-Plugin zum Ausführen eines Webservers (mit LiveReload).

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

}; 

dann die Reload-BrowserSync ersetzen in gulp/watch.js mit:

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