What is Gulp?
In order to work with Gulp, you will first need to have Node and NPM installed. For each new project, you will need to create a package.json file that contains all of the project’s dependencies. To create a new file, run:
This will activate an installation wizard. You can learn more about the different options here. Next, you will need to install Gulp globally, if you haven’t already. You can do this like so:
npm install --global gulp
In your individual project, you will want to save gulp as a dependency, like so:
npm install --save-dev gulp
If you have already installed Gulp globally, you only need to install it locally as a dependency.
If you’re looking for more robust examples, a search for “example gulpfile” will turn up plenty of results.
Each of the tasks in your gulpfile are run by a variety of plugins. There are a lot of plugins available, so each project will use the ones that best suit its needs. For each new plugin you want to add, you will need to install it using NPM in your project, and save it as a dependency. Here’s an example using gulp-sass:
npm install --save-dev gulp-sass
When you save a plugin as a dependency, it will be added to your package.json file. This makes it easier for your team members to keep the same setup as you when they download the project.
The example gulpfile above shows how the plugin is called by Gulp. You will need to require each plugin individually, or use another plugin to do it for you.
Once everything is setup, running gulp is as easy as using the following command in your project’s folder:
The first time you run Gulp, it will run through all of the tasks that you’ve added to the default task. You can also call specific tasks instead if you don’t need to run everything like so:
Depending on how you’ve setup your gulpfile, you might have a task to watch for file changes and run a task based on any changes. Watch tasks will run so long as gulp is running, and are useful for compiling Sass into CSS. This can be seen in the example gulpfile above.
Working in Git
When Gulp and all of its plugins are installed, a new directory called
/node_modules/ will be created. This directory can grow quite large, especially on Windows machines, so you don’t want to commit it to your git repo. Be sure to include the entire
/node_modules/ directory in your project’s
Working with an Existing Project
While the above instructions are great if you’re starting a new project to work with Gulp, there is a faster way to handle existing projects. If a project already has a
package.json file and a
gulpfile.js with everything setup, navigate to the project folder in command line and run:
If all of the dependencies were set up correctly in
package.json, this should download and install all of them, including Gulp. This process will take a while, since it needs to rebuild the
/node_modules/ directory. Once it’s finished, you should run Gulp to ensure that everything was installed and is running properly. If you run into any errors, you may need to update your versions of Node and NPM.