Skip to content
Web development Gulp

Automatically Load Gulp Plugins with gulp-load-plugins

3 min read

I’ve recently discovered Jack Franklin’s gulp-load-plugins plugin for Gulp and it’s really neat. Rather than have to specify each plugin, gulp-load-plugins will search your packages.json file and automatically include them as plugins.pluginName(). It has become my new favourite Gulp plugin.

Once installed it’s simple to use. For example, say we’ve got some dependencies in our packages.json file like:-

{
  "devDependencies": {
    "gulp": "~3.6.0",
    "gulp-rename": "~1.2.0",
    "gulp-ruby-sass": "~0.4.3",
    "gulp-load-plugins": "~0.5.1"
  }
}

Then in the 'gulpfile' we include the plugins using gulpLoadPlugins:-

var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins');
var plugins = gulpLoadPlugins();

Or even simpler:-

var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();

We can then use the included plugins as plugins.rename() and plugins.rubySass() (note the camel casing of ‘rubySass’ as the dependency is hyphenated).

Essentially the following is kind of happening:-

var plugins.rename = require('gulp-rename');
var plugins.rubySass = require('gulp-ruby-sass');

I say ‘kind of’ because it is actually lazy loading the plugins so they are not loaded until you use them. This is good because if you are just running one specific task in your 'gulpfile' it will only load the plugins used by it rather than loading a list of plugins defined at the top of the file, as is often done, many of which may not be required by the particular task.

We can also tell gulp-load-plugins which dependencies to look for and lazy load by using the pattern argument; and what to remove from the name of the plugin when adding it to the context using replaceString:-

var plugins = require("gulp-load-plugins")({
  pattern: ['gulp-*', 'gulp.*'],
  replaceString: /\bgulp[\-.]/
});

So with gulp-load-plugins installed the example 'gulpfile' from A Beginners Guide to the Task Runner Gulp becomes:-

// Include gulp
var gulp = require('gulp');

// Define base folders
var src = 'src/';
var dest = 'build/';

// Include plugins
var plugins = require("gulp-load-plugins")({
  pattern: ['gulp-*', 'gulp.*'],
  replaceString: /\bgulp[\-.]/
});

// Concatenate & Minify JS
gulp.task('scripts', function() {
    return gulp.src(src + 'js/*.js')
      .pipe(plugins.concat('main.js'))
        .pipe(plugins.rename({suffix: '.min'}))
        .pipe(plugins.uglify())
        .pipe(gulp.dest(dest + 'js'));
});

// Compile CSS from Sass files
gulp.task('sass', function() {
    return gulp.src(src + 'scss/style.scss')
        .pipe(plugins.rename({suffix: '.min'}))
        .pipe(plugins.rubySass({style: 'compressed'}))
        .pipe(gulp.dest(dest + 'css'));
});

gulp.task('images', function() {
  return gulp.src(src + 'images/**/*')
    .pipe(plugins.cache(plugins.imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
    .pipe(gulp.dest(dest + 'img'));
});

// Watch for changes in files
gulp.task('watch', function() {

  // Watch .js files
  gulp.watch(src + 'js/*.js', ['scripts']);

  // Watch .scss files
  gulp.watch(src + 'scss/*.scss', ['sass']);

  // Watch image files
  gulp.watch(src + 'images/**/*', ['images']);

});

// Default Task
gulp.task('default', ['scripts', 'sass', 'images', 'watch']);

Neat!

© 2024 Andy Carter