What is Gulp?
Gulp is a task runner that is run in the command line to help automate your front-end development workflow. It features a number of plugins to help you with tasks such as compiling Sass, generating SVG spritesheets, concatenating JavaScript, and much more. There are lots of plugins available for Gulp, but the specific plugins you will use depends on the individual project needs.
Installing 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: npm init
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.
Example Gulpfile
Gulp runs off of a JavaScript file that tells it which plugins to use and which tasks to run. This is not something that is created automatically, so you will need to either create it yourself or copy an existing file. Here’s a quick example that watches for changes to Sass files and compiles them into CSS, complete with vendor prefixes:
If you’re looking for more robust examples, a search for “example gulpfile” will turn up plenty of results.
Plugins
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.
Running Gulp
Once everything is setup, running gulp is as easy as using the following command in your project’s folder: gulp
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: gulp taskname
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 .gitignore file.
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: npm install
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.