var gulp = require('gulp'), express = require('express'), sass = require('gulp-sass'), spawn = require('child_process').spawn, livereload = require('gulp-livereload'); var EXPRESS_PORT = 4000; var EXPRESS_ROOT = '_site/' // Run Jekyll Build Asynchronously gulp.task('jekyll', function () { var jekyll = spawn('jekyll', ['build']); jekyll.on('exit', function (code) { console.log('-- Finished Jekyll Build --') }) }); // Compile SASS gulp.task('sass', function () { return gulp.src('assets/_scss/*.scss') .pipe(sass({'sourceComments': 'map'})) // Turn on source mapping .pipe(gulp.dest('assets/css')) .pipe(gulp.dest('_site/assets/css')); // Copy to static dir }); // Run static file server gulp.task('serve', function () { var server = express(); server.use(express.static(EXPRESS_ROOT)); server.listen(EXPRESS_PORT); }); // Watch for changes gulp.task('watch', function () { var lr = livereload(); // Manually compile and inject css to avoid jekyll overhead, and utilize livereload injection gulp.watch('assets/_scss/*.scss', ['sass:dev']); // Watch for changes to other files for jekyll compilation // Note: This will probably need to be updated with the files you want to watch // Second Note: MAKE SURE that the last to items in the watchlist are included or else infinite jekyll loop gulp.watch(['*.html', '*/*.html', '*/*.md', '!_site/**', '!_site/*/**'], ['jekyll']); // When a file in the _site directory changes, tell livereload to reload the page gulp.watch(['_site/*/**']).on('change', function (file) { lr.changed(file.path); }); }) gulp.task('default', ['sass', 'jekyll', 'serve', 'watch']);