hookson-connect-base/gulpfile.js

Master Theme

var gulp = require('gulp');
var sass = require('gulp-sass');
var cssnano = require('cssnano');
var autoprefixer = require('autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var postcss = require('gulp-postcss');
var cp = require('child_process');
var jekyll = process.platform === 'win32' ? 'jekyll.bat' : 'jekyll';
var concatjs = require('gulp-concat');
var browserSync = require('browser-sync').create();
var babel = require('gulp-babel');
var webpack = require('webpack');
var webpackStream = require('webpack-stream');
var path = require("path");

var paths = {
  styles: {
    src: 'src/_scss/**/*.scss',
    dest: 'dist/css'
  },
  scripts: {
    src: 'src/_js/**/*.js',
    dest: 'dist/js'
  },
  images: {
    src: 'src/_assets/**/*',
    dest: 'dist/img'
  }
};

function jekyllBuild() {
  return cp.spawn( jekyll , ['build'], {stdio: 'inherit'})
}

function style() {
  return gulp.src(paths.styles.src)
    .pipe(sass({
      includePaths: ['_scss', 'node_modules'],
      outputStyle: 'expanded',
      onError: browserSync.notify
    }))
    .pipe(postcss([
      autoprefixer()
    ]))
    
    .pipe(gulp.dest(paths.styles.dest))
    
}

function images() {
  return gulp.src('src/_assets/img/**/*')
    .pipe(gulp.dest('dist/img'));
}


var webpackConfig = {
  module: {
    rules: [
      {
        test: /.js$/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      Popper: ["popper.js", "default"]
  }),
  ],
  mode: 'none'
}

function js() {
  return gulp.src([
    './node_modules/jquery/dist/jquery.slim.min.js',
    './node_modules/popper.js/dist/umd/popper.min.js',
    paths.scripts.src
  ])
  .pipe(webpackStream(webpackConfig, webpack))
  .pipe(concatjs('app.js'))
  .pipe(gulp.dest(paths.scripts.dest))
} 

function browserSyncServe(done) {
  browserSync.init({
    server: {
      baseDir: "_site"
    }
  })
  done();
}

function browserSyncReload(done) {
  browserSync.reload();
  done();
}

function watch() {
  gulp.watch(paths.styles.src, gulp.series(style, jekyllBuild, browserSyncReload))
  gulp.watch(paths.scripts.src, gulp.series(js, jekyllBuild, browserSyncReload))
  gulp.watch(paths.images.src, gulp.series(images))
  gulp.watch(
    [
    '*.html',
    '_layouts/*.html',
    '_pages/*',
    '_posts/*',
    '_data/*',
    '_includes/*'
  ],
  gulp.series(jekyllBuild, browserSyncReload));
}

gulp.task('default', gulp.series(jekyllBuild, images, browserSyncServe, style, js, watch))