This tutorial has a new version, check it out!
> Gulp! Refreshment for Your Frontend Assets
Login to bookmark this video
Buy Access to Course
05.

Combining (concat) Files

Share this awesome video!

|

Keep on Learning!

Start your All-Access Pass

We only have one CSS file, and gosh, that's just not very realistic. So, let's create a second one. Call it, layout.scss. To keep the dinosaurs happy, let's give the body a background - a nice dark green background:

4 lines | app/Resources/assets/sass/layout.scss
body {
background-color: #006400;
}

Ya know, because they're, sorta, dark green.

Go back and refresh! Ok, it doesn't work quite yet. But hey! We do have the watch task running in the background, and it's looking for any .scss file in that directory. So we should at least have a new layout.css file. Ah, there it is.

If we want to keep things simple, we can just add another link tag in the base template to use this:

49 lines | app/Resources/views/base.html.twig
// ... lines 1 - 2
<head>
// ... lines 4 - 9
<link rel="stylesheet" href="{{ asset('vendor/bootstrap/dist/css/bootstrap.css') }}"/>
<link rel="stylesheet" href="{{ asset('css/styles.css') }}"/>
<link rel="stylesheet" href="{{ asset('css/layout.css') }}"/>
// ... lines 15 - 49

Perfect!

Using gulp-concat

But I don't want to make my users download a ton of CSS files. I want to combine them all into a single file. There's a plugin for that. This time, it's called gulp-concat.

Let's do our thing. Step 1: install this via npm. Hit ctrl+c to stop watch, then:

npm install gulp-concat --save-dev

While the npm robots work on that for us, let's go back and copy the require statement:

25 lines | gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');
// ... lines 5 - 25

The gulp.src() function loads a stream of many files. The new concat() function combines those streams into just 1 file. He's such minimalist.

Let's do this right after sass() - pipe(), then concat(). And pass it the filename it should create - main.css:

25 lines | gulpfile.js
// ... lines 1 - 10
gulp.task('sass', function() {
gulp.src(config.assetsDir+'/'+config.sassPattern)
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(concat('main.css'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('web/css'));
});
// ... lines 19 - 25

Make sure you keep this between the sourcemaps lines because we're smashing multiple files into one, and that'll change the line numbers and source files for everything. But sourcemaps will keep track of all of that for us. Good job sourcemaps!

Empty out the web/css directory before testing things: those shouldn't be generated anymore. Now, try gulp:

gulp

And hey, now we've got just one beautiful main.css file and its map. It's got the CSS from both our source files. Don't forget to celebrate by going back to your base template and turning those 2 link tags into 1.

Refresh to try it. Of course it works, but now with just 1 CSS file... other than my Bootstrap and font stuff. But the real test is whether the sourcemap still works. Inspect on our awesome cursive. Yep, it knows things are coming from style.scss on line 4. Right on!