DEV Community

loading...

A relief - updating my Wordpress theme development setup

khnn profile image khnn ・2 min read

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?

Photo by Markus Winkler

Discussion (1)

pic
Editor guide
Collapse
isamax profile image
IsaMax

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!