Require an instance of BrowserSync, instead of a singleton.
This project is now depreciated because the multi-instance feature is being officially implemented. See the develop
branch for progress.
npm install --save-dev basham/browser-sync-instance
browserSyncInstance();
Return an anonymous instance of BrowserSync.
browserSyncInstance(name);
Create or find an instance of BrowserSync with the given unique name. This is especially useful if the instance is defined in one task, yet it's referenced in another.
// ./tasks/browser-sync.js
var gulp = require('gulp');
var browserSyncInstance = require('browser-sync-instance');
var browserSyncAssets = browserSyncInstance();
var browserSyncProxy = browserSyncInstance('proxy');
gulp.task('browser-sync', function() {
browserSyncAssets({
server: {
baseDir: './src/'
},
open: false
});
browserSyncProxy({
proxy: 'localhost:8080',
port: 4000
});
});
// ./tasks/styles.js
var gulp = require('gulp');
var browserSyncProxy = require('browser-sync-instance')('proxy');
gulp.task('styles', function() {
return gulp.src('src/**/*.css')
.pipe(browserSyncProxy.reload({ stream: true }));
});
// ./tasks/watch.js
var gulp = require('gulp');
gulp.task('watch', ['browser-sync'], function() {
gulp.watch('src/**/*.css', ['styles']);
});
// ./tasks/default.js
var gulp = require('gulp');
gulp.task('default', ['watch']);
// ./gulpfile.js
// Install `require-directory` or require each task individually.
// https://github.com/troygoode/node-require-directory
require('require-directory')(module, './tasks');