Chapters

18 Chapters | 1:11:28 |

01

Your First Gulp

4:31
02

Sass to CSS

4:46
03

Sourcemaps

2:46
04

Watch for Changes

3:57
05

Combining (concat) Files

2:57
06

Minify

1:29
07

Minify only in Production

3:04
08

Sourcemaps only in Development

2:04
09

gulp-load-plugins

2:11
10

Errors: Call the Plumber

1:47
11

Page Specific CSS

4:27
12

Bower Components out of web

3:47
13

Minify and Combine JavaScript

6:17
14

Publish Fonts to web

4:10
15

Versioning to Bust Cache

9:10
16

JavaScript Versioning and Cleanup

4:15
17

on('end'): Async and Listeners

6:05
18

Task Order

3:45

This tutorial has a new version, check it out!

> Gulp! Refreshment for Your Frontend Assets

Buy Access to Course

09.

gulp-load-plugins

Autoplay

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

Previous Chapter

Next Chapter

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:

            Copy Code

                            Show All Lines

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

                                                    // ... 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:

            Copy Code

                            Show All Lines

                        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'));
        
            });
        
                Show Lines

                                                    // ... 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.

3 Comments

Sort By

Stephane 6 years ago

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 |

weaverryan SFCASTS Stephane 6 years ago

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 |

Stephane weaverryan 6 years ago

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

| Reply |

Symfony 2

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

Previous Chapter

Next Chapter

gulp-load-plugins

Share this awesome video!

Keep on Learning!

3 Comments

Delete comment?

What PHP libraries does this tutorial use?

	var gulp = require('gulp');
	var plugins = require('gulp-load-plugins')();
Show Lines	// ... 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'));
	});
Show Lines	// ... lines 20 - 26