Как использовать gulp-load-plugins с Browser-Sync?

Question

Я использую Gulp в том смысле, что имеет смысл разделять задачи на отдельные файлы.

Для этого я надеялся использовать gulp-load-plugins, но, хотя моя задача выполняется, Browser-Sync, похоже, ничего не запускает / не делает.

Вот мои раздетые настройки. Не уверен, где я иду не так!

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
        }));

    };

};

Вы заметите, что в моем браузере требуется синхронизация браузера scripts.js файл, но это потому, что делать плагины. Браузер-синхронизация не работает. Я где-то читал, что это потому, что Browser-Sync на самом деле не является плагином Gulp.

Так что, хотя я не получаю никаких ошибок и Browser-Sync запускается... с этого момента моя задача сценариев работает, но не запускает часть BrowserSync.

Любая помощь с благодарностью!

PS, если это поможет, вот мой package.json файл (обратите внимание, что выше я представляю вам урезанную версию моего 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

Для тех, кто интересуется или в темноте об этом, обратите внимание, что по умолчанию gulp-load-plugins будет работать только с пакетами NPM с префиксом 'gulp-".

К счастью, вы можете изменить это поведение и передать поиск как параметр следующим образом:

gulpfile.js

var gulp = require('gulp'),
    plugins = require('gulp-load-plugins')({
        pattern: '*'
    });

В ваших задачах теперь вы можете ссылаться на синхронизацию браузера как plugins.browserSync вот так:

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/'
            }
        });

    };

};

Надеюсь, это поможет кому-то еще!