There are a ton of articles and lessons out on how to get started with Gulp and the various ways you can use it in your frontend workflow. But there aren't many tips on how to just add the basic files you need to use Gulp in a new project if you already have it installed. So, if you already have Node, NPM and Gulp installed, here's a quick guide on adding the files you need to add to a new or existing project.
Adding Gulp to your project
If you already have Gulp installed globally for your machine, just follow these steps.
- Navigate to your project folder in Terminal
- Type npm init and choose the default answers for all questions. This will give you a package.json file in the root of your project folder.
- Create a new blank file in the root of your project folder and call it gulpfile.js
All that's left to do is to add the following at the top of your gulpfile.js file:
var gulp = require('gulp');
You're now ready to install additional NPM packages to your project and add more Gulp tasks to gulpfile.js!
Tip: When installing NPM packages, use the --save-dev flag so it saves the package as a project dependency in your package.json file. This will make it easy for team members to install the necessary packages for your project by simply typing npm install.
If you don't already have Node installed
If you don't have Node.js installed yet, you'll need the following:
- Node.js and Node Package Manager (NPM) - Here's how to install Node.js and get the lowdown on NPM.
- Gulp installed as a global NPM package.
When you have Node and NPM installed on your machine, just type the following in Terminal to install Gulp globally for your machine:
> npm install --global gulp