Gulp & performance related issues

Outdated Gulp version

Noticed that:

npm audit warns about Gulp related security issues.

Suggested fix is to upgrade to more recent version of the tool

Tried to "upgrade" by updating Gulp package versions to latest v4.x related versions, but ended up with error messages. Most likely the Gulp configuration syntax has changed a bit, and some of the Gulp plugins that this Eleventy "starter kit" project requires are probably not compatible with the latest Gulp version.

Performance issues

Since the Gulp version is already outdated, was wondering if it would make sense to move forward either to the latest Gulp v4.x version, or alternatively to some other build tool. The biggest issue with Gulp have been the slow build times.

Part of the performance issues are caused by the combination of multiple different types of build pipelines:

Eleventy builds for various template languages.
Tailwind for building CSS output from the partly Tailwind-specfic "custom" CSS syntax.
gulp.js for the build pipeline that combines various other tools together, including Tailwind.

I do have my own package.json scripts that I had to adjust because of the Windows compatiblity related issues (shared earlier on another issue), but those don't change the core Guilp build pipeline.

PurgeCSS Gulp integration

Had various issues with the lack of optimized builds, where Tailwind ends up generating a huge 350-400+ kilobyte CSS files, since the post-processing of the generated CSS is not done properly. Tried to solve the issue by running gulp tasks two times, to make sure that Gulp's PostCSS plugin for PurgeCSS @fullhuman/postcss-purgecss would reduce the size of the CSS file.

Snippet from package.json file's scripts section:

    "build-serial": "npm-run-all --serial build:gulp build:eleventy build:gulp",
    "build:gulp": "gulp build",
    "build:eleventy": "eleventy --config=eleventy.config.js",

Originally the build script was parallel, but had to modify it to the --serial mode so that build steps would not get mixed with each other. Reason for the serial build pipeline was mostly the issues caused by the misbehaving PurgeCSS part of the Gulp pipeline.

    // Original version of the build task
    "build": "npm-run-all --parallel build:gulp build:eleventy",

Tailwind customization

For various reason, need to be able to customize the CSS styles. Had some odd problems on getting the changes to build, and was wondering about how the build pipeline really works.

Sidenotes

While I understand that part of the issue might be caused by my customized package.json scripts, I feel that there is room for improvement on the Tailwind integration part.

Mainly wondering whether I should spend time trying to debug Gulp related issues, or just throw Tailwind and Gulp away and rewrite major part of the template from scratch. That would be a wasted amount of effort, most likely, since there probably is a faster way to fix the problems.

josephdyer / skeleventy