Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine
This tutorial has a new version, check it out!

gulp-load-plugins

Keep on Learning!

If you liked what you've learned so far, dive in!
Subscribe to get access to this tutorial plus
video, code and script downloads.

Start your All-Access Pass
Buy just this tutorial for $6.00

Gulp plugins are like busy little elves, so you'll want to use a lot of them. Of course, that means you'll probably also have a ton of these awesome-looking require statements on top. Ok, they're really not a big deal, but if you want get rid of some of them, you can... by using, um, another plugin! Just go with it - you'll see how it works.

This one is called gulp-load-plugins. First thing is first: copy it's perfect installation statement:

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

Next up, copy the require line and paste it in:

26 lines gulpfile.js
var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
... lines 3 - 26

It's got something the others don't have - some parenthesis at the end. This automatically loads all available gulp plugins and sets each on a property of the plugins variable. That means we can comment out - or just remove - all the require statements except for this one and the one for gulp itself.

Below, just prefix everything with plugins.. So, we'll have plugins.util. Actually, the property name is the second part of the plugin's name. So, gulp-util is added to the util property. gulpif becomes plugins.if, plugins.sourcemaps - I'll copy that because I'm getting lazy - then plugins.sass, plugins.concat and plugins.minifyCss, because minify-css is changed to lower camelcase. Then I'll finish up the rest of them:

26 lines gulpfile.js
var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
var config = {
assetsDir: 'app/Resources/assets',
sassPattern: 'sass/**/*.scss',
production: !!plugins.util.env.production,
sourceMaps: !plugins.util.env.production
};
gulp.task('sass', function() {
gulp.src(config.assetsDir+'/'+config.sassPattern)
.pipe(plugins.if(config.sourceMaps, plugins.sourcemaps.init()))
.pipe(plugins.sass())
.pipe(plugins.concat('main.css'))
.pipe(config.production ? plugins.minifyCSS() : plugins.util.noop())
.pipe(plugins.if(config.sourceMaps, plugins.sourcemaps.write('.')))
.pipe(gulp.dest('web/css'));
});
... lines 20 - 26

I'll clear out the require lines entirely so we can really enjoy things. But now the burning question is: did I break anything? Go back and run gulp:

gulp

Hey, no errors! So if this shorter syntax feels cool to you, go for it. If you hate the magic, no big deal - keep those requires.

Leave a comment!

3
Login or Register to join the conversation

I have a bug after install gulp-load-plugins with gulp-clean-css : Can't pipe to undefined ? when I do the command with --production
How I have to write the line :
.pipe(config.production ? plugins.cleancss : plugins.util.noop())

Reply

Hey Stéphane!

Can you try plugins.cleanCss instead? I believe that - by default - gulp-load-plugins removes the dashes AND camelizes the string.

Cheers!

Reply

Hi Ryan,
Thank for your help. It's working like a charm.

Reply
Cat in space

"Houston: no signs of life"
Start the conversation!

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=5.3.3",
        "symfony/symfony": "2.6.*", // v2.6.4
        "doctrine/orm": "~2.2,>=2.2.3", // v2.4.6
        "doctrine/doctrine-bundle": "~1.2", // v1.2.0
        "twig/extensions": "~1.0", // v1.2.0
        "symfony/assetic-bundle": "~2.3", // v2.5.0
        "symfony/swiftmailer-bundle": "~2.3", // v2.3.7
        "symfony/monolog-bundle": "~2.4", // v2.6.1
        "sensio/distribution-bundle": "~3.0", // v3.0.9
        "sensio/framework-extra-bundle": "~3.0", // v3.0.3
        "incenteev/composer-parameter-handler": "~2.0", // v2.1.0
        "hautelook/alice-bundle": "~0.2" // 0.2
    },
    "require-dev": {
        "sensio/generator-bundle": "~2.3" // v2.4.0
    }
}
userVoice