Auto bundle assets process, wordpress theme-plugin?

Question

I'm looking for advice to manage the bundle assets process of a wordpress theme, suited to my theme workflow structure.

I ve a lot of COMPONENT, for every COMPONENT there is a dedicated folder, inside that there is a .php file that own a PHP Class, an "assets" folder with css and js file for that component:

|-- /wp-content/themes/MY-EXMPLE-THEME/xxx/xxx/ALL-COMPONENT
    |-- MY-EXAMPLE-COMPONENT
    |   |-- my-example-component-class.php
    |   |-- templates
    |       |-- my-example-component-template-part.php
    |   |-- assets
    |       |-- my-example-component-style.css
    |       |-- my-example-component-script.js
    |
    |-- MY-EXAMPLE-COMPONENT-2
    |   |-- my-example-component-2-class.php
    |   |-- templates
    |       |-- my-example-component-2-template-part.php
    |   |-- assets
    |       |-- my-example-component-2-style.css
    |       |-- my-example-component-2-script.js
    |
     ...

my-example-component-class.php

Class MY_EXAMPLE_COMPONENT {

    public static function init() {
      self::initialize_assets();
    }

    public static function initialize_assets() {
      wp_enqueue_style( ".../assets/my-example-component-style.css", ...);
      wp_enqueue_script(".../assets/my-example-component-script.js", ...)
    }

    public static function render() {
      get_template_part(".../templates/my-example-component-template-part");
    }

}

add_action( ‘init’, [ ‘MY_EXAMPLE_COMPONENT’, ‘init’]);

So when i want to render it i simply call

<?php MY_EXAMPLE_COMPONENT::render(); ?>

Said so, i ve a large amount of HTTP Requests. I'd like to reduce that amount by bundling assets into only two files:

bundle.css
bundle.js

I’ve never used but i know that there is Webpack for a task like this.

For what i know , a usual way of utilize Webpack is to put all the assets in a “src” named folder, then run Webpack and it will create the bundled files to a “dist” folder..

In my case this means copyng all the assets from every COMPONENT folder to that "src" folder, manually.

This is a problem, because when i want for example create a new version of the MY-EXAMPLE-COMPONENT, i need to manually check the "src" (for Webpack) folder and , if necessary, delete the old version assets , and adding the new version assets, then bundle again..

The Way i created my Workflow is to help my mind , by having every COMPONENT isolated by the other, assets included.

Said so , my goals are:

1. Maintain my workflow folder structure.
2. Have a way of auto bundle all the component assets togheter without manually cloning these files to the “src” ( for Webpack ) folder.

Possible solutions that i thought , to achive my goal are:

1_ Create a script ( in PHP or in NODE ) that , creates an empty “src” folder, then search for assets in components folders and auto copy all the matches to the src folder, then i manually run webpack.

2_ Do the same process ( empty “src” folder -> cloning there all assets ) via Webpack.

Any suggestions ?

PS: Just in case , i ve a version of MY-THEME in Wordpress standard way of doing things, so a folder with all the template part in a “template” folder ( all mixed together )., an “assets” folder with css and js files (all mixed toghtere) , but id like to try to not adopt that way.

Answer 1

For future readers:

I've created the script suited for my project.

It get all css and js files from folders that i defined, divide them in group, merge all the group togheter, process js with babel and uglifyjs, process css with uglifycss, and copy the results files back to WP theme.

https://github.com/tresorama/wt_theme_node_auto_bundle

You can clone and edit to make it works with your folder structure.

How it works?

Clone the repo as SUBFOLDER of your WP theme, edit what need to be edited ( details below), enter to that folder with terminal, and run

npm install
npm run production

What you need to edit ?

some const defined inside "create-bundle.js".

In which way ?

"create-bundle.js" is a a file that make two things:

1. CLONE => copy all css and js file from different sources defined in a const CLONE = {....} and paste them into a "src" folder. YOU must adapt const CLONE

2. BUNDLE - Step 1 => Using rules defined by const PREBUNDLE_... , create some minibundle of files , and put these minibundle inside "pre_bundle" folder, with the purpose of concat files with same priority ( especially for css files , in order to maintain the cascade ). YOU must adapt const PREBUNDLE_...

3. BUNDLE - Step 2 => get these minibundle files, concat again and put in "preprocess" fodler, in order specified by "const FINALBUNDLE_..." YOU must adapt const FINALBUNDLE_...