Masonite 中文文档编译前端资源
Masonite 使用 Laravel Mix，它提供了一种非常简单的方法来处理资产编译，甚至比简单的 SASS 和 LESS 还要好。不过，你不需要成为 Laravel Mix 或 NPM 方面的专家来编译静态资源。
入门
首先，我们可以简单地运行 NPM 安装：
$ npm install这将安装开始编译静态资源所需的一切。
配置
配置设置将在位于项目根目录的webpack.mix.js文件中进行。
你可以看到已经有一个示例配置设置，如下所示：
mix
.js("resources/js/app.js", "storage/compiled/js")
.postCss("resources/css/app.css", "storage/compiled/css", [
//
]);这将移动这两个文件，resources/js/app.js和resources/css/app.css并将它们都编译到storage/compiled目录中.
随意更改文件编译到的目录。有关其他配置值的更多信息，请查看 Laravel Mix 文档
安装 TailwindCSS
Laravel 正在使用 Laravel mix，因此你只需按照 TailwindCSS 官方文档 上的指南为 Laravel Mix 设置 TailwindCSS。
安装 Vue
请直接遵循 Laravel Mix Vue 支持文档 上的指南
编译
现在我们已经配置了静态资源的编译，我们现在可以实际编译它们了。
你可以通过运行：
$ npm run dev这将编译静态资源并将它们放在你放在配置文件中的目录中。
你还可以让 NPM 等待更改并在前端文件中检测到更改时重新编译。这类似于自动重新加载服务器。为此，只需运行：
$ npm run watch版本控制
Laravel Mix 可以在将资源发布到生产环境时处理文件哈希，方法是在你的资源中添加哈希后缀
加载资源时自动破坏缓存。要启用此功能，你可以在 webpack.mix.js 文件中添加以下内容：
if (mix.inProduction()) {
mix.version();
}Laravel Mix 版本控制 中有关此功能的更多信息。
在 Laravel Mix 编译完你的资源之后，你将无法知道你应该在视图中使用的确切文件名（因为哈希）来引用你的资源。你可以使用 Masonite mix() 帮助程序来解析资源的正确文件路径。
<script src="{{ mix('resources/js/app.js') }}"></script>本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。
关于 LearnKu
粤公网安备 44030502004330号