Stacks of paper cards

I found myself creating this particular dev environment set up multiple times and decided to save myself some time by creating a boilerplate.

Here are the list of libraries & frameworks we will be including:

  1. npm
  2. Gulp
  3. Browsersync
  4. Gulp Sass
  5. Bourbon
  6. Neat

This post assumes that you have npm and Gulp installed globally.

Let's get into the step-by-step tutorial on how I created this.

npm

Within your project folder, let's initialize npm: $ npm init. You will be asked several questions. Either leave them as-is or add to it. Once completed, you can press enter and say yes to confirm.

You should now see a package.json file in your project root folder. This file contains the metadata for your app and holds the project dependencies that npm will use.

Gulp

Next up, we're going to install Gulp, a JavaScript task runner to automate tasks such as compiling our SASS code to CSS. Make sure you have this installed globally.

$ npm install gulp --save-dev

Now if you go to your package.json file, you'll see that Gulp is now listed under devDependencies.

We need to create a Gulpfile.js file which will be used to hold a variety of tasks for our automation.

Here are Gulp tasks to become familiar with:

  • gulp.task: Defines a task
  • gulp.src: Which files to use
  • gulp.dest: Where to writes files
  • gulp.watch: Watch files for changes

Put the following in your newly created Gulpfile.js:

"use strict";

var gulp = require("gulp");

// Compiles all gulp tasks
gulp.task("default");

To make sure everything is good to go up to this point, type in $ gulp.

SASS

To install SASS, type in:

$ npm install gulp-sass --save-dev.

Add this to your Gulpfile.js:

var sass = require("gulp-sass");

Now add a SASS task to your Gulpfile which will compile all .scss files into one .css file.

// Compile SASS files
gulp.task("sass", function() {
  gulp.src("src/scss/**/*.scss")
      .pipe(gulp.dest("dist/css"))
});

Refactor your default Gulp task to the following:

gulp.task("default", ["sass"]);

Bourbon & Neat

Time to install!

$ npm install node-bourbon --save-dev

$ npm install node-neat --save-dev

Add the following to your Gulpfile:

var bourbon = require("node-bourbon").includePaths;

var neat = require("node-neat").includePaths;

Let's refactor our SASS task to the following:

// Compile SASS files
gulp.task("sass", function() {
  gulp.src("src/scss/**/*.scss")
      .pipe(sass({
        includePaths: bourbon,
        includePaths: neat
      }))
      .pipe(gulp.dest("dist/css"))
      .pipe(browserSync.reload({
        stream: true
      }))
});

BrowserSync

Lastly, we're including BrowserSync to enable live re-loading as we're developing locally.

$ npm install browser-sync --save-dev

Add the following to your Gulpfile:

var browserSync = require("browser-sync");

Let's set a Gulp task to spin up a server:

// Spin up a server
gulp.task("browserSync", function() {
  browserSync({
    server: {
      baseDir: "dist"
    }
  })
});

Next up, add a task where it watches for files to change and update accordingly.

// Live reload anytime a file changes
gulp.task("watch", ["browserSync", "sass"], function() {
  gulp.watch("src/scss/**/*.scss", ["sass"]);
  gulp.watch("dist/*.html").on("change", browserSync.reload);
});

There you have it! I hope you use this in your own projects.

You can find the Github repo here.