自动捆绑资产流程，wordpress 主题插件？

Question

我正在寻找管理 wordpress 主题的捆绑资产流程的建议，适合我的主题工作流程结构。

我有很多 COMPONENT，每个 COMPONENT 都有一个专用文件夹，里面有一个 .php 文件，里面有一个 PHP Class，一个“assets " 包含 css 和该组件的 js 文件的文件夹：

|-- /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
    |
     ...

我的示例组件-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’]);

所以当我想渲染它时，我只需调用

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

话虽这么说，但我有大量的 HTTP 请求。我想通过将资产捆绑到两个文件中来减少这个数量：

bundle.css
bundle.js

我从来没有用过，但我知道有 Webpack 可以完成这样的任务。

据我所知，通常使用 Webpack 的方法是将所有资源放在名为“src”的文件夹中，然后运行Webpack 会将捆绑文件创建到“dist”文件夹..

在我的例子中，这意味着将每个 COMPONENT 文件夹中的所有资产手动复制到该“src”文件夹。

这是个问题，因为当我想创建一个新版本的 MY-EXAMPLE-COMPONENT 时，我需要手动检查“src”（用于 Webpack）文件夹，并在必要时删除旧的版本资产，并添加新的版本资产，然后再次捆绑..

我创建工作流程的方式是帮助我的思想，通过将每个组件相互隔离，包括资产。

这么说，我的目标是：

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.

我认为实现我的目标的可能解决方案是：

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.

有什么建议吗？

PS: 为了以防万一，我有一个 Wordpress 标准做事方式的 MY-THEME 版本，所以一个包含所有模板部分的文件夹在一个“模板”文件夹中（全部混合在一起）。一个“资产”文件夹 css 和 js 文件（全部混合在一起），但我想尽量不采用这种方式。

Answer 1

对于未来的读者：

我已经创建了适合我的项目的脚本。

它从我定义的文件夹中获取所有 css 和 js 文件，将它们分组，将所有组合并在一起，使用 babel 和 uglifyjs 处理 js，使用 uglify[= 处理 css 57=]，将结果文件复制回WP主题。

https://github.com/tresorama/wt_theme_node_auto_bundle

您可以克隆和编辑以使其适用于您的文件夹结构。

它是如何工作的？

将 repo 克隆为 WP 主题的 SUBFOLDER，编辑需要编辑的内容（详情如下），使用终端进入该文件夹，然后运行

npm install
npm run production

您需要编辑什么？

在“create-bundle.js”中定义了一些常量。

哪条路？

"create-bundle.js" 是一个包含两件事的文件：

CLONE => 从 const CLONE = {....} 中定义的不同来源复制所有 css 和 js 文件，并将它们粘贴到“src”文件夹中。 你必须适应 const CLONE
BUNDLE - 第 1 步 => 使用 const PREBUNDLE_... 定义的规则，创建一些文件的 minibundle，并将这些 minibundle 放入“pre_bundle”文件夹中，目的是连接具有相同优先级的文件（特别是 css 文件，以保持级联）。 您必须调整 const PREBUNDLE_...
BUNDLE - 第 2 步 => 获取这些 minibundle 文件，再次连接并放入“预处理”fodler，按照“const FINALBUNDLE_...”指定的顺序 您必须调整 const FINALBUNDLE_...

自动捆绑资产流程，wordpress 主题插件？

Auto bundle assets process, wordpress theme-plugin?

php

wordpress

bundle

assets

webpack

我已经创建了适合我的项目的脚本。

它是如何工作的？

您需要编辑什么？

哪条路？