Gulp is a tool to help web developers automate various tasks. Like Grunt before it, Gulp makes repetitive tedious tasks bearable through automation. Remember: if you have to do it more than once, you’ve already done it too many times.
Today we are going to to set up a very basic Gulp workflow and only focus on building and optimizing your CSS from SCSS. In later posts we will have Gulp do more like compile and optimize you JS.
Prerequisites
Gulp, grunt, and other automation tools rely on Nodejs, so if you don’t already have nodejs installed you can get it here. Nodejs will come with NPM, (node package manager) which will give you easy access to download all sorts of things such as gulp itself.
When you’re done installing Nodejs it’s time to install gulp. Open your terminal of choice and enter the following command:
sudo npm install gulp -g
This command will install gulp globally on your machine. Note, installing packages with sudo is potentially dangerous, this post goes into more detail and precautions to take.
Setting up your project
Now we need to create a project directory. We are going to create a dirt simple project for this example. So create a folder named “myproject”, and inside that folder create another directory called “dev”.
In your terminal, navigate over to your project directory where we can set up our project by creating a package.json file which will define information about our project and also lists project dependencies that Gulp relies on. We don’t have to do this manually, run the following command to set up the file:
npm init
This will create the package.json file and will look something like:
{
"name": "project",
"version": "1.0.0",
"description": "this is a demo project",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "your name",
"license": "ISC"
}
In this example, I only set the name, description and author. I chose the defaults for everything else. Now we are going to use more than just Gulp for our workflow, so add a comma to that last line (“license”:”ISC”) and at the following new line:
"devDependencies": {}
This is where we will list our dependencies as comma separated key/value pairs (standon JSON).
Dependencies
