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.
- node --version
- npm install --global gulp-cli
- npm init (for package.json)
- npm install gulp --save-dev (devDependencies)
- npm install gulp-sass --save-dev (devDependencies)
- npm install autoprefixer --save-dev (devDependencies)
- npm install postcss gulp-postcss --save-dev (devDependencies)
- npm install cssnano --save-dev (devDependencies)
- 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:
Folder Setup
- src — source files, pre-processed, un-minified.
- 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.
Top comments (1)
thanks, removed gulp-cssnano and gulp-autoprefixer. Using npm packages directly is always better :)