在 laravel 中处理前端大型项目

Question

我们的团队，与 laravel 一起工作，我们想开始一个大型项目。前端项目会写成 Html Css Bootstrap jquery Sass 我们的任务执行者是 Gulp

我们的项目目录会怎样？ sass 目录以及我的文件和图像它们去了哪里？

Answer 1

它因项目和框架而异。把东西放在你觉得最有意义的地方。如果您是运行一个使用 Laravel 作为后端 API 的独立前端应用程序，您可能会用它自己的树很好地组织您的应用程序。

但考虑到您使用的是标准网络技术 html、css、jquery 和 sass，这就是 Laravel基本上是为.因此，对 html 使用 blade-templates，并将所有 jquery 和 css 放入 public 文件夹中。如果您之前没有使用过 Laravel，您可能应该仔细阅读一系列教程以了解其 MVC 结构。

Answer 2

您可以使用 Laravel Mix 来编译 CSS 和 JavaScript 预处理器。因此，您会将所有资产存储到 resources/assets 文件夹中。

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 文件并将构建文件放入 public 文件夹中。

详细解释可以查看

https://laravel.com/docs/5.7/mix

https://appdividend.com/2018/02/19/laravel-mix-compiling-assets-tutorial/

在 laravel 中处理前端大型项目

handle front-end large scale project in laravel

html

css

laravel

sass

large-scale