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

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"
  }
}

score 21 · Accepted Answer · answered Oct 28 '15 at 12:54

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!

It surely helped me, why doesnt it need the gulp task around it? Also, note your plugins can be set like this `var plugins = require('gulp-load-plugins')({ overridePattern: true, pattern: ['gulp-*', 'gulp.*', '@*/gulp{-,.}*', 'browser-*'] });` So that you dont need to pull in all your dependencies. — blamb, Nov 16 '17 at 23:35
You have to be careful setting this pattern because if you have both `eslint` and `gulp-eslint`declared in `package.json`, the plugin will fail. — Ben Sewards, Sep 03 '19 at 20:49

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

1 Answers1