Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// gulpfile.js
// Initialize modules
const gulp = require('gulp');
// Importing all the Gulp-related packages we want to use
const concat = require('gulp-concat');
const sourcemaps = require('gulp-sourcemaps');
const sass = require('gulp-sass');
//const browserSync = require('browser-sync');
//const server = browserSync.create();
const child = require('child_process');
const gutil = require('gulp-util');
const sassGlob = require('gulp-sass-glob');
const webpack = require('webpack-stream');
// File paths
const files = {
scssPath: '_includes/beatrice/**/*.scss',
jsPath: '_includes/beatrice/**/*.js'
}
// Sass task: compiles the style.scss file into style.css
function scssTask(){
return gulp.src(files.scssPath)
.pipe(sourcemaps.init()) // initialize sourcemaps first
.pipe(sassGlob())
.pipe(sass({
includePaths: ['node_modules'],
outputStyle: 'compressed'
}))
.pipe(sourcemaps.write('.')) // write sourcemaps file in current directory
.pipe(gulp.dest('assets/css')); // put final CSS in dist folder
}
// JS task: compiles JS files into main.js
function jsTask(){
return gulp.src(files.jsPath)
.pipe(webpack())
.pipe(concat('main.js'))
.pipe(gulp.dest('assets/js')); // put final JS in dist folder
}
// Watch task: watch SCSS and JS files for changes
// If any change, run scss and js tasks simultaneously
function watchTask(){
gulp.watch([files.scssPath, files.jsPath], gulp.series(scssTask, jsTask, jekyllBuild));
gulp.watch(
[
'./_layouts/**/*',
'./_pages/**/*',
'./_posts/**/*'
], gulp.series(jekyllBuild))
}
function jekyll(done) {
const jekyll = child.spawn('bundle', ['exec',
'jekyll',
'serve'
]);
const jekyllLogger = (buffer) => {
buffer.toString()
.split(/\n/)
.forEach((message) => gutil.log('Jekyll: ' + message));
};
jekyll.stdout.on('data', jekyllLogger);
jekyll.stderr.on('data', jekyllLogger);
done();
};
function jekyllBuild(done) {
const jekyll = child.spawn('bundle', ['exec',
'jekyll',
'build'
]);
const jekyllLogger = (buffer) => {
buffer.toString()
.split(/\n/)
.forEach((message) => gutil.log('Jekyll: ' + message));
};
jekyll.stdout.on('data', jekyllLogger);
jekyll.stderr.on('data', jekyllLogger);
done();
};
// Export the default Gulp task so it can be run
// Runs the scss and js tasks simultaneously
// then runs cacheBust, then watch task
exports.default = gulp.series(
scssTask,
jsTask,
jekyll,
watchTask
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment