README

为Laravel Mix在Craft CMS模板中的辅助插件。

要求

Craft CMS 3.7+
PHP
Node.js 6+

安装

要安装插件，请按照以下说明操作。

打开您的终端并转到您的 Craft 项目

cd /path/to/project

然后告诉 Composer 加载插件

composer require delaneymethod/craft-mix

在 Craft 控制面板中，转到设置 → 插件，然后点击 Craft Mix 的 "安装" 按钮。
创建一个包含以下内容的 package.json 文件，以安装 Laravel Mix 依赖项并配置资产构建任务。

{
	"private": true,
	"scripts": {
		"dev": "npm run development",
		"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
		"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
		"watch-poll": "npm run watch -- --watch-poll",
		"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
		"prod": "npm run production",
		"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
	},
	"devDependencies": {
		"cross-env": "^7.0.3",
		"laravel-mix": "^6.0.41"
	}
}

使用 npm 或 yarn 安装 Node.js 依赖项。

npm install # OR yarn install

配置

要配置 Craft Mix，请转到 Craft 控制面板中的设置 → 插件 → Craft Mix。

可用的设置包括

公共路径 - 包含 index.php 的公共目录的路径
资产路径 - Laravel Mix 存储编译文件的资产目录的路径

为了演示该插件的使用，让我们想象一个具有以下目录结构的项目。

...
assets/
  js/
    global.js
  scss/
    global.scss
web/
  assets/
    js/
    css/
...

在项目的根目录中创建一个 webpack.mix.js 文件来配置 Laravel Mix 以构建您的资产。有关配置细节和更多选项，请参阅Laravel Mix 文档。务必配置 publicPath 选项以指向您将从中提供静态资产的目录（图像、字体、JavaScript 和 CSS）。以下是一个示例配置，作为起点，它适用于之前描述的项目结构

const del = require('del');
const { mix } = require('laravel-mix');

del(['web/assets/**', '!web/assets']);

mix.setPublicPath('web/assets');

if (mix.inProduction) {
    mix.disableNotifications();
}

if (!mix.inProduction) {
	mix.sourceMaps();
}

mix.options({
	processCssUrls: false
});

mix.sass('assets/sass/global.scss', 'web/assets/css/global.css');

mix.js('assets/js/global.js', 'web/assets/js/global.js');

mix.copy('assets/fonts', 'web/assets/fonts');

mix.copy('assets/img', 'web/assets/img');

mix.version();

使用方法

此插件的主要目的是提供模板辅助函数，在已知的构建资产路径和构建后的实际资产路径之间进行转换（这取决于构建模式）。您可以从 CraftCMS 的 Twig 模板中以三种主要方式使用 Mix

{# Twig Filter #}
<script type="text/javascript" src="{{ 'js/global.js' | mix }}"></script>

<link rel="stylesheet" href="{{ 'css/global.css' | mix }}">

{# Twig Function #}
<script type="text/javascript" src="{{ mix('js/global.js') }}"></script>

<link rel="stylesheet" href="{{ mix('css/global.cs') }}">

{# CraftCMS Variable #}
<script type="text/javascript" src="{{ craft.mix.withTag('js/global.js') }}"></script>

{{ craft.mix.withTag(\'css/global.css\') | raw }}

// include the content of a versioned file inline.
{{ craft.mix.withTag(\'css/global.css\', true) | raw }}

您可以在不同的模式下运行 Mix，该插件在每个模式下的工作方式都不同，如下文所述。

开发模式

开发模式将您的资产构建到开发环境中。根据您如何配置 Mix，这可能会绕过仅针对生产环境设计的某些构建指令。在示例 webpack.mix.js 文件中，我们仅在生产模式下对资产进行版本控制，用于缓存清除或类似用途。您可以使用我们在 package.json 文件中添加的 npm 脚本来构建开发模式的资产

npm run dev

监视模式

功能与开发模式类似，但 Mix 将作为 NodeJS 的前台进程继续运行，并在检测到源文件更改时构建资产。

npm run watch

热模块替换模式

构建您的资产并运行 Webpack 开发服务器以允许热模块替换。它与Laravel Mix 文档中描述的内容非常相似。要运行 HMR 模式，请运行以下命令

npm run hot

生产模式

或将您的资产捆绑以供生产

npm run production

版权信息

Sean Delaney

关于DelaneyMethod

DelaneyMethod是一家全栈网络开发代理机构，以务实、高效的态度完成项目，有可靠的业绩记录。了解我们更多信息，请访问我们的网站。

许可证

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

delaneymethod / craft-mix

维护者

详细信息