Closed rob-howells closed 2 years ago
Great job! Lovely to see all those gulp packages being removed. Think I need to do some Tailwind training!
Only one minor thing though, instead of
src/sass
should it besrc/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 directoryscss
?
@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!
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:
gulp-babel
andbabel
are both requiredApproach
package.json
, which replicate functionality originally achieved in the theme gulpfile. A full overview of each task can be found in the updated readmegulpfile.js
gulpfile.js
and any Gulp plugin packagesAdditional / 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 variablesNODE_ENV=production
andBABEL_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
andscripts
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 usesrc
anddist
directories to make the distinction clear about different files. The gitignore and theme .libraries files have been updated to reflect this