How to use 'CSSNANO' in Gulp
Tags: gulp, javascript, webdev, css
Published: 2021-04-16 10:11:19

**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](https://www.npmjs.com/package/gulp-postcss)
2. [Autoprefixer](https://www.npmjs.com/package/autoprefixer)
3. [CSSNANO](https://www.npmjs.com/package/cssnano)
4. [Gulp Rename](https://www.npmjs.com/package/gulp-rename)
5. [Gulp Sass](https://www.npmjs.com/package/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
```


![CSS minify with CSSNANO](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nbeh1fn5gflt0xg7006l.png)


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**](https://themes.getbootstrap.com/product/geeks-academy-admin-template/),
Geeks - beautiful designed UI Components based on Bootstrap Framework. It has marketing pages, course pages, & an admin dashboard.
 
Thanks for reading.