gulp-load-plugins to simplify Gulp script

gulp-load-plugins

Overview

I’m building my front-end build pipeline from scratch which is not going well, but I found a way to debug it. Things started to look good, but in the meantime I found a tool: gulp-load-plugins. Will it help me or not? Is it following KISS principle?

Current code

Current solution is able to publish files with gulp including bower components to specific directory. It looks like below:

var gulp = require('gulp');
var gutil = require('gulp-util');
var mainBowerFiles = require('gulp-main-bower-files');
var gulpDebug = require('gulp-debug');

var publishFolder = 'public';
var libsFolder = 'libs';


gulp.task('default', function() {
  // place code for your default task here
  gutil.log('gulp started')  
});

gulp.task('publish ', ['default'], function() {
   
  // copy any html files in source/ to public/
  gutil.log('copying html files');
  gulp.src('*.html').pipe(gulp.dest(publishFolder));  
  
  //copy bower components
  gulp.src('./bower.json')
    .pipe(mainBowerFiles())
    .pipe(gulpDebug({title:'debug-mainBowerFiles'}))
    .pipe(gulp.dest(publishFolder))
    .pipe(gulpDebug({title:publishFolder}));  
});

gulp-load-plugins

Gulp load plugins allows you to automatically include all gulp libraries from your project. You don’t need to require to use them what should simplify your code.

Installation is of course simple:

$ npm install --save-dev gulp-load-plugins

Small refactoring and here we have result:

var gulp = require('gulp');
var publishFolder = 'public';

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

gulp.task('default', function() {
  // place code for your default task here
  plugins.util.log('gulp started')  
});

gulp.task('publish', ['default'], function() {
   
  // copy any html files in source/ to public/
  plugins.util.log('copying html files');
  gulp.src('*.html').pipe(gulp.dest(publishFolder));  
  
  gulp.src('./bower.json')
    .pipe(plugins.mainBowerFiles())
    .pipe(plugins.debug({title:'debug-mainBowerFiles'}))
    .pipe(gulp.dest(publishFolder))
    .pipe(plugins.debug({title:publishFolder}));  
});

Summary

gulp-load-plugins automatically loads all “gulp-” components and you can use the methods which are part of it.

Good thing is that instead of multiple require commands I have only one: require(‘gulp-load-plugins’).

However, I’m using strange convention: plugins.debug, plugins.mainBowerFiles(). If I’d be a new developer reading this code, I’d ask: what the hell is it!?!? As all these definitions are in package.json, so I don’t know from which plugin they come from. What is worse for me, I don’t know which plugins are actually used.

For now I don’t see the problem that this gulp-load-plugins is trying to solve. Few lines of code less, but complexity is higher. Good to know that such thing exists, maybe I’ll come back to this later.

One thought on “gulp-load-plugins to simplify Gulp script

Leave a Reply

Your email address will not be published. Required fields are marked *