gulp-load-plugins

Edit on GitHub

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.

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
    }
}

Edit on GitHub

COURSE

Gulp! Refreshment for Your Frontend Assets

gulp-load-plugins

Keep on Learning!

Leave a comment!

What PHP libraries does this tutorial use?

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

	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