Gulp imagemin

Updated February 17, 2023

Introduction to Gulp imagemin

We know that images are everywhere used across the internet; nowadays, we cannot search out any single web page or application that contains a single image because the image is a straightforward way to say something about the concept, or we can tell that story. But if we have a large image that directly impacts the application’s performance. So gulp provides the package to the developer called gulp-imagemin that helps us reduce the image size and increase the application’s or web page’s performance. So by using gulp imagemin, we can automate the developer’s tasks and reduce the developer’s efforts.

What is Gulp imagemin?

Images can be found all over the internet. You would be unable to observe a solitary page or application that doesn’t contain no less than one picture in some structure or another. Images are an extraordinary method for aiding recount stories and underscoring essential pieces of our lives.

However, assuming we have a vast picture can genuinely affect the presentation of your site/application. So today, we will see how to utilize Gulp and an npm bundle called gulp imagemin to lessen the size of your images on the fly. Minification or we can say that minifying, is the demonstration or cycle of eliminating superfluous pieces of source code to decrease size. Gulp is a JavaScript construct device that permits you to mechanize portions of your work process to smooth out your cycle. It deals with some not intriguing yet significant parts of your work process (like decreasing picture size), so you can zero in on the structure. You can track down Gulp here.

To utilize npm, we’ll have to introduce Node.js, which is, more or less, the structure that permits designers to use JavaScript code in a server (back end) climate. You can track down Node here. npm (Node Package Manager) is and does what its name infers. It is a bundle supervisor for JavaScript and “the world’s biggest programming library.” Consider npm a goliath stockpiling region for magnificent bundles/utilities to help designers. You can find npm here. Gulp imagemin is one of those fantastic bundles we previously referenced before. Utilizing this bundle, we’ll have the option to naturally lessen the size of our images each time a save happens. You can find gulp imagemin here.

Gulp imagemin Configuration

Let’s see how we can do the configuration of gulp imagemin as follows:

But first, we need to confirm the installation of Node js with the help of the below command.

Code:

node -v

Explanation:

• Using the above command, we can see the installed version of Node.js; after execution, we can see the result in the following command.

Output:

In the command line prompt, enter the accompanying order to show the variant of npm (Node.js bundle chief), which is utilized to introduce modules. It will show the introduced Node.js form with the help of the below command.

Code:

npm -v

Explanation:

• After executing the above command, we can see the currently installed version of npm on our machine, as shown in the screenshot below.

Output:

We successfully installed Node.js; now, we need to install the gulp with the help of the below command.

Code:

npm install gulp -g

Explanation:

• In the above command, we use g for a flag that ensures gulp is globally available for all projects.
• After entering the above command, we get the following screen, as shown in the below screenshot.

Output:

To verify gulp, we need to run the following command as follows.

Code:

gulp –v

Explanation:

• After executing the above command, we get the currently installed version of a gulp, as shown in the screenshot below.

Output:

Now we can install the plugins of imagemin as follows.

Code:

npm install gulp-imagemin --save-dev

Explanation:

• With the help of the above command, we can add the packages of imagemin in a gulp.
• After that, we need to create the gulp project, and inside the gulpfile.js, we need to declare all the dependencies as follows.

Code:

var gulp = require('gulp');
var gchange = require('gulp-changed');
var gimagemin = require('gulp-imagemin');

After the declaration of dependencies, the next task is to optimize the image from the web page or application by using the following code: we need to write the below code inside the configuration file.

Code:

gulp.task('imagevevent', function() {
var imgSource = 'Gulp/Demo/src/images/*.+(png|jpg|gif)',
imgDst = 'Gulp/Demo/build/images';
gulp.src(imgSource)
.pipe(changed(imgDst))
.pipe(imagevevent ())
.pipe(gulp.dest(imgDst));
});
gulp.task('default',[ imagevevent],function(){
});

Explanation:

• The imagemin assignment will acknowledge png, jpg, and gif images from src/ images /organizer and minify them before composing them into the objective.
• The change () guarantees that the new documents are breathed easily for minifying. The gulp changed module will deal with the latest records and thus use valuable time.

To execute the above code, we need to use the following command.

Code:

gulp

Explanation:

• After executing the above command, we can see the result in the screenshot below.

Output:

Gulp imagemin Plugin

Let’s see the imagemin plugin as follows.

Code:

[imagemin.gifsicle(), imagemin.mozjpeg(), imagemin.optipng(), imagemin.svgo()]

The type mentioned above is, by default, imagemin; we can add plugins per our requirements. A plugin is used to overwrite all default plugins; sometimes, we need to add some custom plugins; at that time, we can also require the default plugin, which means the combination of default and add-on plugins. The critical thing about plugins is that sometimes default plugins play a vital role during the implementation of imagemin, and external plugin support only for specific actions.

Function

• Gulp is a cross-stage, streaming assignment sprinter that allows engineers to mechanize numerous improvement errands.
• At an undeniable level, gulp configuration files as streams and lines the streams to various assignments.
• These errands are code-based and use modules.
• The undertakings change the records, building source files into creation records.

Conclusion

With the help of the above article, we saw about Gulp imagemin. From this article, we saw basic things about the Gulp imagemin, the integration of the Gulp imagemin, and how we use it in the Gulp imagemin.

Recommended Articles

This is a guide to Gulp imagemin. Here we discuss the introduction, gulp imagemin configuration, plugin, and function. You may also have a look at the following articles to learn more –

1. JavaScript onresize
2. JavaScript onload
3. JavaScript String to Boolean
4. Javascript String to Lowercase