How to use gulp-load-plugins with Browser-Sync? - npm

Question

I'm at a point in my Gulp usage that it's starting to make sense splitting tasks up into separate files.
For this, I was hoping to use gulp-load-plugins, but although my task runs, Browser-Sync doesn't appear to fire / do anything.
Here's my stripped back setup. Not sure where I'm going wrong!
gulpfile.js
var gulp = require('gulp'),
plugins = require('gulp-load-plugins')();
function getTask(task) {
return require('./gulp/tasks/' + task)(gulp, plugins);
}
gulp.task('browser-sync', getTask('browser-sync'));
gulp.task('bs-reload', getTask('bs-reload'));
gulp.task('scripts', getTask('scripts'));
gulp.task('default', ['browser-sync'], function(){
gulp.watch('src/js/**/*.js', ['scripts']);
});
scripts.js (Gulp Task)
var browserSync = require('browser-sync').create();
module.exports = function(gulp, plugins) {
return function() {
return gulp.src([
'src/js/plugins/**',
'src/js/app.js',
'!src/js/{libraries,libraries/**}'
])
.pipe(plugins.plumber({
errorHandler: function(error) {
console.log(error.message);
this.emit('end');
}}))
.pipe(plugins.concat('app.js'))
.pipe(gulp.dest('dist/js/'))
.pipe(plugins.rename({
suffix: '.min'
}))
.pipe(plugins.uglify({
preserveComments: 'none'
//preserveComments: 'some'
}))
.pipe(gulp.dest('dist/js/')) // Seems okay up until here...
.pipe(browserSync.reload({ // ...but this never seems to fire!
stream: true
}));
};
};
You'll notice I'm requiring Browser-Sync in my scripts.js file, but this is because doing plugins.Browser-Sync wasn't working. I read somewhere that this is because Browser-Sync is not actually a Gulp plugin.
So whilst I don't get any errors and Browser-Sync appears to start up...from then on, my scripts task works, but it doesn't fire the BrowserSync part.
Any help greatly appreciated!
PS, Incase it helps, here's my package.json file (notice that above I'm presenting you a stripped back version of my gulpfile.js).
package.json
{
"name": "MichaelPumo",
"version": "1.0.0",
"description": "A frontend Gulp project for WordPress by Michael Pumo.",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "MichaelPumo",
"license": "MIT",
"devDependencies": {
"browser-sync": "2.6.5",
"gulp-postcss": "~6.0.0",
"autoprefixer-core": "~5.2.1",
"gulp-sourcemaps": "~1.5.2",
"gulp-concat": "2.5.2",
"gulp-plumber": "1.0.0",
"gulp-rename": "1.2.2",
"gulp-sass": "2.0.4",
"gulp-uglify": "1.2.0",
"gulp": "~3.9.0",
"node-neat": "~1.7.2",
"gulp-svgmin": "~1.2.0",
"gulp-image-optimization": "~0.1.3",
"gulp-load-plugins": "~1.0.0"
}
}

Answer 1

For anyone wondering or in the dark about this, note that by default gulp-load-plugins will only work with NPM packages that are prefixed with 'gulp-'.
Fortunately, you can change this behaviour and pass the search as an option like so:
gulpfile.js
var gulp = require('gulp'),
plugins = require('gulp-load-plugins')({
pattern: '*'
});
In your tasks, you can now reference Browser-Sync as plugins.browserSync like so:
browser-sync.js (Gulp Task)
'use strict';
module.exports = function(gulp, plugins) {
return function() {
plugins.browserSync.init({
port: 8080,
proxy: {
target: 'http://localhost:8888/my-website-path/'
}
});
};
};
Hope this helps someone else!