问题描述
我正在寻找建议来管理适合我的主题工作流结构的wordpress主题的捆绑资产流程。
我有很多组件，每个组件都有一个专用文件夹，在其中有一个.php文件，它拥有一个PHP类，一个包含该组件的css和js文件的“ assets”文件夹：
|-- /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’]);
因此，当我要渲染它时，我只需调用
<?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版本，因此，一个包含所有模板部分的文件夹位于一个“ template”文件夹中（全部混合在一起）。一个带有CSS和js的“ assets”文件夹文件（全部混合在一起），但id喜欢尝试不采用这种方式。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）