Skip to content

Instantly share code, notes, and snippets.

@leymannx
Last active January 26, 2017 08:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save leymannx/ecbb1d34f9b1966278ff8ff3da8cb932 to your computer and use it in GitHub Desktop.
Save leymannx/ecbb1d34f9b1966278ff8ff3da8cb932 to your computer and use it in GitHub Desktop.
Gulp Sass Watch LiveReload (needs simple LiveReload Chrome extension)
// Require gulp and plugins
var gulp = require('gulp'),
sass = require('gulp-sass'),
gutil = require('gulp-util');
// Define file sources
var sassMain = ['scss/styles.scss'];
var sassSources = ['scss/**/*.scss']; // Any .scss file in any sub-directory
// Task to compile SASS files
gulp.task('sass', function() {
gulp.src(sassMain) // use sassMain file source
.pipe(sass({
outputStyle: 'expanded' // Style of compiled CSS
})
.on('error', gutil.log)) // Log descriptive errors to the terminal
.pipe(gulp.dest('css')); // The destination for the compiled file
});
// Task to watch for changes in our file sources
gulp.task('watch', function() {
gulp.watch(sassMain, ['sass']); // If any changes in 'sassMain', perform 'sass' task
gulp.watch(sassSources, ['sass']);
});
// Default gulp task
gulp.task('default', ['sass', 'watch']);
// Build task
gulp.task('build', ['sass']);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment