Adding stylesheets into my Gulp file

I have been working on a series of blog post about my new development process, which so far has focused exclusively on javascript, including concatenation of javascript files, using Browserify to load jQuery and other javascript library files, and minifying (or uglifying) javascript files.  Next it's time to look at adding stylesheets.

Similar to javascript files, stylesheet files can be concatenated, in order to save round trips for individual files.  So the first place I started was copying the javascript task, rewriting it for stylesheet files, and stripping out everything but the call to gulp-concat - the same plugin can be used as it fill concatenate any files.  

gulp.task("css",function(cb) {
  pump([
    gulp.src(["css/*.css"]),
    concat("style.css"),
    gulp.dest("build/css")
  ]);
});

I think also creating a default Gulp task, in order to make it easy to call both my javascript and stylesheet tasks...

gulp.task("default",["js","css"]);

This means that when you run just "gulp" on the command line, it will automatically call the default task, which will then run through the array of related tasks - these are pre-requisites that are run first.  This list of pre-requisites can be set for any task, but is especially useful in this default mode.

Also similar to javascript files, stylesheet files can be minified (or uglified), in order to save bandwidth and download time.  However, this time a different plugin will be required, and the best I've found it called gulp-clean-css.  Like many Gulp plugins, this is actually a thin wrapper around another plugin, called clean-css.

First I added the new plugin to the top of my Gulp file...

var cleancss = require("gulp-clean-css");

And then I added the call to my stylesheet task...

gulp.task("css",function(cb) {
  pump([
    gulp.src(["css/*.css"]),
    concat("style.css"),
    cleancss(),
    gulp.dest("build/css")
  ]);
});

The script has two levels...

1. These operate on single properties only, and are mostly on by default. 
2. These operate on multiple properties at a time, including restructuring and reordering rules, but are off by default.

I have been using the default options for some time now, and these seems to serve me pretty well.  But if you want even more savings, you can play with the options, especially by activating the second level of optimisations.

These are also covered in my Skillshare course, Optimising your website: A development workflow with Git and Gulp.  The relevant videos are 15 - Concatenating Stylesheets and 16 - Minifying Stylesheets.

First Gulp task - concatenation

I recently started using a new development process, using Gulp to automate development tasks.  I thought I'd start off easy, so I'd concatenate my existing javascript files into a single file.

You might ask, why would you want to do this?  And my answer would be, you want to reduce the number of items fetched when loading your page, for optimal performance.

You might ask, why don't you do this manually once and then always work on the concatenated file?  And my answer would be, some of the files are plugins or libraries, which I want to keep separate so that I can easily update them.  I only want them to be combined in the build version.

So, questions out of the way, here's how it went down.

Firstly, you need to make sure you include the relevant bits at the top of your Gulp file.  I included 3 to start with...

var gulp = require("gulp");

var util = require("gulp-util");

var concat = require("gulp-concat");

Gulp and gulp-util are essentially your basics, needed in every Gulp file.  I then found gulp-concat on NPM (Node Package Manager, regardless of what the top left corner of the site says!) and it looked like it would do the trick, so I included that too.

This is one of the big advantages to Gulp.  Because it runs in Node, you can use NPM to find and install packages, which allows you to maximise the code not written, but using some that someone else has written for you!

So now I create a simple Gulp task...

gulp.task("js",function(cb) {

  gulp.src(jsFiles)

    .pipe(concat("script.js"))

    .pipe(gulp.dest("build/js"));

});

I'd recommend reading up more on Gulp, but essentially this is taking an array of filenames stored in "jsFiles" and using it as the source, piping this through to the gulp-concat plugin which takes a parameter to name the resultant output file, and then setting the destination to be my build directory.  When I run this, it sucks in all the files, concatenates them, and then spits out a single file to my build directory.

I then modified the HTML so that instead of linking to lots of different javascript files in the <head> tag, I now reference just one javascript file, and I also do it at the end of the <body>.  I've also added a "defer" attribute, because it really doesn't need to be loaded upfront - this reduces the time till the First Meaningful Paint.