Instantly share code, notes, and snippets.

What would you like to do?
Gulp file with tasks - sass, sassDoc, sourcemaps, browser-sync, run-sequence
// npm install -g gulp-cli
var gulp = require('gulp');
// npm install gulp --save-dev
// Requires the gulp-sass plugin
// npm install gulp-sass --save-dev
var sass = require('gulp-sass');
// npm install gulp-sourcemaps --save-dev
var sourcemaps = require('gulp-sourcemaps');
// npm install browser-sync --save-dev
var browserSync = require('browser-sync');
// npm install sassdoc --save-dev
var sassdoc = require('sassdoc');
// npm install run-sequence --save-dev
var runSequence = require('run-sequence');
var sassOptions = {
errLogToConsole: true,
outputStyle: 'expanded'
var sassdocOptions = {
dest: 'directory/sassdoc'
gulp.task('sassdoc', function () {
return gulp
gulp.task('sass', function() {
return gulp.src('directory/scss/**/*.scss') // Gets all files ending with .scss in directory/scss
.pipe(sass(sassOptions).on('error', sass.logError))
stream: true
gulp.task('watch', ['browserSync', 'sass'], function (){'directory/scss/**/*.scss', ['sass']);
// Reloads the browser whenever HTML, JS, CSS files change'directory/*.html', browserSync.reload);'directory/js/**/*.js', browserSync.reload);'directory/css/**/*.css', browserSync.reload);
gulp.task('browserSync', function() {
server: {
baseDir: 'directory'
gulp.task('default', function(callback) {
runSequence(['sass', 'browserSync', 'watch'],
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment