Replacing Gulp with NPM scripts

[rob-howells]

Background / Motivation

The background of this change came from a couple of conversations on slack regarding build tools and Gulp:

https://accessdigital.slack.com/archives/C015M0HE2MC/p1644580323253259 https://accessdigital.slack.com/archives/C015M0HE2MC/p1644589448150529?thread_ts=1644578917.057919&cid=C015M0HE2MC

I floated the idea about potentially using NPM scripts as an alternative to Gulp for theme build tools. This PR is intedded as a space to discuss this further, being able to see how this would look in practice. There are a couple of articles that discuss the benefits of moving away from Gulp listed above in the slack links above, but in general the suggestion is that:

• Removing Gulp removes a layer of abstraction and simplifies the tooling - when using Gulp, plugins need to be installed as well as the npm package it's using e.g. gulp-babel and babel are both required
• Using Gulp can sometimes be limiting if a Gulp plugin isn't available / needs to be updated
• Documentation and debugging can be lacking with some Gulp plugins

Approach

• Added NPM scripts to theme package.json, which replicate functionality originally achieved in the theme gulpfile. A full overview of each task can be found in the updated readme
• Addition of new postcss and babel config files to handle processing of theme files previously handled in the gulpfile.js
• Removal of gulpfile.js and any Gulp plugin packages
• Changed autoprefixer and postcss to be dev dependencies

Additional / more opinionated changes

File minification

Previously .min equivalents were being output alongside non-minified versions of the files. In order to simply the file structure, environment variables NODE_ENV=production and BABEL_ENV=production are now being used to minify files only for the production build. This also helps sourcemaps work correctly for non-production builds (previously these were not working as expected).

Folder structure

Personally, when first working on the project I initially found it a little confusing why there were js and scripts folders within the theme (one being minified, transpiled code and one not). Although it didn't take long to work this distinction out, an alternative approach could be to use src and dist directories to make the distinction clear about different files. The gitignore and theme .libraries files have been updated to reflect this

[mangyfox]

Great job! Lovely to see all those gulp packages being removed. Think I need to do some Tailwind training!

[rob-howells]

Only one minor thing though, instead of src/sass should it be src/scss ? I was curious and wondered what the difference was, and the internet tells me that Sass is the preprocessor/scripting language, while SCSS is the syntax for the files. They're all .scss files, so would it make better sense to name the directory scss?

@iamsophiesk Ah yes. This is something I also thought of at the time. When I started this work I originally intended to try and keep it as close to the gulp set up as possible to show a like-for-like comparison. But then I couldn't resist tweaking a few other things whilst I was there 😄 Since those changes more opinionated changes have been made and there is now another vote for changing that sass directory name, I think that's a good case for updating it!