Reading list Switch to dark mode

    Minify Js/Css in WooCommerce Plugin development using Gulp

    Updated 31 May 2023

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

    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.

    Searching for an experienced
    WordPress Company ?
    Read More

    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(gulp.dest(themeName + 'assets/js/min')));
    function minifyCss(){
        return gulp.src(themeName + 'assets/css/*.css')
        .pipe(cleanCSS({compatibility: 'ie8'}))
            basename :'style'
        .pipe(gulp.dest(themeName + 'assets/css/min'));
    function complieCss(){
        return (gulp.src(themeName + 'assets/less/*.less')
        .pipe(gulp.dest(themeName + 'assets/css/')));
    function watchFiles(){ + 'assets/js/*.js', minifyJs); + 'assets/css/*.css', complieCss); + '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.


    To minify js, less, or css files, use the gulp command rather than any other tools; your file will be automatically minified when you save it.

    You can see the directories structures below.

    Gulp Directory Structure

    Hope you like this article, Will meet you again with a new topic :). Also, visit our quality woocommerce extensions

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*

    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content