Optimize your CSS files with Gulp.js – Part 1

When I was a novice CSS programmer, I wrote all my code in a single css file, just a style after the other. I knew that HTTP works better with a single big file instead of multiple little ones.

But  soon this file became very large and difficult to update, my system was not modular and scalable.

Then I read SMACSS and it changed the way I architect my CSS source code.

But the modularization of CSS yet caused the creation of multiple files, instead of a big one, with all its implications. So I began to search a tool to concatenate and optimize my files in a single one.

Welcome Gulp.js.

gulpjs

I want to reach the following goals:

  1. concatenate all files in one (concat)
  2. minify the source code (minify)
  3. avoid browser cache when I change the CSS source code (cache bust)
  4. transparent and automated operation when we modify the original files (watch)

In this post I will perform step 1. e 2 . I will finish the work in the next post.

In this article I apply Gulp to CSS files but, with some little differences, it can be applied as well to JS files.

The Gulped Site

We begin with an example of a simple Web Site, having 5 different css files:

  • base.css
  • layout.css
  • module.css
  • dark-theme.css
  • state.css

(a typical structure of CSS).

HTML code in index.html:

base.css:

layout.css

module.css

state.css

dark-theme.css

The result (in Chrome 50) is the following:

gulped site

One can think this is a too complex CSS structure for this simple site, and he thinks right, but I show this only as an example (and often we begin with a simple site that soon becomes monstrous code!).

The structure of our gulped site root folder is very simple:

  • folder: css (containing filesbase.css, layout.css, module.css, dark-theme.css, state.css)

  • file: index.html

Install Gulp

To install gulp for this project we follow the simple instruction at the gulp github repository:

From the terminal cd to the root directory of the web site and type:

followed by:

If you don’t have npm (Nodes Package Manager installed see here):

Now we are ready to start with the gulp optimizations.

The gulpfile

Create a file named gulpfile.js in the root folder with this javascript code inside:

running from the terminal the command:

The task ‘default’ is executed. It does nothing, because, as you see, the function passed to gulp.task is empty.

So you begin to understand the philosophy of gulp. It can handle one or more task. What these task do depends on our code, passed as a function to the gulp.task method.

Note also the require keyword, used to include the gulp functionality and instantiate the object gulp used to add a tasks.

Concatenation

The first task we want gulp to do for us is to concatenate our 5 css files. To do this we use a gulp helper named gulp-concat.

It’ not rare that a task we define in the gulp file needs some helper (or plugin, how it is called), and we need to install it because it is not built inside gulp. To install a plugin we type a command like the following:

For example to install gulp-concat we type:

Then we ca use it. Modify the gulpfile to read:

We define all our files in a separate array (css_files), and pass them to the gulp.src function. This return a gulp instance referencing that files so that  we can then chain the calls: concat (that unify them in a single file) and dest (that output the result file in our css  folder).

In the task chain (built with the pipe method) each operation returns a result that is processed by the subsequent operation: src -> concat -> dest

Note also that we changed the name of the task from default to css_build. The default task is executed when we pass no additional parameters to the gulp terminal command. If we want to execute a particular task we must add the name of that task to the gulp command:

this will output a file called all.css in our css folder. This file is the sum of all our source code:

Note that the order of the source code in the concatenated file is the same of the order of the files in our array css_files. This is important because the CSS styles final result depends on the order of declaration (remember: Cascading Style Sheets).

Minification

To minify the css code we use another gulp plugin named clean-css. Install it with the command:

and add the line:

to the task chain. This is the new gulp file:

Note also the instantiation of the variable cleanCSS before using it. Now the command:

generates the file all.css concatenated and minified:

This file contains a line for each source code file.

Now in our index.html file we can substitute the lines:

with the single line

In this way we have a single file minified with all our css code inside.

Gulp and file not found

When I was writing this code, I mistyped a source file (an ‘s’ added to module[s].css). Gulp simply ignored the file without a warning or error.

This can be subtle and I decided to check for file existence before calling the task.

In my gulpfile I added the following function:

This function uses the fs library and it needs to be instantiated with the line:

In the new gulpfile we check that the files exist:

Now if we mistype a filename the script warns us:

Conclusion

Gulp and its plugins help us to execute tasks to concatenate and minify the css code. Many other plugins are available to perform many kind of different task.

The source code of this article can be found on my github page.

In the next post I will show how to use gulp to avoid browser cache on our css and how to automate the gulp task: execute it without typing gulp command at every code change.

Valerio Ferrucci

Valerio Ferrucci (valfer) develops software on Apple Macintosh since the 1990s until today for MacOS, OSX and, since some years, iOS. He is also a Web (PHP/MySQL/JS/CSS) and Android Developer.

More Posts - Website

Follow Me:
TwitterFacebookLinkedIn

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Leave a Reply

Your email address will not be published. Required fields are marked *