Skip to content

Instantly share code, notes, and snippets.

@timothyjensen
Created May 25, 2016 19:53
Show Gist options
  • Save timothyjensen/272721d5571c41a4b2b386c0e04aaf3a to your computer and use it in GitHub Desktop.
Save timothyjensen/272721d5571c41a4b2b386c0e04aaf3a to your computer and use it in GitHub Desktop.
Automate compiling Sass to CSS and browser refresh using BrowserSync
// Require our dependencies
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
gulp.task('styles', function(){
return gulp.src('sass/style.scss')
.pipe(sass({
outputStyle: 'expanded', // Options: nested, expanded, compact, compressed
indentType: 'tab',
indentWidth: 1
})) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('./'))
.pipe(browserSync.reload({stream: true}));
});
// Gulp watch syntax
gulp.task('serve', function(){
// Kick off BrowserSync.
browserSync.init({
proxy: "www.example.dev"
});
gulp.watch('sass/**/*.scss', ['styles']);
});
// Default Gulp task
gulp.task('default',['styles', 'serve']);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment