![]() ![]() First, enter node -v within your terminal to check and see if you have the Node installed.If you already have Node & npm installed, feel free to skip down to the Installing Gulp & gulp-imagemin Section. Installing Node & npmĪlright, now that our directory is up and running let’s start installing our dependencies. Once you have your project directory established it’s time to start installing everything we’ll need. Here’s how my project structure looks in my terminal:Īnd here’s how my project file structure looks in the explorer inside VS Code:Īs you can see I have a separate directory for my base files and the minified files. If you’re using VS Code you can find the built in terminal by hitting ctrl + ` (tilde). 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. You can find gulp-imagemin here.Īlright, now that explanations are out of the way let’s get to the fun parts :D Project File Structure Using this package we'll be able to automatically reduce the size of our images every time a save occurs. gulp-imagemin is one of those awesome packages I mentioned earlier.Just think of npm as a giant storage area for awesome packages/utilities to help developers. It is a package manager for JavaScript and "the world's largest software registry". npm (Node Package Manager) is and does what its name implies.To make use of npm we'll need to install Node.js which is, in a nutshell, the framework that allows developers to use JavaScript code in a server (back end) environment.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. ![]() Gulp is a JavaScript build tool that allows you to automate parts of your workflow to streamline your process.Minification, or minifying as I like to call it, is the act or process of removing unnecessary parts of source code to reduce size.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. 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. Images are great way to help tell stories and emphasize critical parts of our lives.īut if you’re like me you know that having a large image can seriously impact the performance of your site/app. 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 everywhere across the internet.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |