These days, using build tools is an essential part of your web development workflow.

Along with webpack, gulp is one of the most popular build tools these days.

But there is a definite learning curve to learning fiction. One of the biggest hurdles seems to be figuring out the hundreds of different parts that go into it.

And on top of that, you have to do everything on the command line, which can be incredibly intimidating if you haven’t worked with it much.

This tutorial will walk you through the basics of npm (Node Package Manager) and setting up Gulp for your front-end projects. Once you do, you’ll feel more confident setting up your workflow and using the command line!

Gulp can do a lot more complex tasks than I mentioned above. However, this tutorial will only focus on the basics of Gulp and how it works.

In order to have Gulp up and running on your computer, you need to have Node.js installed in your local environment.

Node.js is self-described as the “JavaScript Runtime”, which is considered the back-end of JavaScript. Gulp runs using node, so you need to install node before starting.

You can download it from Node.js website. When you install node, it also installs npm on your computer.

npm (node ​​package manager)

NPM is a constantly updated collection of JavaScript plugins (called packages) written by developers around the world. Gulp is one of those plugins. You will also need something else, which we will consider later.

The beauty of npm is that it allows you to install packages directly on your command line. This is great, as you don’t need to visit the website manually, no need to download the file and execute the install.

node_modules folder
One thing to note: When you install an npm package, npm creates a folder called node_modules and stores all package files there.

If you’ve ever had a project with a node_modules folder and dared to see what’s in it, you’ve probably noticed that it has (and I mean mean) lots of nested folders and files.

Why does this happen?

Well, this is because npm packages depend on other npm packages to run their specific tasks. These other packages are known as dependencies.

If you’re writing a plugin, it makes sense to take advantage of the functionality of existing packages. No one wants to invent the wheel every time.

So when you install a plugin in your node_modules folder, that plugin will install additional packages that it needs in its node_modules folder.

And so on and so forth until you have nested folders from Wazoo.

At this point you don’t need to worry too much about messing around in the node_modules folder – just wanted to briefly explain what’s going on in that crazy folder.

Leave a Reply

Your email address will not be published. Required fields are marked *