TLDR: Try Parcel.
Coming from grunt, I wasn’t really disappointed with my current setup. It worked, was reliable but it felt a little clumsy and slow over time copying more and more features into the tasking chain. Certainly not necessarily grunt’s fault, but I wanted to try something new and slicker. Kinda like a fresh start.
While searching for a CRA like developing experience for developing Wordpress themes, I tried different task managers, bundlers and tooling setups. All promised to do the job and I’m pretty sure they are able to do it, but I was surprised how difficult it seemed to be for me to enable a simple list of features I aimed for. I tried webpack setups, wpack.io, gulp, grunt and parcel and started out with a basic list of demands:
Styling
- SCSS support
- Autoprefixer
- Minification
- Preferable CSS stylesheets and not CSS in JS solutions
- Watching and recompiling
Scripts
- Compiling of modern syntax
- Direct import of npm packages (neither relative nor absolute imports)
- Minification
- Watching and recompiling
… and as a plus
- Auto Reload
- Asset management
New Setup
I ended up being very satisfied with parcel. The setup is super easy
yarn add parcel-bundler --dev
or
npm install parcel-bundler --save-dev
And adding your scripts to your package.json
"scripts": {
"dev": "parcel watch src/js/index.js src/styles/_.scss --public-url /wp-content/themes/THEME/dist",
"build": "parcel build src/js/index.js src/styles/_.scss --public-url /wp-content/themes/THEME/dist"
},
That’s it. It worked out of the box for me with all the features I required. I ended up using v1 of the package, because I ran into compatibility issues with v2, but nothing unsolvable I assume. Since the development is somehow in between two major version, the documentation was sometimes a little bit confusing to me not knowing which version it was referring to, but this little setup above did the trick for me.
What are you using? What are your experiences?
Top comments (2)
After generating the production files, do you change manually the name of your files (css, js..) in your functions.php file ? Like that :
get_template_directory_uri() . "/prod/script-[hash].css" ?
Thank you!
I am learning to build wordpress themes from youtube. Can I ask you a question as I am stuck in the beginning of a very long playlist?