Npm 如何将gulp加载插件与浏览器同步一起使用？

在我的吞咽使用中，将任务拆分为单独的文件开始变得有意义了

为此，我希望使用

gulpload插件

，但尽管我的任务正在运行，但浏览器同步似乎没有启动/执行任何操作

这是我的背部脱光装置。不知道我哪里出错了

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

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

scripts.js（吞咽任务）

您会注意到我在

scripts.js

文件中要求浏览器同步，但这是因为执行plugins.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"
  }
}

---

对于任何想知道或不知道这一点的人，请注意默认情况下，

gulp-load插件

只适用于前缀为“

gulp-

”的NPM包

幸运的是，您可以更改此行为并将搜索作为选项传递，如下所示：

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

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

在任务中，您现在可以将浏览器同步引用为

插件。browserSync

如下所示：

browser-sync.js（吞咽任务）

---

希望这对其他人有帮助

它确实帮助了我，为什么它不需要吞咽任务呢？另外，请注意，您的插件可以这样设置：

var-plugins=require（'gulp-load-plugins'）（{overridePattern:true，pattern:['gulp-*'，'gulp.'，'@*/gulp{-，.}*'，'browser-*']}）

这样您就不需要提取所有依赖项。您必须小心设置此模式，因为如果在

package.json

中同时声明了

eslint

和

gulp eslint

，插件将失败。