带有 gulp-load-plugins 的 Gulp 入门套件答案

【问题标题】：Gulp starter kit with gulp-load-plugins带有 gulp-load-plugins 的 Gulp 入门套件
【发布时间】：2015-01-29 09:39:02
【问题描述】：

我的项目有一个gulp starter kit，但是，我想使用 gulp-load-plugins 来获取 package.json 文件的 devDependencies。我的文件结构是

ProjectName
  Gulp
   -Tasks
     -broswerify.js
     -browserSync.js
     -jade.js
     -lint.js
  Gulpfile.js
  config.json
  package.json

Gulpfile.js

var requireDir = require('require-dir');
var dir        = requireDir('./gulp/tasks', {recurse: true});

jade.js（使用 gulp-load-plugins 按预期工作）

var gulp    = require('gulp');
var config  = require('../../config.json');
var plugins = require('gulp-load-plugins')();

gulp.task('jade', function(){
    return gulp.src(config.jade.src)
    .pipe(plugins.jade())
    .pipe(gulp.dest(config.jade.build))
});

browsersync.js（使用 gulp-load-plugins 不起作用）

var gulp    = require('gulp');
var config  = require('../../config.json').browsersync;
var plugins = require('browsersync'); // works
//var plugins = require('gulp-load-plugins')(); // it doesn't works.

gulp.task('browsersync', function () {
   plugins.browserSync.init(config); // (browsersync required)
  //plugins.browserSync.init(config) it doesn't work. (gulp-load-plugins required)
});

我想知道是否有更好的方法来做到这一点？

【问题讨论】：

标签： javascript gulp gulp-load-plugins

【解决方案1】：

我使用过gulp-load-plugins，但发现它主要增加了复杂性并模糊了我的代码。 At 也让不太熟悉 Gulp 的人更难理解。将所有模块显式声明在顶部看起来更简洁、更易于理解。

【讨论】：

【解决方案2】：

这就是我加载 gulp-load-plugins 的方式：

$ = require('gulp-load-plugins')({
        pattern: ['gulp-*', 'gulp.*'],
        replaceString: /\bgulp[\-.]/,
        lazy: true,
        camelize: true
      }),

这是一个修订插件的例子：

 // revision styles 
  gulp.task('rev-styles', function () {
    return gulp.src(dev.css)
      .pipe($.rev())
      .pipe($.cssmin())
      .pipe(gulp.dest(dist.css))
      .pipe($.filesize())
      .pipe($.rev.manifest({merge: true}))
      .pipe(gulp.dest('./'))
      //rev replace
      .on('end', function() {
      return gulp.src(['./rev-manifest.json', 'dist/*.html'])
        .pipe($.revCollector({
          replaceReved: true,
          dirReplacements: {
            'css': 'css'
          }
        }))
      .pipe(gulp.dest(dist.dist)) 
    });
  });

如您所见，我所有的管道都称为.pipe($.pluginName())，这意味着 $ 代表 gulp- 。如果你有一个名为 gulp-name-secondname 的插件，你可以这样称呼它：.pipe($.nameSecondname())。

我是否需要 gulp-load-plugins 我已将 camelize 设置为 true 。延迟加载仅加载您使用的插件，而不是全部。

作为旁注，我强烈建议不要在不同文件中分离插件，但您可以调整它们，这意味着将重要任务分离到单独的文件中，如编译文件、优化文件、构建文件等。

这可能有助于您更好地理解 gulp 文件分离http://macr.ae/article/splitting-gulpfile-multiple-files.html

小心 gulp-load-plugins 因为它会减慢你的任务，例如我运行 gulp-webserver ，当我将它与 gulp-load-plugins 一起使用时，如果我正常使用它，任务会在 200 毫秒后完成，而 20 毫秒。所以不要对所有东西都使用，玩它看看你在每项任务上损失了多少性能并确定优先级。

【讨论】：

【解决方案3】：

如果每个插件都有单独的文件，为什么不使用 gulp-load-plugins？

【讨论】：

我想知道它背后的主要目的。
由于您为每个插件使用不同的文件，因此看起来像 jade.js 和 browsersync.js 为什么不只需要插件本身，因为您只使用一个插件而不是多个插件，其中 gulp-load -plugins 派上用场了。