Install and Use Gulp.js on AlmaLinux 8: Best Automation Tool

In this article, we want to teach you How To Install and Use Gulp.js on AlmaLinux 8. Gulp is yet another tool from the open-source community to automate repetitive tasks in web development. While tools like bower, npm (Node Package Manager) help us to download and configure re-usable packages in our application, Gulp helps us to automate many of the time-consuming repetitive client-side tasks. Learning how to Install and Use Gulp.js on AlmaLinux 8 can significantly boost your web development workflow.

It is built upon Node.js and it already has a strong community that builds various plugins for performing various tasks. Now follow the steps below on the Orcacore website to Install and Use Gulp.js on AlmaLinux 8.

Before you start to Install and Use Gulp.js on AlmaLinux 8, you need to log in to your server as a non-root user with sudo privileges. To do this, you can follow our article the Initial Server Setup with AlmaLinux 8 .

Now you can follow the steps below to set up Gulp.js on your server.

Install Node.js on AlmaLinux 8

To Install and Use Gulp.js on AlmaLinux 8, you need to have Node.js installed on your server. First, update your local package index with the following command:

sudo dnf update -y

Then, use the curl command to download the Node.js source:

sudo curl -fsSL https://rpm.nodesource.com/setup_current.x | sudo bash -

Next, install Node.js on AlmaLinux 8 with the following command:

sudo dnf install nodejs

You can verify your Node.js installation by checking its version:

node -v

**Output**
v.16.8.0

When you installed Node.js, it automatically installed NPM as well. To verify the version and build, you can also use the following command:

npm -v

**Output**
7.21.0

Install Gulp.js on AlmaLinux 8

First, you need to install the Gulp CLI tool, which is used to work with and manage your Gulp.js application.

npm install -g gulp-cli

Then, create a directory for your Gulp application and switch to it with the following command:

sudo mkdir gulp-directory && sudo cd gulp-directory

Now you need to create a new application with the npm command:

sudo npm init

Provide some information or Press Enter to create a package.json file.

**Output**
package name: (gulp-project)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /root/gulp-project/package.json:
{
"name": "gulp-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
     "test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes) yes

When it is completed, you need to install the Gulp module with the following command:

sudo npm install --save-dev gulp

Verify your Gulp.js installation on AlmaLinux 8 by checking its version:

gulp --version

**Output**
CLI version: 2.3.0
Local version: 4.0.2

How To Use Gulp.js

At this point, we want to show you the basic usage of Gulp.js by creating a sample application.

First, switch to your Gulp directory:

cd gulp-directory

Then, create a gulpfile.js with your favorite text editor, here we use vi:

sudo vi gulpfile.js

Add the following content to your file:

var gulp = require('gulp');
gulp.task('hello', function(done) {
console.log('Hello World!!!');
done();
});

When you are done, save and close the file.

Next, run the Gulp task with the command below:

gulp hello

In your output you will see:

Conclusion

Gulp.js is a great tool that makes it easy to automate tasks like combining files, making code smaller, and refreshing your browser. This process helps save time and keeps your projects organized. At this point, you have learned to Install and Use Gulp.js on AlmaLinux 8.

Hope you enjoy it. Also, you may like to read the following articles:

Install Nvidia Drivers on AlmaLinux 8

Install Dotnet Core on AlmaLinux 9

Check For Security Updates on AlmaLinux 9

Install Scponly on AlmaLinux 9

Alternative Solutions for Web Development Automation on AlmaLinux 8

While Gulp.js is a powerful task runner, there are other tools and approaches you can use to achieve similar automation in your web development workflow on AlmaLinux 8. Here are two alternative solutions:

1. npm Scripts

npm scripts, defined within the package.json file, offer a lightweight alternative to dedicated task runners like Gulp. They leverage the power of the Node Package Manager (npm) to execute commands and scripts, allowing you to automate common tasks directly from your project’s configuration. This approach eliminates the need for a separate Gulpfile and simplifies the project structure. For simple to moderately complex automation needs, npm scripts can be a very effective and streamlined solution.

Explanation:

npm scripts are defined within the scripts section of the package.json file. Each script is associated with a name, which serves as the command you use to execute the script. These scripts can execute any command-line instruction, including running other npm packages, executing shell commands, or calling Node.js scripts.

Example:

Instead of using Gulp to minify JavaScript files, you can use npm scripts along with a package like uglify-js. First, install uglify-js:

npm install uglify-js --save-dev

Then, modify your package.json file to include a script for minifying JavaScript:

{
  "name": "npm-scripts-example",
  "version": "1.0.0",
  "description": "Example using npm scripts for automation",
  "main": "index.js",
  "scripts": {
    "minify-js": "uglifyjs src/app.js -o dist/app.min.js"
  },
  "author": "Your Name",
  "license": "ISC",
  "devDependencies": {
    "uglify-js": "^3.14.1"
  }
}

In this example:

• "minify-js" is the name of the script.
• "uglifyjs src/app.js -o dist/app.min.js" is the command that will be executed when you run the script. It uses uglify-js to minify src/app.js and save the output to dist/app.min.js.

To run the script, use the following command:

npm run minify-js

This will execute the uglify-js command and minify your JavaScript file. You can chain multiple commands together within a single npm script using &&, for example: "build": "eslint . && webpack".

2. Webpack

Webpack is primarily known as a module bundler, but it can also be used as a task runner. It offers a powerful and flexible way to automate a wide range of tasks, including bundling JavaScript modules, transpiling code with Babel, minifying assets, and optimizing images. Webpack uses a configuration file (webpack.config.js) to define how assets should be processed and bundled.

Explanation:

Webpack’s core functionality is to take a set of modules (JavaScript, CSS, images, etc.) and their dependencies and generate static assets suitable for deployment. However, through the use of loaders and plugins, Webpack can be extended to perform virtually any build-related task. Loaders transform individual files, while plugins operate on the entire bundle or build process.

Example:

Let’s say you want to use Webpack to bundle your JavaScript files, transpile ES6 code with Babel, and minify the output. First, you’ll need to install the necessary packages:

npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env terser-webpack-plugin --save-dev

Then, create a webpack.config.js file with the following content:

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production', // or 'development'
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

In this example:

• entry: Specifies the entry point of your application.
• output: Defines where the bundled files should be placed.
• module.rules: Configures loaders for different file types. In this case, it uses babel-loader to transpile ES6 JavaScript.
• optimization: Configures optimization options, including minification using TerserPlugin.

To run Webpack, add a script to your package.json file:

{
  "scripts": {
    "build": "webpack"
  }
}

Then, run the build command:

npm run build

This will execute Webpack, which will bundle your JavaScript files, transpile them with Babel, and minify the output. Webpack’s configuration can be customized extensively to handle a wide variety of tasks, making it a powerful and versatile automation tool. Its hot module replacement (HMR) feature is also invaluable for development, allowing you to see changes in your browser without a full page reload.

Both npm scripts and Webpack offer viable alternatives to Gulp.js for automating web development tasks on AlmaLinux 8. The choice depends on the complexity of your project and your personal preferences. For simpler tasks, npm scripts provide a lightweight and convenient solution. For more complex projects with sophisticated bundling and transformation requirements, Webpack offers a more robust and flexible option. Understanding how to Install and Use Gulp.js on AlmaLinux 8 is still valuable, as it’s a widely used tool, but knowing these alternatives broadens your toolkit and allows you to choose the best tool for the job.