I originally worked about 3 years ago on the Travel site static web page as part of the Git Modern Development Workflow course. The course was updated to remove some unnecessary, bloated or outdated packages. Other improvements also including removing the use of the Gulp task and workflow manager and replacing it entirely with the Webpack toolset for development workflow and building for deployment.
List of packages removed with their replacements:
- jQuery – replaced with standard Javascript code
- jQuery smooth scroll – replaced with standard html smooth scrolling
- waypoints – (for handling of Reveal on scroll ability) replaced with standard Javascript. Made use of the lodash package to reduce the number of browser calls
- gulp packages for watch, build, modernizr, uglify, usemin, etc. – all replaced with webpack
- No longer bother with using consolidated sprite files for icons (the download saving is insignificant.)
- browser-sync – replaced with webpack-dev-server – which still performs immediate code injection when developing.
PostCSS (and autoprefixer) is implemented via webpack instead of gulp.
The development workflow now uses 2 npm commands:
- npm run dev – performs the build of JS and CSS (via PostCSS) and stages the website on localhost, with automatic CSS and JS injection. Webpack keeps the code in memory, so runs very fast.
- npm run build – performs the build of the site ready for production distribution – including splitting files into chunks, handling unique names, and injecting the references to CSS and JS into the HTML.
The actual website doesn’t look any different. Although, I believe the sight runs more efficiently now. The modal for “Get in Touch” uses HTML injection via JS, rather than using static HTML. This and other reductions in the amount of JS that is downloaded makes the site runs faster.
You can checkout the site and source code on my projects page here.