Scroll down to the script below, click on any sentence (including terminal blocks!) to jump to that spot in the video!
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
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:
|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
|... lines 1 - 12|
|... lines 14 - 15|
|... lines 21 - 27|
This is looking really nice. Oh, and most of these functions - like
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!
main.css is a single line. BUT, through the power of sourcemaps,
we still get the correct
styles.scss line in the inspector.