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

Question

我的项目有一个gulp入门工具包 ，但是，我想使用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)
});

我想知道是否有更好的方法？

Answer 1

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

Answer 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()) 。

我需要将gulpize设置为true的gulp-load-plugins设置为页首。 延迟加载仅加载您使用的全部插件。

作为一个侧面说明，我强烈建议不要在不同的文件中分离插件，但是可以对其进行调制，这意味着将重要的任务分离在单独的文件中，例如编译文件，优化文件，构建文件等。

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

小心gulp-load-plugins，因为它会减慢您的任务速度，例如，我运行gulp-webserver，当我将其与gulp-load-plugins一起使用时，任务会在200毫秒后完成，而我通常使用20毫秒即可完成。 因此，不要将所有内容都使用起来，而是玩弄它，看看您在每个任务上损失多少性能并确定优先级。

Answer 3

我使用了gulp-load-plugins但发现它主要增加了复杂性并使我的代码模糊不清。 对于不那么了解Gulp的人来说，at也使理解变得更加困难。 在顶部显式声明所有模块看起来更简洁易懂。