DEV Community

Cover image for How to use 'CSSNANO' in Gulp
anitaparmar26
anitaparmar26

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

Let’s try it on command prompt and type:

gulp
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

CSS minify with CSSNANO

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.

Top comments (1)

Collapse
 
kotylo profile image
kotylo

thanks, removed gulp-cssnano and gulp-autoprefixer. Using npm packages directly is always better :)