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

17.

on('end'): Async and Listeners

|

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

Login or register to check out the script

9 Comments

Sort By

Login or Register to join the conversation

Kevin hace 8 años edited

Hi there,

Thanks for the tutorial, it's really good !
I've got an issue here. Your Pipeline method is working great for me but :

The problem is that when I make a syntax error in the SCSS file, the plumber catch the error and gulp is still running, but nothing happen when I fix the syntax, no more CSS files are generated, it's like the watch styles is down.

Did I make something wrong ? Did you test the plumber with the Pipeline ?

|

Kevin hace 8 años edited

Hi there,

Thanks for the tutorial, it's really good !

I've got an issue here. Your Pipeline method is working great for me but :

The problem is that when I make a syntax error in the SCSS file, the plumber catch the error and gulp is still running, but nothing happen when I fix the syntax, no more CSS files are generated, it's like the watch styles is down.

Did I make something wrong ? Did you test the plumber with the Pipeline ?

|

weaverryan SFCASTS Kevin hace 8 años edited

Hi Kevin!

Ah, I think you're right! There is a bug here :). Fortunately, it looks like a well-known bug with a well-known workaround. Try updating both of your plugin.plumber calls (for CSS and JS) to look like this


        .pipe(plugins.plumber(function(error) {
            console.log(error.toString());
            this.emit('end');
        }))

Specifically, instead of just calling plumber(), you need to provide a callback. This callback should print the error (which plumber did automatically before adding this function) and then call this.emit('end'). That is the key: this tells the watch task that plumber is finished... which for some reason is the key to the whole thing.

Let me know if it works! I'm going to make an update to the tutorial.

Thanks for the question!

1 |

Kevin weaverryan hace 8 años

It works perfectly, thank you :)

|

Kevin hace 8 años edited

Hey again there !

I found a bug with the manifest file. It seems to work with 2 tasks (styles & scripts).

Then, I wanted to do 4 tasks (styles, styles_libraries, scripts and scripts libraries), in order to avoid generate the libraries files when I watch the custom styles, because it takes so long to generate the file when using some libraries. (~3s, couldn't wait so long to reload the browser)

After I had the 4 tasks, the manifest has gone crazy, it was rewriting when another task was still running even with the Pipeline.

I wonder if the problem comes from the fact that we initialize multiple Pipeline object and they can't communicate between them...? I don't have enough knowledge about Promise to be sure. Any ideas ?

Some threads say the manifest need a base path to have a good merge :


var config = {
    baseRevManifestPath: 'app/Resources/assets',
    revManifestPath: 'app/Resources/assets/rev-manifest.json'
};

.pipe(plugins.rev.manifest(config.revManifestPath, {
    base: config.baseRevManifestPath,
    merge: true
}))
.pipe(gulp.dest(config.baseRevManifestPath));

However, this doesn't fix the issue, I don't know if this is necessary...

To fix the issue, I had to finally use the deps array of gulp tasks and make styles_libraries dependant from styles, scripts dependant from styles_libraries and scripts_libraries dependant of scripts.

I don't know if it's a good solution, but it seems to work so far.

What do you think about this ?

|

Kevin hace 8 años edited

Hey again there !

I found a bug with the manifest file. It seems to work with 2 tasks (styles & scripts) in the tutorial.

Then, I wanted to do 4 tasks (styles, styles_libraries, scripts and scripts libraries), in order to avoid generate the libraries files when I watch the custom styles, because it takes so long to generate the file when using some libraries. (~3s, too long for some CSS modifications)

After I had the 4 tasks, the manifest has gone crazy, it was rewriting when another task was still running even with the Pipeline.
I wonder if the problem comes from the fact that we initialize multiple Pipeline object and they can't communicate between them...? I don't have enough knowledge about Promise to be sure. Any ideas ?

Some threads say the manifest need a base path to have a good merge :


var config = {
    baseRevManifestPath: 'app/Resources/assets',
    revManifestPath: 'app/Resources/assets/rev-manifest.json'
};

.pipe(plugins.rev.manifest(config.revManifestPath, {
    base: config.baseRevManifestPath,
    merge: true
}))
.pipe(gulp.dest(config.baseRevManifestPath));

However, this doesn't fix the issue, I don't know if this is necessary...

To fix the issue, I had to finally use the deps array of gulp tasks and make styles_libraries dependant from styles, scripts dependant from styles_libraries and scripts_libraries dependant of scripts.

I don't know if it's a good solution, but it seems to work so far.

What do you think about this ?

|

Startchurch hace 8 años

Hey Ryan,
Really helpful tutorial. We've already started to take what we've learned here and started to apply it to a project. After watching the last video, it would seem like the Pipeline class would already exist somewhere as a library in the NPM database. Do you know of a library? Do you have plans to release it as a library? Or should someone like me create it?

|

weaverryan SFCASTS Startchurch hace 8 años edited

Hey Startchurch!

Ah, really glad this was useful! So, I don't know of any such library, but I got the *exact* same impression as you: there was a logical problem... so I was expecting a library to already exist. To this day, the fact that there wasn't/isn't a library, leaves me thinking that there *might* be some other direction to take in solving this. But so far, I haven't seen anything. I don't have plans to release it as a library since (A) it's pretty small and (B) I still think that *eventually* a different method or library will be uncovered. But until then, it's working great for me and others.

Cheers!

|

Startchurch weaverryan hace 8 años

I'm with you, it seems like an obvious problem, so it would seem that something would exist already.

What about a collection in memory of resources? When a resource get's updated in memory, the whole collection gets written? Maybe that idea wouldn't play well with gulp-rev.

|

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