run.js

/* eslint-disable no-console, global-require */

const fs = require('fs');
const fse = require('fs-extra');
const del = require('del');
const ejs = require('ejs');
const webpack = require('webpack');
const webpackConfig = require('./webpack.config');

const config = {
  title: 'Tarantino',        // Your website title
  url: 'https://meet-tarantino.github.io'          // Your website URL
};

const paths = webpackConfig.buildPaths;

const tasks = new Map(); // The collection of automation tasks ('clean', 'build', 'publish', etc.)

function run(task) {
  const start = new Date();
  console.log(`Starting '${task}'...`);
  return Promise.resolve().then(() => tasks.get(task)()).then(() => {
    console.log(`Finished '${task}' after ${new Date().getTime() - start.getTime()}ms`);
  }, err => console.error(err.stack));
}

//
// Clean up the output directory
// -----------------------------------------------------------------------------
tasks.set('clean', () => del([paths.build], { dot: true }));
tasks.set('clean-publish', () => del([`${paths.build}/**`, `!${paths.build}`, `!${paths.build}/.git` ], { force: true }));

//
// Copy ./index.html into the /public folder
// -----------------------------------------------------------------------------
tasks.set('html', () => {
  const assets = JSON.parse(fs.readFileSync(`${paths.build}/dist/assets.json`, 'utf8'));
  const template = fs.readFileSync(`${paths.templates}/index.ejs`, 'utf8');
  const render = ejs.compile(template, { filename: `${paths.templates}/index.ejs` });
  const output = render({ debug: webpackConfig.debug, bundle: assets.main.js, config });
  fs.writeFileSync(`${paths.build}/index.html`, output, 'utf8');
});

//
// Generate sitemap.xml
// -----------------------------------------------------------------------------
tasks.set('sitemap', () => {
  const urls = require('./routes.json')
    .filter(x => !x.path.includes(':'))
    .map(x => ({ loc: x.path }));
  const template = fs.readFileSync(`${paths.templates}/sitemap.ejs`, 'utf8');
  const render = ejs.compile(template, { filename: `${paths.templates}/sitemap.ejs` });
  const output = render({ config, urls });
  fs.writeFileSync(`${paths.build}/sitemap.xml`, output, 'utf8');
});

//
// Bundle JavaScript, CSS and image files with Webpack
// -----------------------------------------------------------------------------
tasks.set('bundle', () => {
  return new Promise((resolve, reject) => {
    webpack(webpackConfig).run((err, stats) => {
      if (err) {
        reject(err);
      } else {
        console.log(stats.toString(webpackConfig.stats));
        resolve();
      }
    });
  });
});

tasks.set('staticAssets', () => {
  fse.copySync(paths.staticAssets, paths.build, { clobber: true });
});

//
// Build website into a distributable format
// -----------------------------------------------------------------------------
tasks.set('build', () => Promise.resolve()
  .then(() => run('clean'))
  .then(() => run('staticAssets'))
  .then(() => run('bundle'))
  .then(() => run('html'))
  .then(() => run('sitemap'))
);

tasks.set('publish-build', () => Promise.resolve()
  .then(() => run('clean-publish'))
  .then(() => run('staticAssets'))
  .then(() => run('bundle'))
  .then(() => run('html'))
  .then(() => run('sitemap'))
);

//
// Build and publish the website
// -----------------------------------------------------------------------------
// tasks.set('publish', () => {
//   global.DEBUG = process.argv.includes('--debug') || false;
//   const firebase = require('firebase-tools');
//   return run('build')
//     .then(() => firebase.login({ nonInteractive: false }))
//     .then(() => firebase.deploy({
//       project: config.project,
//       cwd: __dirname,
//     }))
//     .then(() => { setTimeout(() => process.exit()); });
// });

//
// Build website and launch it in a browser for testing (default)
// -----------------------------------------------------------------------------
tasks.set('start', () => {
  let count = 0;
  global.HMR = !process.argv.includes('--no-hmr'); // Hot Module Replacement (HMR)
  return run('clean').then(() => run('staticAssets')).then(() => new Promise(resolve => {
    const bs = require('browser-sync').create();
    const compiler = webpack(webpackConfig);
    // Node.js middleware that compiles application in watch mode with HMR support
    // http://webpack.github.io/docs/webpack-dev-middleware.html
    const webpackDevMiddleware = require('webpack-dev-middleware')(compiler, {
      publicPath: webpackConfig.output.publicPath,
      stats: webpackConfig.stats,
    });
    compiler.plugin('done', stats => {
      // Generate index.html page
      const bundle = stats.compilation.chunks.find(x => x.name === 'main').files[0];
      const template = fs.readFileSync(`${paths.templates}/index.ejs`, 'utf8');
      const render = ejs.compile(template, { filename: `${paths.templates}/index.ejs` });
      const output = render({ debug: true, bundle: `/dist/${bundle}`, config });
      fs.writeFileSync(`${paths.build}/index.html`, output, 'utf8');

      // Launch Browsersync after the initial bundling is complete
      // For more information visit https://browsersync.io/docs/options
      if (++count === 1) {
        bs.init({
          port: process.env.PORT || 8080,
          ui: { port: Number(process.env.PORT || 8080) + 1 },
          server: {
            baseDir: 'build',
            middleware: [
              webpackDevMiddleware,
              require('webpack-hot-middleware')(compiler),
              require('connect-history-api-fallback')(),
            ],
          },
        }, resolve);
      }
    });
  }));
});

// Execute the specified task or default one. E.g.: node run build
run(/^\w/.test(process.argv[2] || '') ? process.argv[2] : 'start' /* default */);