Elfin

What Do I Get

Fast dev with live-reloading as you code
Delivers modern JS to modern browsers, and shitty JS to shitty browsers
Tailwind! 2.0!
Minimizes and optimizes CSS and JS
Lossless compression of images (jpg, png, svg) used in CSS or JS
Uses webpack’s cache to speed up builds (if you’re on Netlify, it automatically caches the cache there!)
A handy CLI, if you want it

As speed is one of the goals of Elfin, the Tailwind JIT compiler is of great interest to us. Unfortunately, it’s not stable or tracked by semver yet, so it’s not available in the main branch of Elfin. If you’d like to play around with Elfin’s Tailwind JIT implementation, check out the tailwind-jit branch.

How Do I Use It

npm run build - Builds the entire site into the dist directory
npm run deploy - Run a production build (use this when deploying).
npm run dev - Builds, watches, and serves the site at https://localhost:900

Because there are essentially two “builds” that happen here (11ty and Webpack) there is a bit of file shuffling that goes on. If a directory or file is in .gitignore then it is probably part of that shuffling, and you should leave it alone. i.e. content/_build/, etc.

Resources

A lot of what this package does is based on this article and this repo that implements the article’s advice.
There is a potential issue w/ the above technique where scripts are loaded twice. This article offers some ways to defeat that, depending on the context. Currently Elfin doesn’t implement any of these solutions, but it could.
The optimizations to the build process that allow for pretty speedy CSS rebuilds are pulled straight from this article which was based on this github issue.