html - 在 laravel 中处理前端大型项目
问题描述
我们的团队,与 laravel 合作,我们想开始一个大型项目。前端项目将使用 Html Css Bootstrap jquery Sass 编写,我们的 task runner 是 Gulp
我们的项目目录将如何?sass 目录以及我的文件和图像它们去哪里了?
解决方案
你可以使用 Laravel Mix 编译 CSS 和 JavaScript 预处理器。因此,您将所有资产存储到资源/资产文件夹中。
Laravel Mix 提供了一个流畅的 API,用于使用几个常见的 CSS 和 JavaScript 预处理器为您的应用程序定义 webpack 构建步骤。
要使用 laravel mix,您必须先安装node
和npm
.
然后分别在 resources/app/sass 目录和 resources/sass 中创建文件 app.js 和 app.scss。然后打开 webpack.mix.js 文件,该文件将位于您的项目根目录中,在 webpack.mix.js 文件中写入以下代码
在 webpack.mix.js 文件中(你可以在你的项目根目录看到这个文件)
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
现在让我们看看上面两行的含义是什么?
mix.js('resources/assets/js/app.js', 'public/js')
说要读取app.js
内容(存储在 resources/js 目录中),将它们拉出来并在混合后将它们放在 public/js 中。
对于mix.sass
. 由于它使用 SAAS 兼容,因此您可以使用基于 CSS 或 SAAS 的语法来定义您的布局。无论如何,Webpack 将它们编译为单个 CSS。现在在 master.blade.php 中,您只需分别对 JS 和 CSS 资源进行这两个调用:
<script src="{!! asset('js/app.js') !!}"></script>
和
<link rel="stylesheet" href="{!! asset('css/app.css') !!}">
现在运行npm run dev
命令。它将编译您的 CSS 和 JS 文件并将构建放在公共文件夹中。
有关详细说明,您可以查看
https://laravel.com/docs/5.7/mix
https://appdividend.com/2018/02/19/laravel-mix-compiling-assets-tutorial/
推荐阅读
- java - 无法使用 Maven 运行 Spring Hello World 程序
- javascript - 将对象数组推入数组的最佳方法是什么
- installation - 如何运行 WixSilentExecCmdLine 以在后台运行 batfile
- python - 使用 discord.py 获取不和谐服务器中所有成员的列表时出现问题
- sql - 在 SQL Server 中使用 unpivot 时如何解决数据类型长度差异错误?
- javascript - 用于在用户键入时自动格式化电话字段的正则表达式
- c++ - C++ (gcc) dyld:库未加载:@loader_path/libssl.1.1.dylib
- java - 使用 Java AWT 在圆圈中绘制文本(字母方向相应)
- amazon-cloudwatch - AWS Glue 失败时出现“日志组不存在”
- java - Java MD5 Copy 函数生成不同的摘要