Automate your WordPress plugin with Gulp

Developing WordPress plugins can be tedious, especially when it comes to managing CSS, JavaScript and other resources. Fortunately, there are tools like Gulp that can simplify this process by automating the compilation of your code.

Why automate compilation?

Automating the build of your WordPress plugin has many benefits that go far beyond simply saving time. Here are just a few reasons why this practice is essential for any serious WordPress plugin developer:

Time-saving and efficient

Automating compilation saves precious time. Rather than manually compiling each file with every modification, an automatic compilation tool like Gulp can handle this task instantly in the background. This allows you to concentrate on writing quality code and new features, rather than wasting time on repetitive tasks.

Consistency and reduced human error

Leaving compilation to an automatic tool reduces the risk of human error. When you compile manually, it’s easy to forget a step or make a typo that could introduce bugs that are hard to detect. Gulp, or any other automation tool, always follows the same compilation steps, guaranteeing perfect consistency every time.

Performance optimization

Build tools like Gulp can include automatic optimization processes, such as code minification, image optimization, and concatenation of JavaScript and CSS files. These optimizations can significantly improve your plugin’s performance, reducing loading times and enhancing the user experience.

Simplified dependency management

WordPress plugin projects can often include numerous dependencies, whether on JavaScript libraries, CSS frameworks, or other resources. Automating compilation makes it easy to manage these dependencies, ensuring that they are always up to date and correctly integrated into your project.

Continuous integration and automated deployment

Automating compilation is the first step towards continuous integration (CI) and continuous deployment (CD). These practices allow you to automatically test your code with each modification and deploy new versions of your plugin securely and reliably. By integrating tools like Gulp into a CI/CD pipeline, you can guarantee that every version of your plugin is compiled, tested and ready for production without manual intervention.

Collaboration made easy

In a development team, automated compilation ensures that all team members work with the same environment and tools. This reduces the discrepancies and conflicts that can arise when different people compile code in slightly different ways. With an automated process, everyone is on the same wavelength.

By automating the compilation of your WordPress plugin with tools like Gulp, you’re not only taking a step towards greater productivity, you’re also laying the foundations for more professional and structured development. This practice will enable you to maintain clean, efficient and consistent code, while reducing errors and facilitating collaboration within your team.

What is Gulp?

Gulp is an open-source JavaScript build tool, widely used by developers to automate and improve web development workflows. It is particularly appreciated for its simplicity and efficiency in performing repetitive and time-consuming tasks. Here are some key aspects of Gulp:

Automation of repetitive tasks

Gulp automates a wide range of common development tasks. These tasks include, but are not limited to :

Compiling CSS and JavaScript files: Convert Sass or LESS files to CSS, or ES6 files to cross-browser JavaScript.
Minification: Reduce the size of CSS and JavaScript files by removing spaces, comments and other non-essential elements.
Concatenation: Combine multiple CSS or JavaScript files into a single file, reducing the number of HTTP requests required and improving page load times.
Image optimization: Compress images to reduce size without compromising quality.
Live browser reload: Automatically refresh the browser whenever a file is modified, which is extremely useful for real-time development.

Streams

Gulp uses a concept called “streams” to manage data efficiently. A stream is a flow of data that goes through a series of transformations before reaching its final destination. This allows files to be processed asynchronously and quickly, without having to write and rewrite to the hard disk at each stage. Here’s how it generally works:

Source: Gulp reads source files (e.g. CSS or JavaScript files) from a specified location.
Transformations: Files pass through a series of Gulp plugins to be transformed (e.g., minification, concatenation, etc.).
Destination: Transformed files are written to a destination directory.

This workflow is not only fast, but also easy to understand and maintain.

Plugin-rich ecosystem

Gulp has a vast ecosystem of community-created plugins that make it easy to add extra functionality to your automated tasks. Whether you need CSS preprocessors, linters, unit testers or other tools, there’s probably a Gulp plugin for the job. Some examples of popular plugins include :

gulp-sass: Compiles Sass files in CSS.
gulp-uglify: Minifies JavaScript files.
gulp-imagemin: Optimizes images.
browser-sync: For live browser reloading.

Simple, declarative configuration

Setting up Gulp is relatively straightforward, and is done using a JavaScript file called gulpfile.js. In this file, you define tasks using easy-to-read declarative syntax. For example, a Sass compilation task might look like this:

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const cleanCSS = require('gulp-clean-css');

gulp.task('styles', function() {
    return gulp.src('src/scss/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(cleanCSS())
        .pipe(gulp.dest('dist/css'));
});

gulp.task('default', gulp.series('styles'));

This code reads all Sass files in the src/scss directory, compiles them into CSS, minifies them, then saves them in the dist/css directory.

Easy integration with other tools

Gulp integrates easily with other tools and services used in web development. For example, you can use it with version control systems like Git, deployment services like Jenkins, or local development environments like Docker. This flexibility makes Gulp a powerful and adaptable tool for a variety of development needs.

How to use Gulp for your WordPress plugin

Installing Gulp: First, you need to install Gulp in your WordPress project using npm (Node Package Manager).
From a terminal, enter the command: npm install gulp gulp-clean gulp-clean-css gulp-uglify gulp-concat gulp-sourcemaps gulp-rename --save-dev
Configuring Gulp: Create a gulpfile.js file at the root of your project and configure the compilation tasks according to your needs. You can define tasks for compiling CSS, JavaScript files, minification, etc.
Running Tasks: Once you have configured your tasks in gulpfile.js, simply run the command gulp in your terminal to start the compilation process with the command npm run build
Integrating with Your Workflow: Integrate Gulp into your WordPress development workflow by running it automatically with every file change. You can use tools like gulp-watch to monitor changes and re-run compilation tasks automatically.

Example of a gulpfile.js file

const gulp = require('gulp');
const clean = require('gulp-clean');
const cleanCSS = require('gulp-clean-css');
const uglify = require('gulp-uglify');
const fs = require('fs');

const packageJson = JSON.parse(fs.readFileSync('./package.json'));
const pluginname = packageJson.name;

const distFolder = `${pluginname}`;

// Nettoyer le dossier dist
function cleanDist() {
    return gulp.src(distFolder, { allowEmpty: true, read: false })
        .pipe(clean());
}

// Minifier CSS
function styles() {
    return gulp.src('assets/*.css')
        .pipe(cleanCSS())
        .pipe(gulp.dest(`${distFolder}/assets/`));
}

// Minifier JavaScript
function scripts() {
    return gulp.src('assets/*.js')
        .pipe(uglify())
        .pipe(gulp.dest(`${distFolder}/assets/`));
}

// Copier les fichiers PHP et autres
function copy() {
    return gulp.src([
        '**/*',
        '!src/**',
        '!node_modules/**',
        '!assets/*.css',
        '!assets/*.js',
        '!gulpfile.js',
        '!package*.json',
        '!languages/**/*',
    ])
        .pipe(gulp.dest(distFolder))
}

function copyLanguageFiles() {
    return gulp.src('languages/**/*.+(mo|json)')
        .pipe(gulp.dest(`${distFolder}/languages`));
}

// Tâche de build
const build = gulp.series(cleanDist, gulp.parallel(styles, scripts, copy, copyLanguageFiles));

exports.clean = cleanDist;
exports.styles = styles;
exports.scripts = scripts;
exports.copy = copy;
exports.build = build;
exports.default = build;

Explanations

Importing Gulp and other modules :

gulp: The main Gulp module.
gulp-clean: A Gulp plugin for deleting files and folders.
gulp-clean-css: A Gulp plugin for minifying CSS files.
gulp-uglify: A Gulp plugin for minifying JavaScript files.
fs: The Node.js module for working with the file system.

const gulp = require('gulp');
const clean = require('gulp-clean');
const cleanCSS = require('gulp-clean-css');
const uglify = require('gulp-uglify');
const fs = require('fs');

Read the package.json file to retrieve the plugin name:

The contents of the package.json file are read and converted into a JSON object using fs.readFileSync and JSON.parse.
The plugin name is extracted from the JSON object.

const packageJson = JSON.parse(fs.readFileSync('./package.json'));
const pluginname = packageJson.name;

Definition of the distribution folder (`distFolder`) :

The name of the distribution folder is defined using the name of the plugin retrieved previously.

const distFolder = `${pluginname}`;

Definition of Gulp tasks :

Several functions are defined to perform specific tasks.
Each function uses the corresponding Gulp plugins to perform operations such as deleting files, minifying CSS and JavaScript, and copying files.
File paths are specified for each task.

function cleanDist() { /*…*/ }
function styles() { /*…*/ }
function scripts() { /*…*/ }
function copy() { /*…*/ }
function copyLanguageFiles() { /*…*/ }

Build task :

A build task is defined using gulp.series and gulp.parallel.
It calls in sequence the cleanDist function to clean up the distribution folder, then in parallel functions to minify CSS and JavaScript, copy files, and copy language files.

const build = gulp.series(cleanDist, gulp.parallel(styles, scripts, copy, copyLanguageFiles));

Exporting Gulp tasks :

Individual tasks and the build task are exported for use in other files.
The build task is defined as the default task to be executed when Gulp is called without arguments.

exports.clean = cleanDist;
exports.styles = styles;
exports.scripts = scripts;
exports.copy = copy;
exports.build = build;
exports.default = build;

This gulpfile.js will automate the compilation of your WordPress plugin, performing tasks such as CSS and JavaScript minification, file copying and so on. You can run it simply by executing the gulp command in your terminal.

Automate the compilation of your WordPress plugin with Gulp