Javascript 带Gulp load插件的Gulp初学者套件

我对我的项目有一个简单的定义，但是，我想使用gulpload插件来定义package.json文件的devdependency。我的文件结构是

ProjectName
吞咽
-任务
-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插件可以正常工作）

browsersync.js（使用gulp加载插件无法工作）

---

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

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

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

$ = 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（））

顶部是我需要一口气加载插件，我已将camelize设置为true。延迟加载只加载您使用的插件，而不是全部插件

作为补充说明，我强烈建议不要在不同的文件中分离插件，但可以对它们进行调整，这意味着在不同的文件中分离重要任务，如编译文件、优化文件、构建文件等

这可能会帮助您更好地理解gulp文件分离

---

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

我使用了

大量加载插件

，但发现它主要增加了复杂性，模糊了我的代码。At也使不太熟悉Gulp的人更难理解。在顶部显式声明所有模块看起来更干净、更容易理解。

我想知道它背后的主要用途。因为每个插件使用不同的文件，所以看起来像是

jade.js

和

browsersync.js

为什么不只需要插件本身，因为您只使用了一个插件与多个插件不同，多个插件可以方便地使用。

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