Automatically Load Gulp Plugins with gulp-load-plugins

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!

Related Content

Published on


Comments

  1. Cathy Dutton |

    This is exactly what I was looking for, thanks :)

  2. John |

    Don’t need ‘gulp task’ ?, Thanks!!

Leave a Comment
  • You will need to preview your comment before you can submit it.