understanding-graphs/gulpfile.babel.js

/**
 * Available build configurations: 4 in case of modules connecting to API, otherwise only 2
 * - development - offline
 * - development - online
 * - production - offline
 * - production - online
 *
 * Distinction between development and production targets by environment variable process.env.NODE_ENV
 * Online / offline versions (API usage or locally defined data) by command line arguments (default: online)
 */

import path from 'path';
import config from './config';

import gulp from 'gulp';

import { clean } from './tasks/clean';
import { html } from './tasks/html';
import { sprites } from './tasks/sprites';
import { copyFonts, copyImages } from './tasks/copy';
import { lint, lintJs, lintSass, lintHtml } from './tasks/lint';
import { styles } from './tasks/styles';
import { scripts } from './tasks/scripts';
import { reload, serve } from './tasks/server';

// Delete previously built files, generate html and sprites
const prepare = gulp.series(
  clean,
  html,
  sprites
);

// Copy assets
const finish = gulp.parallel(
  copyFonts,
  copyImages
);

// Execute complete build process
const build = gulp.series(
  prepare,
  gulp.parallel(lintSass, lintJs, lintHtml),
  gulp.parallel(styles, scripts),
  finish
);

// Watch files and react accordingly
const watchFiles = () => {
  // HTML
  gulp.watch(
    path.join(
      config.paths.src,
      config.paths.html,
      '*.html'
    ),
    gulp.series(html, reload)
  );

  // Javascript
  gulp.watch(
    path.join(
      config.paths.src,
      config.paths.js,
      '/**/*.(js|jsx|json)'
    ),
    gulp.series(scripts, reload)
  );

  // Sass
  gulp.watch(
    path.join(
      config.paths.src,
      config.paths.sass,
      '/**/*.scss'
    ),
    gulp.series(styles, reload)
  );

  // Fonts
  gulp.watch(
    path.join(
      config.paths.src,
      config.paths.fonts,
      '*.(woff|woff2)'
    ),
    gulp.series(copyFonts, reload)
  );

  // Images
  gulp.watch(
    path.join(
      config.paths.src,
      config.paths.images,
      '*.(png|jpg)'
    ),
    gulp.series(copyImages, reload)
  );

  // Sprites
  gulp.watch(
    path.join(
      config.paths.src,
      config.paths.images,
      config.paths.sprites,
      '*.svg'
    ),
    gulp.series(sprites, copyImages, reload)
  );
};

// Build first, then serve and watch files
const watch = gulp.series(
  build,
  serve,
  watchFiles
);

// hack-a-di-hack: export named default task as default
// (which is a javascript keyword but at the same time the name
// of the gulp default task. Very good, gulp. Or, maybe, rather not
export {
  watch as default,
  build,
  lint,
  prepare,
  watch
};