Based on the resolution shared here, my gulpfile looks like this -
var browserSync = require('browser-sync').create();
var cp = require('child_process');
var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
var paths = {
jekyll: {
src: './app',
dest: '_site',
},
styles: {
src: '_scss/main.scss',
dest: 'css',
}
};
var messages = {
jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
};
/**
* Build the Jekyll Site
*/
function jekyllBuild(done) {
browserSync.notify(messages.jekyllBuild);
return cp.spawn('jekyll.bat', ['build'], { stdio: 'inherit' })
.on('close', done);
}
/**
* Rebuild Jekyll & do page reload
*/
function jekyllRebuild(done){
browserSync.reload();
done();
}
function serve() {
browserSync.init({
server: {
baseDir: '_site'
},
notify: true
});
}
/**
* Compile files from _scss into both _site/css (for live injecting) and site (for future jekyll builds)
*/
function styles() {
return gulp.src(paths.styles.src)
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
.pipe(gulp.dest(paths.jekyll.dest + '/css'))
.pipe(browserSync.stream())
.pipe(gulp.dest(paths.styles.dest));
}
/**
* Watch scss files for changes & recompile
* Watch html/md files, run jekyll & reload BrowserSync
*/
function watch() {
gulp.watch('_scss/*.scss', gulp.series(styles));
gulp.watch(['*.html', '_layouts/*.html', '_posts/*'], gulp.series(jekyllRebuild));
}
exports.jekyllBuild = jekyllBuild;
exports.jekyllRebuild = gulp.series(jekyllBuild, jekyllRebuild);
exports.default = gulp.series(styles, jekyllBuild, gulp.parallel(serve, watch));
exports.serve = serve;
exports.styles = styles;
exports.watch = watch;
NPM install issue
I was also facing npm install issue with the existing starter project. I deleted the existing package.json and installed each node package individually. My current package.json looks like this -
Gulp upgraded from v3 to v4
Based on the resolution shared here, my gulpfile looks like this -
NPM install issue
I was also facing
npm install
issue with the existing starter project. I deleted the existing package.json and installed each node package individually. My current package.json looks like this -