Create a gist now

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
.src('directory/scss/**/*.scss')
.pipe(sassdoc(sassdocOptions))
.resume();
});
gulp.task('sass', function() {
return gulp.src('directory/scss/**/*.scss') // Gets all files ending with .scss in directory/scss
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(sourcemaps.write('maps'))
.pipe(gulp.dest('directory/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('watch', ['browserSync', 'sass'], function (){
gulp.watch('directory/scss/**/*.scss', ['sass']);
// Reloads the browser whenever HTML, JS, CSS files change
gulp.watch('directory/*.html', browserSync.reload);
gulp.watch('directory/js/**/*.js', browserSync.reload);
gulp.watch('directory/css/**/*.css', browserSync.reload);
});
gulp.task('browserSync', function() {
browserSync({
server: {
baseDir: 'directory'
},
})
})
gulp.task('default', function(callback) {
runSequence(['sass', 'browserSync', 'watch'],
callback
)
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment