Minify Js/Css in WooCommerce Plugin development using Gulp

Today we will learn how to convert js or less CSS into minified js or normal CSS or minified CSS while developing a Woocommerce plugin.

Why do we need to minify our Javascript or CSS file..?

Minification, also known as minimization, is the process of removing all unnecessary characters from source code without altering its functionality.

This includes the removal of whitespace, comments, and semicolons, along with the use of shorter variable names and functions. It is important to minify your CSS and minimize JavaScript files so they can load faster on your web pages.

Why do we need to use gulp..?

So gulp is a very powerful tool that allows you to minified your javascript or CSS file while developing.

There is no need to write your code first and then go to another website or tool and then convert them one by one, that is a very lengthy process.

So gulp is allowing here to convert your normal file into a minified file while writing the code. you just need to write the code and save it will automatically be converted.

Step to configure gulp in your project.

First of all, you must install the node and npm package manager. you can install it from here.

You can verify node and npm are installed successfully on your system by running this command.

node -v, and npm -v

You can install gulp by using below mentioned command.

npm install gulp --save-dev

After running this command you can see the node_modules folder and package.json and package-lock.json files will be created in your root folder.

Now you can install some other gulp package to achieve the task by running below mentioned command.

npm install gulp-less gulp-rename gulp-minify gulp-clean-css --save-dev

Also, you can check your package.json file all dependencies are added there.

Now create the gulpfile.js in your root folder.

var less = require('gulp-less');
var gulp = require('gulp');
var minify = require('gulp-minify');
var cleanCSS = require('gulp-clean-css');
var rename = require('gulp-rename');
var path = 'wp-content/plugins';
const themeName = path + '/webkul/';

function minifyJs(){
    return (gulp.src(themeName + 'assets/js/*.js')
    .pipe(minify())
    .pipe(gulp.dest(themeName + 'assets/js/min')));
}

function minifyCss(){
    return gulp.src(themeName + 'assets/css/*.css')
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(rename({
        basename :'style'
    }))
    .pipe(gulp.dest(themeName + 'assets/css/min'));
}

function complieCss(){
    return (gulp.src(themeName + 'assets/less/*.less')
    .pipe(less())
    .pipe(gulp.dest(themeName + 'assets/css/')));
}

function watchFiles(){
    gulp.watch(themeName + 'assets/js/*.js', minifyJs);
    gulp.watch(themeName + 'assets/css/*.css', complieCss);
    gulp.watch(themeName + 'assets/css/*.css', minifyCss);
}

var watch = gulp.parallel( watchFiles );
exports.minifyJs = minifyJs;
exports.watchFiles = watchFiles;
exports.minifyCss = minifyCss;
exports.complieCss = complieCss;

exports.default = watch;

You can manage the file path according to your requirement.

By using the command gulp, you can observe that gulp watchers have been launched.