[Resolved] Gulp update and npm install issue on windows

[AdarshGupta]

Gulp upgraded from v3 to v4

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 -

{
  "name": "jekyll-browser-sync",
  "version": "1.0.0",
  "description": "jekyll-gulp-sass-browser-sync =============================",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "<Author name>",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.27.10",
    "cross-env": "^7.0.3",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^8.0.0",
    "gulp-sass": "^5.1.0",
    "sass": "^1.56.1"
  }
}