Starter Themes with a new build workflow

We’ve received feedback from our community that the old build workflow (using Gulp and/or webpack to generate the CSS/JS assets) included several package vulnerabilities that have not been fixed for quite a while and obviously have become unmaintained by the creators.

One could argue that this should not be problematic, as these dependencies only affect the local development system – and as long as the build process still works, there’s no need to change a running system.
But using obsolete and unsupported software can be dangerous and can break things “overnight”. Not to mention potential security risks that may arise in the web development stack.

So it was necessary to find a new simple, modern and future-proof build process for the frontend assets
Fortunately the research did not take too long. The @wordpress/scripts package from the awesome Gutenberg community already comes with a proven and tested webpack configuration specific to WordPress development, which made it a perfect candidate to try out.

After some trial-and-error the build process worked pretty well and that’s why all our Starter Themes (Full Site Editing, Bootstrap and Material Design) have been updated to include this “webpack only” workflow from WordPress. From now on Gulp (including its several internal dependencies that are outdated) is not needed anymore.

Start the development process:
$ npm run watch
Build and minify the assets:
$ npm run build

👆 Breaking change: The build directories have been moved from /assets/css and /assets/js to /build which aligns with the @wordpress configuration. If you want to include the new workflow in an existing theme, please have a look at the source code in the Github repositories of the Starter Theme and adjust the paths of the JS/CSS assets in functions.php accordingly.