Gulp стартовый комплект с плагинами gulp-load

Question

У меня есть стартовый комплект gulp для моего проекта, однако я хочу использовать gulp-load-plugins для devDependencies файла 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 (который работает как положено, используя 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()),

Сверху, где мне требуются плагины 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. Это выглядит чище и проще для понимания, если все модули явно объявлены сверху.