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

15.

Versioning to Bust Cache

|

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

27 Comments

Sort By

Login or Register to join the conversation

chieroz 8 years ago

Hello Ryan, I am struggling to set this service with Symfony 3.3 but I get an AutowiringFailedException because "argument "$appDir" of method "__construct()" must have a type-hint or be given a value explicitly."

can you give me some help?

thank you very much

3 |

MolloKhan SFCASTS chieroz 8 years ago edited

Hey chieroz

In order to the Autowiring to work correctly, it needs you to type-hint every parameter, for parameter that can't be type-hinted (like strings, booleans, etc), you have to explicitly specify them, like this:


services:
    my_service:
        class: AppBundle\Service\MyService.php
        autowire: true
        arguments:
            2: '%some_value%'

That "2" is the number of the argument's position in the constructor, counting from 1 to N, from left to right

Cheers!

|

Dan Reinders MolloKhan 8 years ago edited

I got mine to work with:


services:
    AppBundle\Twig\AssetVersionExtension:
        arguments:
            0: '%kernel.root_dir%'

|

MolloKhan SFCASTS Dan Reinders 8 years ago edited

Hey Dan Reinders

Yeah, your code should work because the parameter you want to inject is in the "0" position. Mine is only an example of how it works :)

Cheers!

|

ElHornair 8 years ago edited

Hi Ryan

If you have a couple of files in the rev-manifest, you will be doing unnecessary file system reads. Because the Twig extension is a singleton, you can load the paths once and save them in a class variable. Here is the adapted code:


    private $paths = [];

    public function getAssetVersion($filename)
    {
        if (count($this->paths) === 0) {
            $manifestPath = $this->appDir.'/Resources/assets/rev-manifest.json';

            if (!file_exists($manifestPath)) {
                throw new \Exception(sprintf('Cannot find manifest file: "%s"', $manifestPath));
            }

            $this->paths = json_decode(file_get_contents($manifestPath), true);
        }

        if (!isset($this->paths[$filename])) {
            throw new \Exception(sprintf('There is no file "%s" in the version manifest!', $filename));
        }

        return $this->paths[$filename];
    }

PS: I'd be happy to add this as a PR to the above tutorial (which is great btw, thanks a lot!) but I couldn't find this on Github. Any hints?

|

weaverryan SFCASTS ElHornair 8 years ago edited

Yo ElHornair!

Yea, you're totally right - my algorithm could easily be made more efficient :). This *is* on GitHub (https://github.com/knpunive..., but to actually update it is a little complex - we use a proprietary "diff" system to manage changes that happen *during* the tutorial. BUT, actually, I think we shouldn't change the file anyways - I like to have the code blocks and code download match the video. But, what we *could* do is add a note to the script in *just* the right spot that points over here to your comment. Best of both worlds :). If you agree and want to get your proper props on the GitHub repo, you could edit the script here: https://github.com/knpunive.... We have a special ***TIP syntax you can see - an example is in this script: https://raw.githubuserconte...

Thanks for the comment!

|

ElHornair weaverryan 8 years ago

Alright, will try to do that.
Thanks for wrapping my code btw, didn't know you can do that in Disqus ;)

|

weaverryan SFCASTS ElHornair 8 years ago

My pleasure - it ends up looking nice in Disqus, but it's got a weird, hidden syntax!

1 |

ElHornair weaverryan 8 years ago

Alright, PR is ready: https://github.com/knpunive...

|

irozgar 8 years ago

Hi Ryan,

Thanks for your great tutorials. When I ended this video I asked myself if there was a better way than adding the asset_version filter in every versioned asset (I know that I'd forget writting it more than once) so I started looking of other ways of doing it and I learned
about the VersionStrategyInterface from the Asset Component. After a few hours I've made a simple VersionStrategy to use with assets
versioned with gulp-rev. With it the filter is no needed anymore.

Here is a gist with the code
https://gist.github.com/iro...

And a Symfony Bundle for Symfony >= 2.7 based on the gist
https://github.com/irozgar/...

|

weaverryan SFCASTS irozgar 8 years ago

Ahhh, this is awesome! What a cool way to handle this - you're absolutely right that the VersionStrategyInterface is *meant* for this kind of stuff :). Thanks for sharing! If you want, you could also add a tip in the script about this here https://github.com/knpunive... (there's already an example of a tip). I think this would be a cool thing to point out.

Cheers!

|

irozgar weaverryan 8 years ago

I made a PR

62 |

sergiupopa 8 years ago edited

What's wrong with this?


{% set timestamp = (app.environment == 'dev' ? '?'~"now"|date('U') : '') %}
<link rel="stylesheet" href="{{ asset('css/app.css') ~ timestamp }}">

|

Victor SFCASTS sergiupopa 8 years ago

Hey Sergiu,

It depends on what you're trying to achieve with it? :) As I see this solution doesn't bust cache on prod when you make some changes to it.

Cheers!

|

James Pike 8 years ago

Why use this cache buster 'gulp-rev' when you can just do a hard reload of the browser when you upload the new content? Doesn't the browser then cache the new content and that then overrides the old cached content?

|

Victor SFCASTS James Pike 8 years ago

Hey James,

Yeah, you can do hard reload of your browser, but that's a user side! I mean, you need to tell all your users that they should do hard reload which is not probably appropriable for us ;) That's why we should care about these things

Cheers!

|

James Pike Victor 8 years ago

Thanks Victor, i have a site hosted and i changed some styles locally then pushed them up. When i did a hard reload using Chrome the styles updated, then i checked on Firefox trying to pretend i was a random end user and the changes were already there with no hard reload required.

|

Victor SFCASTS James Pike 8 years ago

Hm, that's interesting... maybe because you're on the same machine, difficult to say, but this should not work so :) If you want an experiment, use 2 laptops at least, but I'd not hope hard reload in a browser will fix the problem for all browsers ;)

Cheers!

1 |

James Pike Victor 8 years ago

Yeah it works on Edge and Opera also, like you say, to run a proper test i'll use my desktop and tablet, 2 different machines...thanks, by the way, do you have to cache bust for the html also or is it just for styles and js?

|

MolloKhan SFCASTS James Pike 8 years ago

Usually it is only for any external resource (like CSS, JS, images, fonts, etc), but if you are using "esi_tags" or any other type of cache for your html, then you would have to refresh it as well (The most probably is that you don't have to worry about that)

Cheers!

|

Marcus Stöhr 8 years ago

Hey Ryan,

thank you for this great tutorial. The version busting strategy is really cool but I have a really hard time to get it working for all my styles and scripts.
I have set it up like you showed in the upcoming chapters using the pipeline. However, the manifest-file doesn't contain all my files but either only one or two of them. It also mixes styles and scripts.

Whats going on here?

|

weaverryan SFCASTS Marcus Stöhr 8 years ago

Hey Marcus!

Yes, I know the problem well! Have you gone through the last 2 chapters in this tutorial (especially https://knpuniversity.com/s.... We talk about this exact issue. When recording this chapter - the manifest issue hadn't reared it's head - so we had to fix it in a later chapter.

Let me know if that helps - and happy you're enjoying things (you'll enjoy them more when cache busting works)!

|

Marcus Stöhr weaverryan 8 years ago

Hi Ryan.

I just checked, double-checked, and in fact triple-checked the chapter you mentioned and my gulpfile.js contains all of this. However, it doesn't work and this is driving me nuts.

Any hint what else I can do?

1 |

weaverryan SFCASTS Marcus Stöhr 8 years ago

Hey Marcus!

Hmm - could you throw up a simple example repository on GitHub? Perhaps something changed with some version of these libraries that's causing the problems. This was indeed the trickiest part of this whole tutorial :).

Cheers!

|

s.molinari 8 years ago

Hey Ryan,

What if the names of files are important to the actual execution of the JS app? Cache busting would break the app. Is there a way to "insert" the new versions smartly within the code too?

Scott

|

weaverryan SFCASTS s.molinari 8 years ago

Hey again Scott!

Hmm, what's your use-case? There is a plugin I *almost* talked about, which is useful if you're moving files from one directory to another: https://www.npmjs.com/packa.... And one exists for this and gulp-rev (https://www.npmjs.com/packa... but I haven't tried it yet! Let me know if it fits for you (and what you're use-case in - I'm curious).

Cheers!

|

s.molinari weaverryan 8 years ago

I am playing with a JS framework called Aurelia (the one I mentioned in my other post)

http://aurelia.io/

and I noticed it wouldn't "correct" when changing files, because of the cache in my browser. Obviously I could have the browser load every file again on every call to develop, but cache busting as described here is the better answer. We'll need it anyway to fix bugs in production later, right? So I actually built in the steps you explained in this tutorial into the Aurelia demo app under "Get Started". However, because Aurelia (similar to Angular?) uses data binding with custom tag attributes as built in directives like <body aurelia-app="">, which also formulates the name of the file, cache busting busts the application too. :-(

I found another cache busting module, which partially does something like what is needed I believe.

https://github.com/hollandb...

However, in Aurelia, it doesn't use complete file names in the router.

{ route: ['','welcome'], moduleId: './welcome', nav: true, title:'Welcome' },
{ route: 'flickr', moduleId: './flickr', nav: true },
{ route: 'child-router', moduleId: './child-router', nav: true, title:'Child Router' }

I highly doubt this would work.

{ route: ['','welcome'], moduleId: './welcome#grunt-cache-bust', nav: true, title:'Welcome' },
{ route: 'flickr', moduleId: './flickr#grunt-cache-bust', nav: true },
{ route: 'child-router', moduleId: './child-router#grunt-cache-bust', nav: true, title:'Child Router' }

However, as I said "partially does what is needed", the initial call for app.js through the custom tag attribute is still not resolved.

Scott

|

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