Setting Up a Development Environment with Jade, SASS, Less, and NPM

Prerequisites: Install NPM.

Step 1: 
Create Directory

Step 2: 
Make a new gulp file named gulpfile.js

Step 3: 
Copy and paste these dependencies into your gulpfile:

var gulp = require('gulp'); // build system
var jade = require('gulp-jade'); // jade allows to build html markup quickly
var rename = require('rename');

var gulp = require('gulp'); // build system
var jade = require('gulp-jade'); // jade allows to build html markup quickly
var rename = require('rename');

var less = require('gulp-less'); // less allows you to build css files.
var concat = require('gulp-concat'); // concentrates certain files
var livereload = require('gulp-livereload') // reloads browser when updating certain files. Works with live reload chrome extension.
var express = require('express'); // web server
var app =  express(); // refrences the express web server
var gutil = require('gulp-util'); // utility functions and log for gulp plugins (optional)
var path = require('path'); // used by express server
var data = require('gulp-data'); // connects to jason file.


Step 4:  Open up a command prompt, I use GitBash, by right clicking in the directory you created and run:
npm init

This asks a series of questions about your project and creates a package.json file in your project directory. Answer the questions as you wish.

Step 5:  now run the following command to install the dependencies above.

npm install --save-dev gulp gulp-jade gulp-less gulp-concat gulp-livereload express gulp-data







To check if all packages have been installed you can run the following command:
npm list -dev --depth=0



..to be continued.