CSS preprocessing

CSS preprocessors are tools that accept source and produce CSS. Very often, the input is similar to the CSS language with regard to the syntax. However, the main idea of preprocessing is to add features that are missing and, at the same time, wanted by the community. Over the past few years, CSS preprocessing has become a hot topic. It comes with lots of benefits and the concept has been warmly accepted by the community. There are two main CSS preprocesors—Less (http://lesscss.org/) and Sass (http://sass-lang.com/). Sass is based on the Ruby language and it requires more effort to run it in a Node.js project. So in this book, we are going to use Less.

In the previous chapter, we talked about building systems and task runners. CSS preprocessing and a few other tasks that we will talk about in a bit should happen automatically. Gulp seems like a good option. Let's move forward and add a package.json file where we will describe all the Gulp-related modules that we need:

{
  "name": "nodejs-by-example",
  "version": "0.0.1",
  "description": "Node.js by example",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "gulp": "3.8.8",
    "gulp-less": "1.3.6",
    "gulp-rename": "~1.2.0",
    "gulp-minify-css": "~0.3.11"
  }
}

The setting of "start": "node server.js" will allow us to type npm start and run our server. The dependencies that we will start with are as follows:

So, along with server.js, we now have package.json. We run npm install and the package manager adds a node_modules directory containing the modules. Let's define our Gulp tasks in another file named gulpfile.js:

var path = require('path');
var gulp = require('gulp');
var less = require('gulp-less');
var rename = require("gulp-rename");
var minifyCSS = require('gulp-minify-css');

gulp.task('css', function() {
  gulp.src('./less/styles.less')
  .pipe(less({
    paths: [ path.join(__dirname, 'less', 'includes') ]
  }))
  .pipe(gulp.dest('./static/css'))
  .pipe(minifyCSS({keepBreaks:true}))
  .pipe(rename({suffix: '.min'}))
  .pipe(gulp.dest('./static/css'));
});

gulp.task('watchers', function() {
  gulp.watch('less/**/*.less', ['css']);
});

gulp.task('default', ['css', 'watchers']);

We start with two tasks—css and watchers. The first one expects us to have a less directory and a styles.less file inside. This will be our entry point to all the CSS styles. As seen from the Gulp task, we pipe the content of the file to the preprocessor and export the result to the static/css directory. Since everything with Gulp is a stream, we can continue and minify the CSS, rename the file to styles.min.css, and export it to the same folder.

We do not want to run the building processes by ourselves every time we make changes to a file. So, we register watchers for the files in the less folder. A watcher is a process that monitors specific files and notifies the rest of the system once these files are changed.

At the end of this step, our project looks like this:

CSS preprocessing