Gulp Files Watcher (BrowserSync + SCSS)

README.md

GULP File Watcher (BrowserSync + SCSS)

Folders/Files to include

• 📁 scss
  • 📄 style.scss
• 📄 gulpfile.js
• 📄 index.html

Gulp dependencies (npm_modules)

• gulp
• gulp-sass
• browser-sync

How to run it?

• Open Terminal/Cmd-Prompt & type 'gulp' in that folder.
• Save your code & your project will load automatically.

Things to remember

• Make sure you've been added css/style.css in your index.html file.
• It can work with any project having index.html file.
• You'll get cli error on typing wrong syntax.

Need any help, let me know via comments section.

gulpfile.js

/* 
   author: Amandeep Singh(github.com/adsingh14)
*/
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var paths = {
	scss: './sass/*.scss'
};

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

gulp.task('browser-sync',function(){
	browserSync.init(['css/*.css',"js/*.js","index.html"],{
		server:{
			baseDir:"./"
		}
	});
});
gulp.task('default',['sass','browser-sync'],function(){
	gulp.watch(["scss/*.scss", "scss/style/*.scss"], ['sass']);
});