Intro To Gulp Part 2 - CSS

01.08.2014 — Gulp, JavaScript, CSS, SASS/SCSS — 3 min read

Intro

In part 1, I went over using Gulp to work with our javascript files. In this entry, I will be going over using it for our SASS/CSS files. So let's go ahead and dive in. Just like before I am going to start with a super simple gulpfile. I will not be using the one we created in the previous lesson because I am going to make everything very modular in my next post.

What we want to do

First, let's write out our list of everything we want our task to accomplish with our CSS. I personally use SASS as a pre-processor so, in my build, I will be working with it.

Monitor all our SASS files for changes
Compile our SASS files into a single CSS file
Make sure vendor prefixes are used when necessary
Lint our CSS File
Copy our new file into our distribution folder
Minify the file
Rename the file

So again, let's start with our basic gulpfile:

1var gulp = require( 'gulp' );
2gulp.task( 'css', function() {
3  gulp.src( './src/css/**/*.scss' ).pipe( gulp.dest( './dist/css' ) );
4)};
5
6gulp.task( 'watch', function() {
7  gulp.watch( './src/css/**/*.scss', ['css'] );
8});
9
10// The default task (called when you run `gulp` from cli)
11gulp.task( 'default', ['watch']);

As before, this handles our first requirement but it simply copies all of our existing SASS files over into our distribution folder. This isn't what we want at all!

SASS to CSS

There is a great plugin for working with SASS inside of Gulp called gulp-sass. Let's go ahead and install it and include it in our gulpfile.

1npm install gulp-sass

And our gulpfile:

1var gulp = require( 'gulp' );
2var sass = require( 'gulp-sass' );
3
4gulp.task( 'css', function() {
5  gulp.src( './src/sass/app.scss' )
6      .pipe(sass())
7      .pipe( gulp.dest( './dist/css' ) );
8)};
9
10gulp.task( 'watch', function() {
11  gulp.watch( './src/sass/**/*.scss', ['css'] );
12});
13
14// The default task (called when you run `gulp` from cli)
15gulp.task( 'default', ['watch']);

There are a couple of changes. We have included our SASS plugin but notice, in the css task, the src option only lists a single SASS file. Although we are monitoring all of our SASS files for changes, when the task runs, it only executes against the one file app.scss.

The reason being, I make one main SASS file that imports all my different component SASS files. For example, I have a "base" SASS files with all my variables, mixins and basic font settings. I might have another called "elements" with different styles for buttons, inputs, etc. So all of these files are being monitored for changes but I only need to compile the app.scss because it includes all of the other files!

Our task uses the sass() call to convert to CSS and copied the resulting file to our distribution folder. Now we can mark these steps off of our list now.

~~Monitor all our SASS files for changes~~
~~Compile our SASS files into a single CSS file~~
~~Copy our new file into our distribution folder~~

Prefixing and Linting

Now let's take care of those pesky vendor prefixes. Before I used gulp, I created a bunch of mixins to add vendor prefixes into my CSS. Not any more! There is a plugin called gulp-autoprefixer that can now do this for us. We can install it the same way we did the SASS plugin.

1npm install gulp-autoprefixer

Now let's get it setup in our gulp file.

1var gulp = require( 'gulp' );
2var sass = require( 'gulp-sass' );
3var prefix = require( 'gulp-autoprefixer' );
4
5gulp.task( 'css', function() {
6  gulp.src( './src/sass/app.scss' )
7      .pipe( sass() )
8      .pipe( prefix('last 3 versions') )
9      .pipe( gulp.dest( './dist/css' ) );
10)};
11
12gulp.task( 'watch', function() {
13  gulp.watch( './src/sass/**/*.scss', ['css'] );
14});
15
16// The default task (called when you run `gulp` from cli)
17gulp.task( 'default', ['watch']);

Two new lines of code and vendor prefixes are handles. We pass an arument 'last 3 versions' which tells the prefixer to append all the prefixes needed to support the last three versions of all the major browsers. That's freakin' cool right there!

Now, we can take care of linting our code. I used gulp-csslint. Again, you install it the same way as the previous plugins (so I am not going to show this step anymore) and update our file.

1var gulp = require( 'gulp' );
2var sass = require( 'gulp-sass' );
3var prefix = require( 'gulp-autoprefixer' );
4var lint = require( 'gulp-csslint' );
5
6gulp.task( 'css', function() {
7  gulp.src( './src/sass/app.scss' )
8      .pipe( sass() )
9      .pipe( prefix('last 5 versions') )
10      .pipe( lint() )
11      .pipe( gulp.dest( './dist/css' ) );
12)};
13
14gulp.task( 'watch', function() {
15  gulp.watch( './src/sass/**/*.scss', ['css'] );
16});
17
18// The default task (called when you run `gulp` from cli)
19gulp.task( 'default', ['watch']);

Cool! We now see all of our css errors and warnings and can fix them as needed. Let's mark those off the list.

~~Make sure vendor prefixes are there~~
~~Lint our CSS File~~

Minify and Rename

All that is left on our list of requirements is minifying and renaming. First, let's get the minification done. For this I will use gulp-compressor. And, if you read part 1, we used a plugin called gulp-rename to rename our files. This will work on our CSS file as well so let's add them in.

1var gulp = require( 'gulp' );
2var sass = require( 'gulp-sass' );
3var prefix = require( 'gulp-autoprefixer' );
4var lint = require( 'gulp-csslint' );
5var rename = require( 'gulp-rename' );
6var compress = require( 'gulp-compressor' );
7
8gulp.task( 'css', function() {
9  gulp.src( './src/sass/app.scss' )
10      .pipe( sass() )
11      .pipe( prefix('last 5 versions') )
12      .pipe( lint() )
13      .pipe( gulp.dest( './dist/css' ) )
14      .pipe( compress() )
15      .pipe( rename( { suffix: '.min' }) )
16      .pipe( gulp.dest( './dist/css' ) )
17)};
18
19gulp.task( 'watch', function() {
20  gulp.watch( './src/sass/**/*.scss', ['css'] );
21});
22
23// The default task (called when you run `gulp` from cli)
24gulp.task( 'default', ['watch']);

After this update we are now copying app.css to dist folder, then compressing it and renaming it to app.min.css. That handles all of our requirements! Nice and easy.

~~Minify the file~~
~~Rename the file~~

Going Above and Beyond

While researching this, I came across a number of other plugins that i thought would be very useful. Some of them I added to my own workflow and others I plan on experimenting with later on. Here they are

SCSSLint - Lints your SASS files before compiling them to CSS.
gulp-bless - Gulp plugin which splits CSS files suitably for Internet Explorer < 10
csscss - gulp plugin that runs csscss, a CSS redundancy analyzer.
group-css-media-queries - CSS postprocessing: group media queries. Useful for postprocessing preprocessed CSS files.
gulp-rev - Static asset revisioning by appending content hash to filenames: unicorn.css → unicorn-098f6bcd.css
gulp-rev-css-url - The lightweight plugin to override urls in css files to hashed after gulp-rev
uncss - Remove unused CSS selectors.
critical - Extract & Inline Critical-path CSS from HTML
colorguard - Keep a watchful eye on your css colors.
livereload - gulp plugin for livereload

That's all for this time. Next time, I will talk about image optimization. And, as an added bonus, combining all of the gulpfiles into one file with a bunch of cool tricks aiming to keep our gulpfile as DRY as possible.

'Til next time, -G