README

提供与您的 CakePHP 应用程序 和 Laravel Mix 的集成。

此分支与 CakePHP 5.0+ 兼容，有关更多详细信息，请参阅 版本映射。

❤️ 支持开发

喜欢这个项目吗？通过捐赠支持它

或者 Paypal 我

或者

关注我

• GitHub
• LinkedIn
• Twitter

安装

1. 使用 composer 安装 AssetMix 插件

   通过 composer

   composer require ishanvyas22/asset-mix

2. 使用以下命令加载插件

   bin/cake plugin load AssetMix

3. 生成基本的 JavaScript、CSS 和 Sass 框架:

   bin/cake asset_mix generate

   注意：上述命令将生成 vue 的框架，但您也可以生成 Bootstrap/jQuery、React 或 Inertia 框架。

4. 安装前端依赖

   • 使用 npm

   npm install

   或

   • 使用 yarn

   yarn install

5. 编译您的资产

   • 开发环境

   npm run dev

   • 监控更改

   npm run watch

   • 生产环境

   npm run prod

6. 将插件中的 AssetMix 辅助程序加载到您的 AppView.php 文件中

   $this->loadHelper('AssetMix.AssetMix');

用法

在 Laravel Mix 中编译您的资产（js、css）后，它会在您的 webroot 目录中创建一个 mix-manifest.json 文件，其中包含映射文件的信息。

• 生成编译的 JavaScript 文件（s）的脚本标签

echo $this->AssetMix->script('app');

上述代码将渲染

<script src="/js/app.js" defer="defer"></script>

如您所见，它与 HtmlHelper 的工作方式相同。不需要提供完整路径或甚至文件扩展名。

• 生成编译的 CSS 文件（s）的样式标签

echo $this->AssetMix->css('main');

输出

<link rel="stylesheet" href="/css/main.css">

如果启用了 版本控制，输出将如下所示

<link rel="stylesheet" href="/css/main.css?id=9c4259d5465e35535a2a">

生成命令

生成命令用于为您的前端应用生成起始代码，以便您开始开发。

获取帮助

bin/cake asset_mix -h

生成默认的框架（带有 vue）

bin/cake asset_mix generate

上述命令将生成

• package.json
• webpack.mix.js
• assets/
  • css/
  • js/
  • sass/

assets/ 目录是您将存储将编译到相应 webroot/ 目录的 js、css 文件的目录。

自定义目录名称

bin/cake asset_mix generate --dir=resources

您还可以使用自定义目录名称而不是默认的 assets 目录，上述命令将创建 resources 目录，您可以在其中放置您的 js、css 等资产文件。

不想使用 Vue.js？不用担心，此插件不会强制您使用哪个 JavaScript 库。此插件提供了快速生成 Vue、Bootstrap 以及 React 框架的能力。

生成基本的 Bootstrap/jQuery 框架

bin/cake asset_mix generate bootstrap

生成 React 框架

bin/cake asset_mix generate react

为 Inertia.js 生成脚手架

# for vue
bin/cake asset_mix generate inertia-vue

# or for react
bin/cake asset_mix generate inertia-react

在 resources 目录内生成 React 脚手架

bin/cake asset_mix generate react --dir=resources

从子目录中提供 CakePHP 服务

请参阅 docs/ServingFromSubdirectory

版本映射

变更日志

有关最近更改的更多信息，请参阅 CHANGELOG

参考

要查看此插件的实际应用，您可以参考这个 项目，它将提供更多见解。

许可证

MIT 许可证 (MIT)。有关更多信息，请参阅 许可证文件