With Node.js and Gulp globally installed on our machine, let's start our first gulp project

1. Set-up Project Directory

First, we need to make our project (root) directory. Make the directory like you normally do and give it a name. Let's keep it simple and make a new directory on the Desktop.

Let's navigate to it using the command line in Terminal.

Type cd (with a space afterwards) and then drag the project directory from the Desktop onto the Terminal window. cd stands for "change directory".

I've named my project directory "my-gulp-project". Here's the Terminal command after I dragged the project directory onto the Terminal window

cd /Users/Soren/Desktop/my-gulp-project

Once we hit ENTER, we're inside our project's root directory.

Let's make an index.html file, a CSS directory and a main.scss file inside the CSS directory.

We can make them with a text editor or with one command in Terminal.

// inside project root directory

touch index.html && mkdir css && cd $_ && touch main.scss && cd -

touch index.html   // make index.html file
mkdir css          // make directory named "css"
cd $_              // change to directory just made, "css"
touch main.scss    // make main.scss file inside "css" directory
cd -               // go back to previous directory, our project root

Once we've made the index.html file, CSS directory and main.scss file, this is our project structure

my-gulp-project/

  css/
    main.scss

  index.html

• Project root directory named "my-gulp-project"
• CSS directory inside our project root directory
• main.scss file inside our CSS directory
• index.html file inside our project root directory

It's time to add a new file: package.json

2. The package.json file

I'd try and compose an introductory paragraph about this file but others have said it better

• What is package.json? by Dan Tello
• Specifics of npm's package.json handling - npmjs.com

Know that it is a file that is required and we add it to the project root directory, so let's make it!

Make package.json file the copy/paste way or via the command line.

{
  "name": "my-gulp-project",
  "version": "0.1.0",
  "description": "My first Gulp project",
  "devDependencies": {
  }
}

// inside project root directory

npm init

To understand what data we can include inside the package.json file, visit package.json, An Interactive Guide by browsenpm.org

Our project structure after making package.json

my-gulp-project/

  css/
    main.scss

  index.html
  package.json

It's now time to install Gulp inside our project directory!

3. Install Gulp To Project

Let's use the command line to install Gulp locally inside our project directory. Type this command

// inside project root directory

npm install gulp --save-dev

--save-dev means the Gulp packages we install will appear as "devDependencies" inside the package.json file.

This install will make a new directory for us named "node_modules" where the "gulp" package will be saved.

You may notice while Gulp is being installed locally the command line displays a few "warnings"

npm WARN package.json test@1.0.0 No repository field.
npm WARN package.json test@1.0.0 No README data

• "No repository field" means the repository data is missing from the package.json file. For an explaination about this data, please visit package.json, An Interactive Guide
• "No README data" means we have yet to add a README.md file to our project directory

Remember, these are warnings not errors!

Our project structure after local Gulp install

my-gulp-project/

  css/
    main.scss
  
  node_modules/
    gulp
    
  index.html
  package.json

We're now ready to install our project specific Gulp packages!

4. Install node packages

Similar to how we installed the main Gulp package in step 3, let's install the other packages that will help run our project tasks.

Remember, we want to use Sass with our project, to minify our CSS and to automatically reload the browser whenever we hit save on a .html or .scss file. With this in mind, here is a list of the Gulp packages we're going to install

• browser-sync : reload our browser whenever we hit "save"
• gulp-autoprefixer : auto prefix our CSS
• gulp-minify-css : minify our main CSS file
• gulp-rename : rename our files e.g, main.css to main.min.css
• gulp-sass : tap into the power of Sass

We can install packages one at a time or install all packages at the same time.

// example: install gulp-sass package

npm install gulp-sass --save-dev

npm install browser-sync gulp-autoprefixer gulp-minify-css gulp-rename gulp-sass --save-dev

Be patient! Some packages may take longer to install than others.

3 things we can do while we wait

Our project structure after packages install

my-gulp-project/

  css/
    main.scss
  
  node_modules/
    browser-sync
    gulp
    gulp-autoprefixer
    gulp-minify-css
    gulp-rename
    gulp-sass
    
  index.html
  package.json

With our project specific packages installed, there's one last file we need to make: gruntfile.js

5. The gulpfile.js file

The gulpfile.js file is where we make use of the packages we've installed in step 4. We'll be writing the gulpfile.js tasks in Part 2 so let's get prepared and make the file now.

Like before, We can make this file with a text editor or quickly via the command line

// inside project root directory
       
touch gulpfile.js

Our project structure after making gulpfile.js
       
css/
  main.scss
  
node_modules/
  browser-sync
  gulp
  gulp-autoprefixer
  gulp-minify-css
  gulp-rename
  gulp-sass

gulpfile.js
index.html
package.json