Install the command-line utility for gulp
First, you need to open a new terminal window and install the command-line utility for gulp. If you don’t have Node.js and npm installed, you’ll need to get those first; you can learn how to do that in the get npm guide. Once you’ve done that, you can install the command-line utility.
First, a quick note as explained in the Quick Start guide for gulp:
“If you’ve previously installed gulp globally, run
npm rm --global gulpbefore following these instructions. For more information, read this Sip.”
Do this if applicable.
Then run the following command in your terminal window to install the command-line utility. This will make the package available globally, not just for your current project:
npm install --global gulp-cli
Next, you’ll need to create a
package.json file if you haven’t already.
If you already have a
package.json file configured, you can skip this step.
Let’s pretend you’re working on a project saved in a folder called
my-project. Navigate to that folder in your terminal window.
Once there, you need to create a
package.json file. This is a file that sits in the root of your project (the top-level folder, i.e.
my-project in this case) and keeps track of information about your project, such as its name, version, author, code dependencies, etc.
You have two options here. You can either run the following command, which will guide you through naming the fields:
Or you can run this command, which will skip all the questions and just use the default values that npm provides:
npm init -y
Either way, you’ll be left with a shiny new file called
Install the required packages
To install the packages all together, run the following command:
npm install --save-dev gulp gulp-rename gulp-terser gulp-clean-css
This will install the packages as dev dependencies. This means they’re dependencies for your development environment, but not the production environment your users see.
Once you’ve done this, your
package.json file will be updated and a
package-lock.json file will also be created. Now you can actually go ahead and minify your files. Time to create a file called
Create your gulpfile
To use gulp, you need to create a file called
gulpfile.js and save it at the root of your project. Do that first. Then paste the following into that file:
Run the task
Run the following command in your console:
Your default task will run, and you should see some output similar to this:
And with that, you should see a new file called
styles.min.css in your
css directory, and a new file called
app.min.js in your
js directory. You can, of course, change the file and directory names to suit your project.
Add the new files to your project
Now all that’s left to do is add the new, minified files to your project! Just replace any references to
It is possible to have gulp look for multiple files inside a directory and mash them together into a single minified file, but for the sake of simplicity, I wanted to keep this article to a basic use case. I’ll write about this in a future article.
gulp command in the terminal after every change to your files will become very tiresome very quickly. To get around this, you can use gulp’s
You can even take this a step further by installing the browser-sync npm package. This package can automatically reload your site when you save your changes, meaning you wouldn’t need to refresh the page after every change.
I’ll write about gulp’s
.watch() method and the browser-sync package in a future article.