diverently/laravel-mix-kirby

Laravel Mix辅助工具，用于Kirby CMS

维护者

详细信息

github.com/Diverently/laravel-mix-kirby

源代码

问题

安装次数: 11,549

依赖者: 0

建议者: 1

安全: 0

星标: 23

关注者: 2

分支: 2

开放问题: 1

类型:kirby-plugin

1.4.2 2022-11-05 18:06 UTC

Requires

MIT 26ca2513a107c28479eafd18288e80f62def9fbd

  • Robert Cordes <robert.woop@diverently.com>

This package is auto-updated.

Last update: 2024-09-05 22:06:45 UTC

README

使用mix辅助函数获取由Laravel Mix生成的版本化CSS和JS文件的正确路径。

安装

下载

下载并复制此存储库到site/plugins/laravel-mix-kirby。

Git子模块

git submodule add https://github.com/Diverently/laravel-mix-kirby.git site/plugins/laravel-mix-kirby

Composer

composer require diverently/laravel-mix-kirby

Laravel Mix

您还应该安装Laravel Mix，否则此插件相当无用了；-)有关更多信息，请参阅安装指南，尽管它实际上相当直接

设置

在您的site/config/config.php中，您可以设置两个选项以使此辅助工具与您的特定设置一起工作

diverently.laravel-mix-kirby.manifestPath

辅助函数将在此处查找由Laravel Mix创建的清单。

默认: assets/mix-manifest.json

diverently.laravel-mix-kirby.assetsDirectory

这将被添加到创建最终HTML标签时传递给mix()函数的各个文件路径之前。

默认: assets

选项

mix()辅助函数

mix()辅助函数读取mix-manifest.json文件，并返回带有请求文件正确路径的正确HTML标签。在我们的例子中，我们会这样调用它

<html>
<head>
    <!-- ... -->
    <?php echo mix('/main.css') ?>
    <?php echo mix([
      '/additional.css',
      '@autocss'
    ]) ?>
</head>
<body>
    <!-- ... -->
    <?php echo mix('/main.js') ?>
    <?php echo mix([
      '/additional.js',
      '@autojs'
    ]) ?>
</body>
</html>

实际上就是这样。

开发

  1. 如果您还没有，在项目根目录中创建一个package.json： npm init -y
  2. 安装Laravel Mix: npm install laravel-mix --save-dev
  3. 将webpack.mix.js文件复制到您的根目录： cp node_modules/laravel-mix/setup/webpack.mix.js ./

之后，您就可以开始在项目中使用Laravel Mix了。

webpack.mix.js

有关更多信息，请参阅官方文档。

let mix = require("laravel-mix")
mix.setPublicPath("assets")
mix.browserSync("my-website.dev")
if (mix.inProduction()) {
  mix.version()
}
mix
  .sourceMaps()
  .js("src/js/main.js", "assets")
  .sass("src/css/main.scss", "assets")

NPM脚本

将以下NPM脚本添加到您的package.json

"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": "npm run development -- --watch",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --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"
}

许可协议

MIT

致谢

Robert Cordes

Diverently

这个想法最初来自为Laravel框架创建的mix Blade辅助工具。这仅仅是对Kirby CMS的“翻译”，但是它也会根据您请求的文件类型生成正确的HTML标签。