I‘m curious about whether anyone here has been successful at using Jekyll along with Parcel 2 as a task runner to remove unused css (from Bootstrap or Tailwind); minify css, html, js etc. I like Parcel for the ease-of-use, zero config, but I cannot get it to play well with Jekyll. I would love to see a repo showing me how to get it to work. Any help would be appreciated.
Hi
I have a suggested approach for you.
Set up your JS files:
e.g.
assets/
js/
main.js
foo.js
// main.js
import { Foo } from "./foo.js"
Foo()
// foo.js
export function Foo() {
console.log("Hello")
}
Run your CLI steps. In this case I target the entrypoint JS script and everything it imports will be added to the same output script.
$ npx parcel build assets/js/main.js
$ mv dist/main.js assets/js/bundle.js
Add bundle.js to your .gitignore file so you don’t commit it. It must be generated locally or on the remote each time. Also add .parcel-cache.
.jekyll-cache/
.sass-cache/
.jekyll-metadata
.bundle/
vendor/
_site/
assets/js/bundle.js
.parcel-cache
Use the bundle in Jekyll. If you use link tag, it will fail if the script does not exist, which is a good thing.
<script src="{% link assets/js/bundle.js %}"></script>
And run Jekyll
$ bundle exec jekyll serve --trace
$ bundle exec jekyll build --trace
That will copy index.html and assets/js/bundle.js to your _site directory. The other JS files will be copied to but you actually only load the one bundle on the frontend.
For interest, see a Jekyll Webpack template
Thank you, Michael. I’ll give this a try. Also, thanks for the link to the Webpack template. I cloned the repo for the Jekyll-Webpack-Boilerplate and followed the directions to serve it up… nothing but errors. It’s 5 years old so I guess it needs updating. Webpack is just too much work anyway. I like the simplicity of Parcel. Hopefully your suggestions work. I’ll attempt to create a repo using Jekyll and Parcel and send you the link.
1 Like
Okay sorry about that not working
Also note you’ll need to use GH Actions or Netlify or similar. See Deploy section of Jekyll docs.
This is because you need to run NPM CLI in your build flow and GH Pages does not support this.
I don’t think you’ll have a problem with my approach. Haven’t used Parcel before this but got the command to output a file.
And once you have the bundle you can load it on the frontend.
I’d also recommend using ES Modules If you aren’t already. The idea is that you can do imports between your JS files even though they get loaded in the browser and not by Node. And this means if you bundle the entry point then all the imported scripts also get added automatically.
If you don’t need ES Modules, then you will have to run Parcel against multiple JS files `npx parcel build *.js" and still get a single bundle file. I could not find docs on Parcel CLI help to support this so don’t know if it works. But it is standard I think in Webpack.
For CSS maybe let Jekyll convert from SCSS to CSS and do the bundling and minifying?
I would also recommend looking into ES Build as a modern alternative. It is built in Go and is several times faster than Webpack and 10-100x faster than Parcel as covered on their homepage
Thank you Michael for all your helpful advice.
So I took a look at the ES Build and your cheat sheets. You have put a lot of work into creating the cheat sheets and I really appreciate everything you have done. However, I’m not ready to learn another program at this point. I’m really looking for a way to make an existing static website (built on Jekyll) faster by removing unused Bootstrap css and then minifying the resulting css as well as the html and javascript. There has to be an easier way to do this!
I’ve looked at using Jekyll plugins but most of them are really old and not maintained anymore. I have also looked at using TailwindCSS instead of Bootstrap; out of the box Tailwind works with PurgeCSS and there are several repos showing how to use TailwindCSS with Jekyll. But that would mean rewriting the entire 100+ page website using Tailwind styles. That requires way too much time and that is something I don’t have a lot of these days.
1 Like
Oh right I forgot about removing unused CSS.
You can also try using Netlify’s plugins if you switch to Netlify and tick some boxes under Build & Deploy settings. No code changes needed.
I don’t know how to know PurgeCSS.
At the least you can see if you can import just the CSS files you need from Bootstrap (I there are like 4 assets and one is JS)