Minifying CSS Using Gulp - Step By Step

Easy step to minify your css in Visual Studio Code
1.Install Gulp and some plug-ins

npm install -g gulp
npm install gulp-autoprefixer --save-dev
npm install gulp-csso --save-dev
npm install gulp-sass --save-dev
npm install gulp-rename --save-dev
npm install gulp-minify-css --save-dev

2.Create a simple Gulp task
Open VS Code on the same folder from before (contains styles.scss/styles.less and tasks.json under the .vscode folder), and create gulpfile.js at the root. Place the following code in the gulpfile.js file:

"use strict";
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var csso = require('gulp-csso');
var sass = require('gulp-sass');
var rename = require('gulp-rename');
var minify = require('gulp-minify-css');
var rename = require('gulp-rename');

gulp.task('minifyBaseCSS', function () {
    gulp.src('theme/css/style.css')
        .pipe(minify({keepBreaks: false}))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('theme/css/'))
    ;
});

3.Run the task

gulp minifyBaseCSS

go to see the result in theme/css/style.min.css