Minify CSS Files For Production Using Gulp

 ·  · 

It is necessary to minify CSS files before deploying to production environment. Minified CSS, JavaScript or HTML files not only can save traffic usage of your server, but also can speed up the HTTP request and improve user experience of your page loading.

Gulp is an awesome node.js based tool to help developer build front-end projects, including minifying CSS files of course.

 

1 Minify

Note: gulp-minify-css package has been deprecated in favor of gulp-cssnano, you can refer to the new article: Minify CSS Files Using gulp-cssnano.

We are going to use the package gulp-minify-css to minify CSS files. Install it and save it as dependency:

$ npm install gulp-minify-css --save-dev

Add pre-configurations in gulpfile.js:

/* gulpfile.js */

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');

// bool flag to check whether current env is development or not
// true:        development
// false:       production
var isDebug = ((process.env.NODE_ENV || 'development').trim().toLowerCase() !== 'production');

var
    source = 'src/',    /* source code folder */
    dest = 'dist/';     // distribution folder

var css = {
    in: source + 'css/*.css',
    out: dest + 'css/'
};

In fact, the minifying task is easy:

/* gulpfile.js */
.......

gulp.task('css', function () {
    var cssfile = gulp.src(css.in);

    if(!isDebug) {
        cssfile = cssfile.pipe(minifycss());
    }

    return cssfile.pipe(gulp.dest(css.out));
});

If you want to build a minified version CSS file for production, just execute following command in shell:

$ export NODE_ENV=production
$ gulp

 

2 Remove Comments

gulp-minify-css will remove comments lines in CSS file by default. But it will not remove the important comments line, which looks like:

/*! With a exclamation mark means this is an IMPORTANT comment */

The important comments usually is either a open source license description or a declaration from the source code author. You can remove it using gulp-replace if you want.

Install gulp-replace and save it to project dependencies:

$ npm install gulp-replace --save-dev

Using gulp-replace to replace the important comments into normal comments before we passing the pipe stream to gulp-minify-css:

/* gulpfile.js */
.......

var cssreplace = require('gulp-replace');

gulp.task('css', function () {
    var cssfile = gulp.src(css.in);

    if(!isDebug) {
        cssfile = cssfile.pipe(cssreplace('/*!', '/*'))
                        .pipe(minifycss());
    }

    return cssfile.pipe(gulp.dest(css.out));
});

 

3 Concatenate

If you have many separate CSS files and hope to minify them into a single file for production, gulp-concat will save your life. And it also allow you to rename the concatenated result file.

Installation:

$ npm install gulp-concat --save-dev

Update the gulpfile.js file:

/* gulpfile.js */

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var cssreplace = require('gulp-replace');
var concat = require('gulp-concat');

var isDebug = ((process.env.NODE_ENV || 'development').trim().toLowerCase() !== 'production');

var
    source = 'src/',    /* source code folder */
    dest = 'dist/';     // distribute folder

var css = {
    in: source + 'css/*.css',
    out: dest + 'css/'
};

gulp.task('css', function () {
    var cssfile = gulp.src(css.in);

    if(!isDebug) {
        cssfile = cssfile.pipe(cssreplace('/*!', '/*'))
                        .pipe(minifycss())
                        .pipe(concat('main.min.css'));
    }

    return cssfile.pipe(gulp.dest(css.out));
});

Build project to get minified CSS file:

$ export NODE_ENV=production && gulp