Skip to content

Instantly share code, notes, and snippets.

@adsingh14

adsingh14/README.md

Last active Jul 10, 2018
Embed
What would you like to do?
Gulp Files Watcher (BrowserSync + SCSS)

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.

/*
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']);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment