Gulp starter kit with gulp-load-plugins

Question

I have a gulp starter kit for my project, however, I want to use gulp-load-plugins to for devDependencies of package.json file. My file structure is

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 (Which is working as expected using 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 (which is not working using 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)
});

I would like to know that if there is a better way to do that?

Answer 1

Why would you wan't to use gulp-load-plugins if you have a seperate file for each plugin?

Answer 2

This is how i load gulp-load-plugins :

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

Here is an example of a revision plugin:

 // 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)) 
    });
  });

As you can see all my pipes are called .pipe($.pluginName()) meaning $ stands for gulp- . If you have a plugin named gulp-name-secondname you call it like this: .pipe($.nameSecondname()) .

Top were i require gulp-load-plugins i have camelize set to true . Lazy loading loads only the plugins you use not all of them .

As a side note i strongly recommend not separating plugins in diffrent files but you can modulate them, meaning separating important tasks in separate files like compilation file , optimization file , build file, etc .

This might help you understand gulp file separation better http://macr.ae/article/splitting-gulpfile-multiple-files.html

Careful with gulp-load-plugins because it slows your tasks , for example i run gulp-webserver , when i use it with gulp-load-plugins the task finishes after 200ms versus 20ms if i use it normally. So don't use with everything, play with it see how much performance you lose on each task and prioritize.

Answer 3

I have used gulp-load-plugins but found that it mainly adds complexity and obscures my code. At also makes it harder to understand for people less familiar with Gulp. It looks cleaner and easier to understand to have all modules explicitly declared at the top.