预装插件的Gulp启动工具包

Question

我有一个吞咽起动机盒为我的项目，然而，我想使用吞咽加载插件，以用于devDependencies of package.json文件。我的文件结构是

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 (它正在按预期工作，使用一体式加载插件)

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插件)

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

如果每个插件都有单独的文件，你为什么不使用一元化的加载插件呢？

Answer 2

我就是这样加载gulp插件的：

$ = 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的插件，你可以这样称呼它：.pipe($.nameSecondname())。

顶部，如果我需要吞咽负载插件，我已经设置为真。延迟加载只加载您使用的插件，而不是所有插件。

另外，我强烈建议不要将不同文件中的插件分开，但您可以对它们进行修改，这意味着在编译文件、优化文件、构建文件等单独文件中分离重要任务。

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

小心下载插件，因为它减慢了你的任务速度，例如，我运行的是，当我将它与gulp插件一起使用时，任务在200 if之后完成，而如果我正常使用的话，则是20 if。所以，不要把所有的事情都用在一起，去玩它，看看你在每一项任务上损失了多少性能，并确定优先次序。

Answer 3

我使用过gulp-load-plugins，但发现它主要增加了复杂性，并模糊了我的代码。对于不太熟悉古普的人来说，这也会使他们更难理解。在顶部显式声明所有模块看起来更干净，更容易理解。