gulpfile.babel.js

'use strict';

import plugins from 'gulp-load-plugins';
import yargs from 'yargs';
import browser from 'browser-sync';
import gulp from 'gulp';
import parallel from 'concurrent-transform';
import panini from 'panini';
import rimraf from 'rimraf';
import sherpa from 'style-sherpa';
import yaml from 'js-yaml';
import fs from 'fs';

// Load all Gulp plugins into one variable
const $ = plugins();
console.log($);

// Check for --production flag
const PRODUCTION = !!(yargs.argv.production);

// Load settings from config.yml
const {
  COMPATIBILITY,
  PORT,
  UNCSS_OPTIONS,
  PATHS
} = loadConfig();

function loadConfig() {
  let ymlFile = fs.readFileSync('config.yml', 'utf8');
  return yaml.load(ymlFile);
}

// Build the "dist" folder by running all of the below tasks
gulp.task('build',
  gulp.series(clean, gulp.parallel(pages, sass, javascript, json, images, copy), styleGuide));

// Build the site, run the server, and watch for file changes
gulp.task('default',
  gulp.series('build', server, watch));

// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
  rimraf(PATHS.dist, done);
}

// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
function copy() {
  return gulp.src(PATHS.assets)
    .pipe(gulp.dest(PATHS.dist + '/assets'));
}

// Copy page templates into finished HTML files
function pages() {
  return gulp.src('src/pages/**/*.{html,hbs,handlebars}')
    .pipe(panini({
      root: 'src/pages/',
      layouts: 'src/layouts/',
      partials: 'src/partials/',
      data: 'src/data/',
      helpers: 'src/helpers/'
    }))
    .pipe(gulp.dest(PATHS.dist));
}

// Load updated HTML templates and partials into Panini
function resetPages(done) {
  panini.refresh();
  done();
}

// Generate a style guide from the Markdown content and HTML template in styleguide/
function styleGuide(done) {
  sherpa('src/styleguide/index.md', {
    output: PATHS.dist + '/styleguide.html',
    template: 'src/styleguide/template.html'
  }, done);
}

// Compile Sass into CSS
// In production, the CSS is compressed
function sass() {
  return gulp.src('src/assets/scss/app.scss')
    .pipe($.sourcemaps.init())
    .pipe($.sass({
        includePaths: PATHS.sass
      })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: COMPATIBILITY
    }))
    // Comment in the pipe below to run UnCSS in production
    //.pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS)))
    .pipe($.if(PRODUCTION, $.cssnano()))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest(PATHS.dist + '/assets/css'))
    .pipe(browser.reload({
      stream: true
    }));
}

// Combine JavaScript into one file
// In production, the file is minified
function javascript() {
  gulp.src('src/assets/js/single-page/**/*.js')
    .pipe($.babel({
      ignore: ['what-input.js']
    }))
    .pipe($.if(PRODUCTION, $.uglify()
      .on('error', e => {
        console.log(e);
      })
    ))
    .pipe(gulp.dest(PATHS.dist + '/assets/js/single-page'));

  return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe($.babel({
      ignore: ['what-input.js']
    }))
    .pipe($.concat('app.js'))
    .pipe($.if(PRODUCTION, $.uglify()
      .on('error', e => {
        console.log(e);
      })
    ))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest(PATHS.dist + '/assets/js'));
}

function json() {
  return gulp.src('src/assets/json/**/*')
    .pipe($.if(PRODUCTION, $.jsonminify()
      .on('error', e => {
        console.log(e);
      })
    ))
    .pipe(gulp.dest(PATHS.dist + '/assets/json'));
}

// Copy images to the "dist" folder
// In production, the images are compressed
function images() {
  gulp.src('src/assets/img/**/{painting,crop}_*_base.{png,jpg}')
    .pipe($.changed(PATHS.dist))
    .pipe(parallel(
      $.imageResize({
        width: 512,
        upscale: false,
        quality: .4,
        format: "jpeg",
        filter: "Lanczos",
        noProfile: true,
        imageMagick: true,
        background: "#000"
      }),
      8
    ))
    .pipe(parallel($.if(PRODUCTION, $.imagemin({
        progressive: true
      })),
      8
    ))
    .pipe($.rename(function(path) {
      if (path.extname === ".jpeg") {
        path.extname = ".jpg";
        path.basename = path.basename.substr(0, path.basename.lastIndexOf("_base")) + "_thumb";
      }
    }))
    .pipe(gulp.dest(PATHS.dist + '/assets/img'));

  return gulp.src('src/assets/img/**/*')
    .pipe($.if(PRODUCTION, $.imagemin({
      progressive: true
    })))
    // .pipe(parallel($.if(PRODUCTION, $.imagemin({
    //     progressive: true
    //   })),
    //   8
    // ))
    .pipe(gulp.dest(PATHS.dist + '/assets/img'));

  // return gulp.src('src/assets/img/**/*optimized.{png,jpg}')
  //   // .pipe($.changed(PATHS.dist))
  //   .pipe($.responsive({
  //     "*": [{
  //       height: 512,
  //       format: 'jpeg',
  //       skipOnEnlargement: true,
  //       quality: 50,
  //       // rotate: 90,
  //       rename: {
  //         suffix: '_thumb',
  //         extname: '.jpg'
  //       },
  //       withMetadata: false,
  //       progressive: true
  //     }, {
  //       // rotate: 90,
  //       withMetadata: false,
  //       progressive: true,
  //       compressionLevel: 9
  //     }]
  //   }, {
  //     strictMatchImages: false
  //   }))
  //   .pipe($.if(PRODUCTION, $.imagemin({
  //     progressive: true
  //   })))
  //   .pipe(gulp.dest(PATHS.dist + '/assets/img'));
}

// Start a server with BrowserSync to preview the site in
function server(done) {
  browser.init({
    server: PATHS.dist,
    port: PORT
  });
  done();
}

// Reload the browser with BrowserSync
function reload(done) {
  browser.reload();
  done();
}

// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
  gulp.watch(PATHS.assets, copy);
  gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload));
  gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload));
  gulp.watch('src/assets/scss/**/*.scss').on('all', sass);
  gulp.watch('src/assets/js/**/*.js').on('all', gulp.series(javascript, browser.reload));
  gulp.watch('src/assets/img/**/*').on('all', gulp.series(images, browser.reload));
  gulp.watch('src/assets/json/**/*').on('all', gulp.series(json, browser.reload));
  gulp.watch('src/styleguide/**').on('all', gulp.series(styleGuide, browser.reload));
}