Make project (root) directory

You know how to make a new folder, right? Course you do ;)

Navigate to project directory in Terminal

// type "cd" then drag directory onto Terminal window
// example command
   
cd /Users/Soren/Desktop/my-gulp-project

Make index.html file, CSS directory and main.scss file

// inside project root directory

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

Make package.json file

// inside project root directory

touch package.json

Copy/paste and save this snippet into package.json

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

Install Gulp To Project

// inside project root directory

npm install gulp --save-dev

Install project specific packages

• 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

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

Make gulpfile.js file

// inside project root directory
       
touch gulpfile.js

Our project structure

my-gulp-project/
       
  css/
    main.scss
  
  node_modules/
    browser-sync
    gulp
    gulp-autoprefixer
    gulp-minify-css
    gulp-rename
    gulp-sass

  gulpfile.js
  index.html
  package.json

Part 2: gulpfile.js tasks on their way!