Create Gulp task

Gulp is a tool that automates repetitive tasks like minification, compilation, unit testing, and linting. It uses a stream-based architecture, making it effective for file handling, and allows for task definition through a code-based configuration.

Tasks in Gulp are defined as functions that perform specific actions on the input files, such as processing, transforming, or bundling them. Chaining tasks together allows to create complex build pipelines that help streamline workflow.

Task example

In this example, a Gulp task named "process-html" is created to add CSS class names to list elements (<li>) based on the content of their nested <strong> elements.

The task utilizes the gulp-cheerio package to manipulate the HTML structure and the gulp-htmlmin package to minify the output. Below is how to make this task automates the process of adding class names to elements.

Install Node.js and NPM

Before starting, ensure that Node.js and NPM (Node Package Manager) are installed on the computer. Visit the Node.js website to download the appropriate installer for the operating system.

Once installed, verify the installation by opening a terminal or command prompt and running the following commands:

node -v
npm -v

Both commands should return version numbers.

Create a new directory for the project

Choose location on the computer and create a new directory for the Gulp task project. Name the directory accordingly, for example, gulp-task-project.

Open the terminal or command prompt, navigate to the newly created directory, and run the following command:

npm init -y

This command generates a package.json file with default settings in the project directory.

Install Gulp and required packages

Install Gulp and the necessary packages by running the following command:

npm install gulp gulp-cheerio gulp-htmlmin --save-dev

This command installs Gulp, along with the gulp-cheerio and gulp-htmlmin packages, as development dependencies.

Create the Gulp configuration file

In the project directory, create a new file called gulpfile.js. This file will contain the Gulp task configurations.

Define the Gulp task

Open the gulpfile.js file and insert the Gulp task code:

// Import the required 'gulp' package
const gulp = require('gulp');
// Import the required 'gulp-cheerio' package
const cheerio = require('gulp-cheerio');
// Import the required 'gulp-htmlmin' package
const htmlmin = require('gulp-htmlmin');

// Define a new Gulp task named 'process-html'
gulp.task('process-html', function () {
  // Specify the source files (HTML files in the 'src' directory)
  return gulp.src('src/*.html')
    // Use the 'gulp-cheerio' plugin to process the HTML files
    .pipe(cheerio({
      // Define a function to run on each HTML file
      run: function ($, file) {
        // Find 'li' elements containing a 'strong' element
        $('li:has(strong)').each(function () {
          // Get the text content of the 'strong' element, trim it, and convert it to lowercase
          const strongContent = $(this).find('strong').text().trim().toLowerCase();
          // Remove the colon from the 'strongContent' to create the className
          const className = strongContent.replace(':', '');

          // Add the generated className to the 'li' element
          $(this).addClass(className);
        });
      },
      // Configure the parser options for Cheerio
      parserOptions: {
        xmlMode: true
      }
    }))
    // Use the 'gulp-htmlmin' plugin to minify the HTML files
    .pipe(htmlmin({ collapseWhitespace: true }))
    // Specify the destination folder for the processed HTML files ('dist' directory)
    .pipe(gulp.dest('dist'));
});

// Define the 'default' Gulp task, which runs the 'process-html' task
gulp.task('default', gulp.series('process-html'));

Create the source directory and add an HTML file

Inside the project directory, create a new folder called src.

This folder will store the source HTML files. Create an example HTML file (e.g., example.html) inside the src folder with the given input HTML content.

Run the Gulp task

To execute the Gulp task, open the terminal or command prompt, ensure that the current working directory is the project directory, and then run the following command:

gulp

This command processes the HTML files in the src folder, adds the appropriate className to the li elements based on the strong content, minifies the HTML, and outputs the result to a new folder named dist.

Verify the output

Check the dist folder for the processed HTML file(s). The content should be as expected, with the className added to the li elements based on the strong content. The HTML should also be minified.