Replace Gulp with Webpack (and npm scripts)

[mischah]

We need to replace the following tasks:

• clean
• {webpack, webpackWatch}
• handlebars
• {serve, reload}
• styles
• lint
• security
• bumpVersion
• createChangelog
• commitChanges
• createTag
• fonts
• images
• appTemplates
• copyStaticFiles
• bundleExternalCSS
• test
• banners
• lintStyles
• cacheBust
• processHtml
  Until now we had *.bundle.js in dev mode and *.bundle.min.js in prod mode. Same for CSS.
  I think this is a relict from the past and we don’t need it.
• lintBootstrap
  It doesn’t make sense to integrate Bootlint for now since Bootlint currently only supports Bootstrap 3. See E013 Only columns (.col-*-*) may be children of .rows - not only! twbs/bootlint#377 (comment) / My go at adding (some) Bootstrap 4 support twbs/bootlint#410 (comment)
• validateHtml
  There is only one Node.js CLI wrapping the official »Nu Html Checker«. Sadly we can’t use it straight away because of our Windows compatability. There is no cross OS way to pass output of one CLI as parameter to another. This is needed because the path to the HTML files we’d like to validate differ if one uses Handlebars or not. On Mac OS / Linux we could easily to one of the following npm scripts:

  "validate": "node-w3c-validator --input \"$(echo | npx babel-node ./build/html-files.js)\" --format text"
  

  "validate": "node-w3c-validator --input \"`echo | npx babel-node ./build/html-files.js`\" --format text"
  

  Where html-files.js is just this little script which outputs the current path to the HTMl files:

  #!/usr/bin/env node
  
  import {settings, useHandlebars} from './config';
  
  console.log(useHandlebars ? `${settings.destinations.handlebars}/*.html` : '.src/*.html');

  I’m open for other ideas 🤔

Additional To Dos:

• Cleanup
  • Remove gulp related files
  • Remove gulp related dev dependencies from package.json
• Update README
  • Replace Gulp references with Webpack
  • bundleExternalJS is obsolet.
  • Update Section regarding ESLint
  • New setting for using PurifyCSS in baumeister.json. Replacing UnCSS.
  • New setting for using cacheBusting in baumeister.json.

Improvements:

• Setup Webpack Bundle Analyzer
• Improve cachebusting. See Switch from revisioning files via query param to filenames for cachebusting #231.
• Improve vendor bundle splitting.
  Right now the vendor files are defined via the dependencies section of the package.json.
  This is super comfortable as webpack ist importing the main file of the dependencies package.json and you don’t need to import any file.
  But this way you always import a whole library instead of cherry picking just what you need which might have performance impacts. The vendor bundle is 50.08 kb by default (consisting of jQuery, bootstrap and popper.js)
• Notify if linting errors happen
  • There are no webpack-plugins or loaders for each and every linting tool we use
  • Plus having linting errors shown in the webpack overlay can be pretty annoying
  • Therefor linting errors are only shown in the terminal output when using the dev server and might escape ones notice
  • I’m thinking about a thin wrapper around node-notifier to accomplish that.
• Improve bundling polyfills.
  After improving the vendor bundling, the polyfills land in the vendor bundle. It would be nice to have a polyfills bundle which is loaded via a dynamic import and lazy loads only the polyfills which are needed for the current browser.
• Try to replace metalsmith with handlebars-loader

[mischah]

Replacing Gulp with Webpack is done with #228

We have the two follow up issues which should be adressed:

• Bring back Bootlint #234 – Bring back Bootlint
• Additional enhancements for the final v3 release #235 – Additional enhancements for the final v3 release