Gulp 4 + Jekyll + Rollup + BrowserSync

readme.md

Gulp 4 + Jekyll

Formula for building JavaScript and compiling SASS assets with Gulp 4 and Jekyll. Uses the powerful Rollup and BrowserSync as an added bonus.

Installation

You will need to add the following to your package.json file:

"scripts": {
  "preinstall": "bundle install --path vendor/bundle",
  "start": "bundle exec gulp",
  "build": "bundle exec gulp build",
  "production": "bundle exec gulp --jekyllEnv='production'"
}

In your _config.yml file make sure to add the following:

keep_files: [assets]
incremental: true

Last but not least, create a build.config.js file in the root of your directory and add your build paths, eg:

export default {
  jekyll: {
    default: '_config.yml',
    development: '_config_development.yml'
  },
  views: [
    './src/schema/**/*.yml',
    './src/views/collections/**/*.html',
    './src/views/includes/*.html',
    './src/views/layouts/*.html',
    './src/views/pages/*.md',
    './src/views/*.html',
  ],
  scripts: {
    src: './src/scripts/bundle.js',
    dest: './dist/assets/bundle.min.js'
  },
  styles: {
    src: 'src/styles/**/*.scss',
    dest: 'dist/assets'
  },
  browserSync: {
    open: false,
    ghostMode: false,
    server: {
      baseDir: './dist'
    }
  }

gulpfile.babel.js

import spawn from 'cross-spawn'
import browserSync from 'browser-sync'
import del from 'del'
import gulp from 'gulp'
import sass from 'gulp-sass'
import cssnano from 'gulp-cssnano'
import { rollup } from 'rollup'
import buble from 'rollup-plugin-buble'
import nodeResolve from 'rollup-plugin-node-resolve'
import config from './build.config'

const clean = () => del(['dist'])

const server = browserSync.create()

function serve(done) {
  server.init(config.browserSync)
  done()
}

function reload() {
  return server.reload()
}

async function styles () {

  await gulp.src(config.styles.src, {
    since: gulp.lastRun(styles)
  }).pipe(
    sass({
      outputStyle: 'uncompressed',
      includePaths: [
        'node_modules/'
      ]
    }).on('error', function (error) {
      console.error(`${error.messageFormatted}`)
      this.emit('end')
    })
  ).pipe(
    cssnano({
      autoprefixer: {
        add: true,
        browsers: []
      }
    })
  ).pipe(
    gulp.dest(config.styles.dest)
  ).pipe(
    server.stream()
  )


}

async function scripts () {

  const bundle = await rollup({
    input: config.scripts.src,
    plugins: [
      nodeResolve(),
      buble()
    ]
  })

  await bundle.write({
    file: config.scripts.dest,
    format: 'iife',
    name: 'App',
    sourcemap: true
  }).then(server.stream())

}

function jekyll (done) {

  spawn('jekyll', [
    'build',
    '--config',
    config.jekyll.development
  ], {
    env: process.env,
    stdio: 'ignore'
  }).on('close', reload).on('exit', done)

}

function watch (done) {

  gulp.watch(config.styles.src, styles)
  gulp.watch(config.scripts.src, scripts)
  gulp.watch(config.views, jekyll)

  done()

}

exports.styles = styles
exports.scripts = scripts
exports.build = gulp.series(clean, styles, scripts, jekyll)
exports.default = gulp.series(serve, gulp.parallel(scripts, styles), watch)