Images are everywhere across the internet. You would be hard pressed to find a single page or application that doesn't contain at least one image in some form or another. Images are great as they help tell stories and emphasize critical parts of our lives.
But if you're like me in any regard at all you know that having a large image can seriously impact the performance of your site/app. So today, I'm going to teach you how to use Gulp and an npm
package called gulp-imagemin
to reduce the size of your images on the fly.
If you don't know what all of these words mean, fear not! I have some relevant and important links/descriptions below to help bring you up to speed.
- Minification, or minifying as I like to call it, is the act or process of removing unnecessary parts of source code to reduce size.
-
Gulp
is a JavaScript build tool that allows you to automate parts of your workflow to streamline your process. It takes care of some not so interesting, but important, aspects of your workflow (like reducing image size) so that you can focus on the building. You can find Gulp here. - To make use of
npm
we'll need to installNode.js
which is, in a nutshell, the framework that allows developers to use JavaScript code in a server (back end) environment. You can find Node here. -
npm
(Node Package Manager) is and does what its name implies. It is a package manager for JavaScript and "the world's largest software registry". Just think ofnpm
as a giant storage area for awesome packages/utilities to help developers. You can find npm here. -
gulp-imagemin
is one of those awesome packages I mentioned earlier. Using this package we'll be able to automatically reduce the size of our images every time a save occurs. You can find gulp-imagemin here.
Alright, now that explanations are out of the way let's get to the fun parts :D
Project File Structure
Start by opening up your text editor of choice and creating a directory for your project or if you have an existing directory navigate to that directory in your terminal and skip down to the Installing Node & npm Section.
If you're using VS Code you can find the built in terminal by hitting ctrl + ` (tilde)
Here's how my project structure looks in my terminal:
And here's how my project file structure looks in the explorer inside VS Code:
As you can see I have a separate directory for my base files and the minified files. Once you have your project directory established it's time to start installing everything we'll need.
Installing Node & npm
Alright, now that our directory is up and running let's start installing our dependencies. If you already have Node & npm
installed, feel free to skip down to the Installing Gulp & gulp-imagemin Section.
- First, enter
node --v
within your terminal to check and see if you have the Node installed. If you do, you'll get something back likev8.9.3
- If you get nothing back or an error, simply download and install Node from here. It could take a few minutes so be patient.
- Once
Node.js
is installed, you'll havenpm
installed as well because it comes bundled withNode
. You can check the version ofnpm
by typingnpm -v
in your terminal. You should get something like6.4.1
back. - Next we need to create a
package.json
file for our project. We do this by using the commandnpm init
(find out more aboutpackage.json
here). You'll be asked a series of questions but if you don't want to answer them you don't have to, just hit enter until you seeIs this OK? (yes)
hitEnter
one last time and you'll be finished with this section.
You'll notice that this file was created in a different directory than the one I started with. This is so I can provide an example as I have previously installed all of this in my current project directory.
Installing Gulp & gulp-imagemin
Once Node & npm
have been installed, we can now install Gulp & gulp-imagemin
by following these steps:
- First, type
npm install --save-dev gulp
in your terminal. If you want to know what the--save-dev
flag does, check out this Stack Overflow post. - Again, be patient as installing Gulp might take a minute but you'll eventually end up with something like this:
gulp@4.0.0 added 318 packages from 218 contributors and audited 6376 packages in 49.362s found 0 vulnerabilities
- You can check your Gulp version by typing
gulp -v
in your terminal and you'll get something similar to this:[13:06:56] CLI version 2.0.1 [13:06:56] Local version 4.0.0
- Now let's install
gulp-imagemin
by typingnpm install --save-dev gulp-imagemin
and again you'll get something like this back:gulp-imagemin@5.0.3 added 232 packages from 97 contributors and audited 10669 packages in 39.103s found 0 vulnerabilities
- And the final step for this section is to create our
gulpfile.js
It is very important that your file has this exact name and is in the outer most level of your project folder structure!
Writing the Code - Finally the Fun!
Ok, now that we've taken care of installing everything in the correct place let's open up our gulpfile.js
and write the actual code that will do all of the hard work.
- Start by requiring
gulp
-->const gulp = require('gulp');
We're basically taking advantage of Node's module system to use code that is located in different files - Now require
gulp-imagemin
-->const imagemin = require('gulp-imagemin');
Again we're taking advantage of the module system to use this code in our project - Now, we need to write the function that will do all of the image squashing:
function imgSquash() {
return gulp .src("./img/*")
.pipe(imagemin())
.pipe(gulp.dest("./minified/images"));
} - If you set your directory up following mine the code above will work. If your directory looks different you will need to change the
.src & .dest
lines to match where your files are located and where you want them piped to after they've been minified. -
Gulp
operates based off of tasks and we can give it plenty of those to keep it busy. Once we've defined the actual function to do the heavy lifting, we need to tellGulp
what to do with that function:gulp.task("imgSquash", imgSquash);
- Now, we want
Gulp
to watch our given directory for changes (new images) and when it detects those, we want it to automatically run ourimgSquash
function, minify our images, and pipe them to the destination we set. We achieve that by defining another task to watch the directory:gulp
.
task("watch", ()
=>
{
gulp.
watch("./img/*", imgSquash);
}); - The last step to writing the code is defining the last task to call our
imgSquash
andwatch
tasks in succession:gulp
.
task("default",gulp
.
series("imgSquash","watch"));
Here the word "default" refers to the wordgulp
in the terminal and thegulp.series
will ensure that theimgSquash
function runs and immediately after Gulp will watch the directory for changes.
Here is what our finished file should look like:
Save this file, open your terminal, and type gulp
and hit enter. You should see something like this:
As you can see, each time a new file was added to the base directory, our tasks kicked in because Gulp was watching and immediately ran our imgSquash
function to minify our images. When you're finished using Gulp you can hit ctrl + c
in your terminal to terminate the watch process.
Now you can start using your minified images on your website/app and enjoy that new found boost in performance!
Wrap Up
Gulp is a very powerful JavaScript build tool that can help automate some of the more tedious, but important, aspects of building your project. With less than an hour's worth of work you were able to get your images minified, thus reducing load time and increasing performance for your website/app. That's awesome and you should be proud of yourself!
This is just one of the many ways that build tools like Gulp can help you. There are many more ways it can help (minifying/concatenating CSS/JS files) and I hope you explore some of those awesome options.
If you enjoyed this article make sure to drop a comment and let me know what you're working on and how Gulp helps you focus on the building. Also, don't forget to sign up for the Newsletter while you're here. You can do that at the top right of this page.
As always, have an awesome day full of love, happiness, and coding!
Top comments (0)