Minifying Images with Gulp & gulp-imagemin
Tags: javascript, gulp, npm, imagemin
Published: 2019-03-05 01:27:25

---
title: Minifying Images with Gulp & gulp-imagemin
published: true
description: A walk through on minifying images with Gulp
tags: JavaScript, Gulp, npm, imagemin
canonical_url: https://jonathansexton.me/blog/using-gulp-gulp-imagemin-to-minify-images/
---
<img src="https://cdn-images-1.medium.com/max/1000/1*IGn5E-1wp5mQ2DHoevVCFA.png" alt="an image of a pink cup with the word gulp on it">

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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 <code>npm</code> package called <code>gulp-imagemin</code> to reduce the size of your images on the fly.  </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> 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.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a href="https://en.wikipedia.org/wiki/Minification_(programming)">Minification</a>, or minifying as I like to call it, is the act or process of removing unnecessary parts of source code to reduce size.</li><li><code>Gulp</code> 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 <a href="https://gulpjs.com/">find Gulp here</a>.</li><li>To make use of <code>npm</code> we'll need to install <code>Node.js</code> which is, in a nutshell, the framework that allows developers to use JavaScript code in a server (back end) environment.  You can <a href="https://nodejs.org/en/download/">find Node here</a>.</li><li><code>npm</code> (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 of <code>npm</code> as a giant storage area for awesome packages/utilities to help developers.  You can <a href="https://www.npmjs.com/">find npm here</a>.</li><li><code>gulp-imagemin</code> 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 <a href="https://www.npmjs.com/package/gulp-imagemin">find gulp-imagemin here</a>.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Alright, now that explanations are out of the way let's get to the fun parts :D</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Project File Structure</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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 <strong>Installing Node &amp; npm Section</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> If you're using <a href="https://code.visualstudio.com/">VS Code</a> you can find the <a href="https://code.visualstudio.com/docs/editor/integrated-terminal">built in terminal</a> by hitting <code>ctrl + ` (tilde)</code></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here's how my project structure looks in my terminal: <br></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":620,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://jonathansexton.me/blog/wp-content/uploads/2019/01/gulpArticle-termnial-file-path.png" alt="" class="wp-image-620"/><figcaption>My project file structure within VS Code's terminal</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>And here's how my project file structure looks in the explorer inside VS Code:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":621,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://jonathansexton.me/blog/wp-content/uploads/2019/01/gulpArticle-explorer-file-path.png" alt="" class="wp-image-621"/><figcaption>My project file structure within VS Code's explorer pane</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Installing Node &amp; npm</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Alright, now that our directory is up and running let's start installing our dependencies. If you already have <code>Node &amp; npm</code> installed, feel free to skip down to the <strong>Installing Gulp &amp; gulp-imagemin Section</strong>. </p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>First, enter <code>node --v</code> within your terminal to check and see if you have the Node  installed.  If you do, you'll get something back like <code>v8.9.3</code> </li><li>If you get nothing back or an error, simply download and <a href="https://nodejs.org/en/download/">install Node from here</a>.  It could take a few minutes so be patient.</li><li>Once <code>Node.js</code> is installed, you'll have <code>npm</code> installed as well because it comes bundled with <code>Node</code>.  You can check the version of <code>npm</code> by typing <code>npm -v</code> in your terminal.  You should get something like <code>6.4.1</code>back.</li><li>Next we need to create a <code>package.json</code> file for our project.  We do this by using the command <code>npm init</code> (find out more about <code><a href="https://docs.nodejitsu.com/articles/getting-started/npm/what-is-the-file-package-json/">package.json</a></code><a href="https://docs.nodejitsu.com/articles/getting-started/npm/what-is-the-file-package-json/"> here</a>).  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 see <code>Is this OK? (yes)</code> hit <code>Enter</code> one last time and you'll be finished with this section.</li></ol>
<!-- /wp:list -->

<!-- wp:image {"id":624,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://jonathansexton.me/blog/wp-content/uploads/2019/01/gulpArticle-npm-init.png" alt="" class="wp-image-624"/><figcaption>You should see this after going through the steps of npm init in your terminal</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>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. </p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Installing Gulp &amp; gulp-imagemin</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Once <code>Node &amp; npm</code> have been installed, we can now install <code>Gulp &amp; gulp-imagemin</code> by following these steps:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>First, type <code>npm install --save-dev gulp</code> in your terminal.  If you want to know what the <code>--save-dev</code> flag does, check out this <a href="https://stackoverflow.com/questions/19223051/what-does-save-dev-mean-in-npm-install-grunt-save-dev">Stack Overflow post</a>.</li><li>Again, be patient as installing Gulp might take a minute but you'll eventually end up with something like this: <code> gulp@4.0.0 added 318 packages from 218 contributors and audited 6376 packages in 49.362s found 0 vulnerabilities </code></li><li>You can check your Gulp version by typing <code>gulp -v</code> in your terminal and you'll get something similar to this: <code>[13:06:56] CLI version 2.0.1 [13:06:56] Local version 4.0.0</code></li><li>Now let's install <code>gulp-imagemin</code> by typing <code>npm install --save-dev gulp-imagemin</code> and again you'll get something like this back: <code> gulp-imagemin@5.0.3 added 232 packages from 97 contributors and audited 10669 packages in 39.103s found 0 vulnerabilities </code></li><li>And the final step for this section is to create our <code>gulpfile.js</code> <strong><em>It is very important that your file has this exact name and is in the outer most level of your project folder structure!</em></strong></li></ol>
<!-- /wp:list -->

<!-- wp:heading -->
<h2>Writing the Code - Finally the Fun!</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Ok, now that we've taken care of installing everything in the correct place let's open up our <code>gulpfile.js</code> and write the actual code that will do all of the hard work. </p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>Start by requiring <code>gulp</code> --&gt; <code>const gulp = require('gulp');</code>We're basically taking advantage of Node's module system to use code that is located in different files</li><li>Now require <code>gulp-imagemin</code> --&gt; <code>const imagemin = require('gulp-imagemin');</code> Again we're taking advantage of the module system to use this code in our project</li><li>Now, we need to write the function that will do all of the image squashing: <br><code>function imgSquash() {<br>  &nbsp;&nbsp;<strong>return</strong> gulp&nbsp;&nbsp;<strong>.</strong>src("./img/*")<br>    &nbsp;&nbsp;<strong>.</strong>pipe(imagemin()) <br>   &nbsp;&nbsp;<strong>.</strong>pipe(gulp<strong>.</strong>dest("./minified/images"));<br>}</code></li><li>If you set your directory up following mine the code above will work.  If your directory looks different you will need to change the <code>.src &amp; .dest</code> lines to match where your files are located and where you want them piped to after they've been minified. </li><li><code>Gulp</code> 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 tell <code>Gulp</code> what to do with that function: <code>gulp.task("imgSquash", imgSquash);</code> </li><li>Now, we want <code>Gulp</code> to watch our given directory for changes (new images) and when it detects those, we want it to automatically run our <code>imgSquash</code> function, minify our images, and pipe them to the destination we set.  We achieve that by defining another task to watch the directory: <br><code>gulp</code><strong><code>.</code></strong><code>task("watch", () </code><strong><code>=&gt;</code></strong><code> { <br>&nbsp;&nbsp;gulp</code><strong><code>.</code></strong><code>watch("./img/*", imgSquash);<br>}); </code></li><li> The last step to writing the code is defining the last task to call our <code>imgSquash</code> and <code>watch</code> tasks in succession: <code> gulp</code><strong><code>.</code></strong><code>task("default",gulp</code><strong><code>.</code></strong><code>series("imgSquash","watch"));</code> Here the word "default" refers to the word <code>gulp</code> in the terminal and the <code>gulp.series</code> will ensure that the <code>imgSquash</code> function runs and immediately after Gulp will watch the directory for changes.</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p> Here is what our finished file should look like: </p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":651,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://jonathansexton.me/blog/wp-content/uploads/2019/01/gulpArticle-finished-gulpFile-1.png" alt="" class="wp-image-651"/><figcaption>This is what your finished gulpfile.js should look like</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Save this file, open your terminal, and type <code>gulp</code> and hit enter.  You should see something like this:  </p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":653,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://jonathansexton.me/blog/wp-content/uploads/2019/01/gulpArticle-terminal-gulpSquash.png" alt="" class="wp-image-653"/><figcaption>The terminal view after running our Gulp tasks</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>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 <code>imgSquash</code> function to minify our images.  When you're finished using Gulp you can hit <code>ctrl + c</code> in your terminal to terminate the watch process.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now you can start using your minified images on your website/app and enjoy that new found boost in performance!</p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2>Wrap Up</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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 <strong>Newsletter</strong> while you're here.  You can do that at the top right of this page.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>As always, have an awesome day full of love, happiness, and coding!<br></p>
<!-- /wp:paragraph -->