Gulp + Sass + Browser Sync

gulpfile.js

/* Require */

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');


gulp.task('sass', function(){
       gulp.src('style/scss/styles.scss')
	    .pipe(sass({inlcludePaths: ['scss']}))
	    .pipe(gulp.dest('style/css'));
});

gulp.task('browser-sync', function() {  
    browserSync.init(["style/css/*.css", "script/js/*.js"], {
        server: {
            baseDir: "./"
        }
    });
});

gulp.task('default', ['sass', 'browser-sync'], function () {  
    gulp.watch("style/scss/*.scss", ['sass']);
});

SimpleWebApp.markdown

Prerequisites

Before starting, you should have:

A project containing at least an index.html & some scss files. NodeJS installed. GulpJS installed globally 'npm install -g gulp'

Step 1 - Install We need to install 3 tools locally to our project - gulp, gulp-sass & browser-sync. In your terminal/command line, navigate to your project directory and run

npm install gulp gulp-sass browser-sync

Step 2 - File creation

create a file named gulpfile.js

Step 3 - Start the server

Type gulp to trigger the server gulp