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

02.

Sass to CSS

Autoplay

Previous Chapter

Next Chapter

Dinosaurs! Actually, these are our test project, and it's written in Symfony. But everything we'll do translates to any PHP project.

But this look bad - it's messed up. And that's totally my fault. Open up the base layout - app/Resources/view/base.html.twig. I'm including Twitter Bootstrap, but that's it so far:

            Copy Code

                            Show All Lines

                        46 lines
            |
            app/Resources/views/base.html.twig
        
                Show Lines

                                                    // ... lines 1 - 2
                            
                <head>
        
                Show Lines

                                                    // ... lines 4 - 9
                            
                        <link rel="stylesheet" href="{{ asset('vendor/bootstrap/dist/css/bootstrap.css') }}"/>
        
                Show Lines

                                                    // ... lines 11 - 15
                            
                </head>
        
                Show Lines

                                                    // ... lines 17 - 46

I do have a project-specific CSS file, but it's missing from here. The problem is that it's not a CSS file at all - it's a Sass file that lives in app/Resources/assets.

Btw, this is where I've decided to put my frontend assets, but it doesn't matter. But do notice that this is not a public directory.

Gulp's first job will be to turn that Sass file into CSS so I can get my site to stop looking so ugly.

Installing `gulp-sass`

With Gulp, we make tasks. But it doesn't do much else. Most things are done with a plugin. Go back to Gulp's site and click Plugins to find a search for, not 13, but 1373 plugins. The one we want is gulp-sass.

First, install it! Copy the npm install gulp-sass. But wait! I want you to add that --save-dev because I want this plugin to be added to our package.json file:

npm install gulp-sass --save-dev

Hey, there it is! When another developer clones the project, they just need to run npm install and it'll download this stuff automatically. Oh, and the gulp-sass plugin preps a sass binary in the background. If you have any issues installing - especially you wild Windows users - check out the node-sass docs.

The Classic pipe Workflow

Head back to the docs. This is showing a classic Gulp workflow. We start by saying gulp.src() to load files matching a pattern. Next, you'll pipe it through a filter - in our case sass() - and pipe it once more to gulp.dest(). That actually writes the finished files.

Let's do it! Be lazy by copying the require line and adding it to the top of our file. Now we'll say gulp.src. Let's load all the Sass files that are in that sass/ directory - so app/Resources/assets/sass/**/*.scss:

            Copy Code

                            Show All Lines

                        9 lines
            |
            gulpfile.js
        
            var gulp = require('gulp');
        
            var sass = require('gulp-sass');
        
            gulp.task('default', function() {
        
                gulp.src('app/Resources/assets/sass/**/*.scss')
        
                Show Lines

                                                    // ... lines 6 - 7
                            
            });

That double ** tells Gulp to look recursively inside the sass directory for .scss files. That'll let me create subdirectories later if I want.

Now that we've loaded the files, we'll just pipe them through whatever we need. Use pipe() then sass() inside of it. Gulp works with streams, so imagine Gulp is opening up all of our .scss files as a big stream and then passing them one-by-one through the pipe() function. So at this point, all that Sass has been processed. Then finally, we'll pipe that to gulp.dest() and say: "Hey, I want you to dump the finished product to the web/css/ directory.":

            Copy Code

                        9 lines
            |
            gulpfile.js
        
            var gulp = require('gulp');
        
            var sass = require('gulp-sass');
        
            gulp.task('default', function() {
        
                gulp.src('app/Resources/assets/sass/**/*.scss')
        
                    .pipe(sass())
        
                    .pipe(gulp.dest('web/css'));
        
            });

That's all we need! Head back to the terminal and just type gulp:

gulp

Ok, no errors - that seems good. But now we do have a web/css/styles.css file. And I know it got processed through Sass because the original is using a variable.

Using the Boring CSS File

Now that we have a boring, normal, generated styles.css file, let's add the link tag to our base template. This uses that asset() function from Symfony, but that's not actually doing anything here. The path is relative to the public directory - web/ for a Symfony project.

            Copy Code

                            Show All Lines

                        48 lines
            |
            app/Resources/views/base.html.twig
        
                Show Lines

                                                    // ... lines 1 - 2
                            
                <head>
        
                Show Lines

                                                    // ... lines 4 - 9
                            
                        <link rel="stylesheet" href="{{ asset('vendor/bootstrap/dist/css/bootstrap.css') }}"/>
        
                        <link rel="stylesheet" href="{{ asset('css/styles.css') }}"/>
        
                Show Lines

                                                    // ... lines 13 - 17
                            
                </head>
        
                Show Lines

                                                    // ... lines 19 - 48

Head back, and refresh! Dinosaurs! That's much better.

Ignore Directories in git

Since the web/css/ directory only contains generated files, we don't need to commit it. If these files are missing, just run gulp! The same goes for node_modules - we can get that by running npm install. Silly directories.

So anyways, it'd be great to not commit these. So let's open up the .gitignore file and add /node_modules and /web/css:

17 lines | .gitignore

Show Lines	// ... lines 1 - 13
	/node_modules
	/web/css
Show Lines	// ... lines 16 - 17

Now when I run git status again, that stuff's gone!

17 Comments

Sort By

Beo 6 years ago

Hi Ryan,
trying to follow the tutorial, I downloaded the project and started the base project. As usual, then, some

composer install

app/console doctrine:database:create
app/console doctrine:schema:create
app/console doctrine:fixtures:load

app/console assets:install --symlink
app/console assetic:dump

and finally

app/console server:run

Opening the page, though, there is no vendor/bootstrap folder, and so the page is even uglier than yours :). Am I missing something?

Thanks,
Pietro

| Reply |

Beo Beo 6 years ago

Autoanswer: the missing step is

bower install

| Reply |

weaverryan SFCASTS Beo 6 years ago

You got it! I just updated the README with these installation instructions (note: the assetic:dump isn't needed for this project). I'll start making sure we have these for *every* project.

Thanks!

| Reply |

Andrea 6 years ago

I tried to setup the project, downloaded your code, using dir "start", then i read all the steps in README but when i look for the site in http;//localhost:8000 symfony says "No route found for "GET /". What's i'm wrong?

| Reply |

weaverryan SFCASTS Andrea 6 years ago

Hi Andrea!

Hmm. The fact that you see the error means that Symfony *is* running correctly. What happens if you run "app/console router:debug" from the terminal? Do you see the dinosaur_list route in the list?

Also, you could try starting the web server on a different port - e.g.

app/console server:run localhost:9002

Then go to http://localhost:9002. I'm wondering if you have some other Symfony app already running on port 8000, so you're seeing this *other* app instead :).

Let me know!

| Reply |

Andrea weaverryan 6 years ago

Yes you right.
The second one is the right answer.
Thanks a lot.

| Reply |

Richard 6 years ago

Where is this bootstrap css from? Its not in your start code. post edit: did I need to do a "bower install"? I dont think this was mentined til now.

| Reply |

MolloKhan SFCASTS Richard 6 years ago

Hey maxii123!

You are right, we forgot to talk about running "bower install"
Thanks for letting us know, we will add a note as soon as we can.

Cheers!

1 | Reply |

Richard MolloKhan 6 years ago

My error. It was indeed listed as a task in the readme. Apologies.

| Reply |

Victor SFCASTS 6 years ago

Hey Konrad,

The "sudo npm install gulp-sass --save-dev" command shouldn't create a web/css directory - it just add a new dependency to your package.json file and download it locally. Probably "gulp" command will create it, but I'm not sure, maybe you should create this directory manually. And when it will be exist, "gulp" command will write there CSS files.

Cheers!

| Reply |

Konrad Zając Victor 6 years ago

Got it thx!

| Reply |

Konrad Zając 6 years ago

how to servw the application? "gulp serve" doesn't work.

| Reply |

MolloKhan SFCASTS Konrad Zając 6 years ago edited

Hey Konrad Zając

Did you install gulp globally ?
Could you show me the error message you are getting ?

When you run "gulp task_name" this by default will open any gulpfile.js file which lives in the same directory where you ran the command, and it will try to find and execute the given task name.

Have a nice day!

| Reply |

Konrad Zając MolloKhan 6 years ago

Firstly I did instalI gulp globally.
Secondly there's no error per se.
I know all that, but there's no serve task in the gulpfile.js in the "start" directory - there's no error, but I'm supposed to see the dinosaurs...

| Reply |

MolloKhan SFCASTS Konrad Zając 6 years ago edited

Hey Konrad Zając

I can't find that "serve" task either (maybe in a further chapter?) but you should be able to load the page without it, you just need to follow the steps in the README and then hit the page

Cheers!

| Reply |

Konrad Zając MolloKhan 6 years ago

I don't think I should just continue without the server the next chapter "sourcemaps" requires inspecting the graphical site.

| Reply |

weaverryan SFCASTS Konrad Zając 6 years ago edited

Yo Konrad Zając!

I think I may know why everyone is so confused :).You're 100% correct that there is no "serve" task in gulpfile.js in the "start" code download. That's because we're not using gulp to serve the site in this tutorial: we use the built-in PHP web server in Symfony (app/console server:run). I noticed that we do a poor job of mentioning that in the tutorial itself (my apologies - we do a much better job in all of our more recent tutorials). We do mention this in the README.md file that's in the code download, which you can also see here: https://github.com/knpuniversity/gulp/blob/master/README.md#installation

So, try app/console server:run instead. You can of course make your own gulp serve command - but because we're using a PHP application as our "backend", we're using the PHP web server.

Cheers!

| 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

Sass to CSS

Share this awesome video!

Installing `gulp-sass`

The Classic pipe Workflow

Using the Boring CSS File

Ignore Directories in git

17 Comments

Delete comment?

What PHP libraries does this tutorial use?

Show Lines	// ... lines 1 - 2
	<head>
Show Lines	// ... lines 4 - 9
	<link rel="stylesheet" href="{{ asset('vendor/bootstrap/dist/css/bootstrap.css') }}"/>
Show Lines	// ... lines 11 - 15
	</head>
Show Lines	// ... lines 17 - 46

	var gulp = require('gulp');
	var sass = require('gulp-sass');

	gulp.task('default', function() {
	gulp.src('app/Resources/assets/sass/*/.scss')
Show Lines	// ... lines 6 - 7
	});

Sass to CSS

Installing gulp-sass

The Classic pipe Workflow

Using the Boring CSS File

Ignore Directories in git

17 Comments

What PHP libraries does this tutorial use?

Installing `gulp-sass`