How to use 'CSSNANO' in Gulp

Hello Folks,

This is Anita here and it’s my first post. I want to share how to use cssnano to minify CSS through gulp js which is very flexible & the fastest build tool for Front end development.

What is Gulp?

First, let’s define what is Gulp. According to the official site, Gulp is a toolkit to automate & enhance your workflow and also enables you to compile, minify and concatenate any files around your project directory where you will be running a web server. So we will go into more detail a bit further down setup.

Some quick setup

First of all, you will need to have a node installed on your machine.

1. node --version
2. npm install --global gulp-cli
3. npm init (for package.json)
4. npm install gulp --save-dev (devDependencies)
5. npm install gulp-sass --save-dev (devDependencies)
6. npm install autoprefixer --save-dev (devDependencies)
7. npm install postcss gulp-postcss --save-dev (devDependencies)
8. npm install cssnano --save-dev (devDependencies)
9. npm install gulp-rename --save-dev (devDependencies)

After installing with the --save-dev mark will include it in the package.json underneath the devDependencies. Let’s start to create a new file, name it gulpfile.js which writes all the code to automate tasks.

function defaultTask(cb) {
    console.log ('hello word')
    cb();
  }

 exports.default = defaultTask

Let’s try it on command prompt and type:

gulp

Hit the enter and you will see something like below.

[13:50:33] Using gulpfile E:\2021\gulp-post-cssnano\gulpfile.js
[13:50:33] Starting 'default'...
hello word
[13:50:33] Finished 'default' after 4.64 ms

Congratulations. You’ve just written your first Gulp task.

The default task was run.

Start with CSSNANO

Before diving into a purposeful task for CSS minify through ‘CSSNANO’. When I am using gulp-cssnano facing the issue px into pt convert in gulp build time.

So we are installing:

1. Postcss, Gulp postcss
2. Autoprefixer
3. CSSNANO
4. Gulp Rename
5. Gulp Sass

Folder Setup

1. src — source files, pre-processed, un-minified.
2. dist — production files, processed, minified.

Let’s get started with the gulpfile.js task CSS minify from SCSS files.

const { src, dest } = require("gulp");
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const cssnano = require('cssnano');
const autoprefixer = require('autoprefixer');
const rename = require('gulp-rename');


// SCSS to CSS minify

function cssminify(callback) {
    return src('./src/scss/*.scss')
        .pipe(sass().on("error", sass.logError))
        .pipe(dest('./dist/css'))
        .pipe(postcss([ autoprefixer(), cssnano() ]))
        .pipe(rename({
            extname: '.min.css'
          }))
        .pipe(dest('./dist/css'));
    callback();
}
exports.cssminify = cssminify

Run the task “cssminify”

abcd@abcd-PC MINGW64 /e/2021/gulp-post-cssnano
$ gulp cssminify
[14:19:33] Using gulpfile E:\2021\gulp-post-cssnano\gulpfile.js
[14:19:33] Starting 'cssminify'...
[14:19:37] Finished 'cssminify' after 4.09 s

There’s so much more to learn about Gulp, this was just for CSS minify. Hope you guys had as much fun reading this article as I had writing it. Feel free to share if you believe it will be of help to someone.

We used CSSNANO in our product Geeks Bootstrap Theme,
Geeks - beautiful designed UI Components based on Bootstrap Framework. It has marketing pages, course pages, & an admin dashboard.

Thanks for reading.