Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine
This tutorial has a new version, check it out!

Minify

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

Yep, we're combining multiple files into one. That's pretty cool. But our main.css has an embarrassing amount of whitespace. Gross. Let's minify this.

Another plugin to the rescue! This one is called gulp-minify-css. And yea, there are a lot of plugins that can minify CSS. But this is a good one, and it's a superfriend with the sourcemaps plugin. They've even given us a nice install line, so I'll copy that, stop my watch task, and get it downloading:

npm install --save-dev gulp-minify-css

Next, go steal the require line and paste it on top:

27 lines gulpfile.js
var gulp = require('gulp');
... lines 2 - 27

Oh, and let's put a var before that.

And once again, we're going to use the trusty pipe() function to push things through minifyCSS():

27 lines gulpfile.js
... lines 1 - 12
gulp.src(config.assetsDir+'/'+config.sassPattern)
... lines 14 - 15
.pipe(concat('main.css'))
.pipe(minifyCSS())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('web/css'));
});
... lines 21 - 27

This is looking really nice. Oh, and most of these functions - like minifyCSS() or sass() do take some options. So if you need to customize how things are minified, you can totally do that.

Ok, go back and run gulp!

gulp

And now main.css is a single line. BUT, through the power of sourcemaps, we still get the correct styles.scss line in the inspector.

Leave a comment!

3
Login or Register to join the conversation
Default user avatar
Default user avatar kaizoku | posted 5 years ago

Hey there, MinifyCss is deprecated. Use gulp-clean-css instead

npm WARN deprecated gulp-minify-css@1.2.4: Please use gulp-clean-css

Reply
Default user avatar
Default user avatar Daniel Noyola | kaizoku | posted 5 years ago

it works with gulp-clean-css, I repeat, it works (at the moment of writing this xD)

1 Reply

Yep - the JavaScript world moves at the speed of light! Some of the packages we use in this tutorial are deprecated now. Using the new package should be pretty much the same, but I haven't tried it yet to be sure :).

Reply
Cat in space

"Houston: no signs of life"
Start the conversation!

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