Question

我们的团队，与laravel合作，我们希望启动一个大型项目。前端项目将使用HTML Css Bootstrap jquery Sass编写我们的任务执行者是Gulp

我们的项目目录将如何？ sass目录以及我的文件和图像它们在哪里？

Answer 1

它因项目和框架而异。将东西放到最有意义的地方。如果您正在运行一个使用Laravel作为后端API的独立前端应用程序，则可以很好地利用自己的树来组织您的应用程序。

但是考虑到您使用的是标准的Web技术html，css，jquery和sass，这就是Laravel的基本目的。因此，将刀片模板用于html，并将所有jquery和css放入公共文件夹中。如果您以前没有使用过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文件，并将生成的文件放在公共文件夹中。

有关详细说明，您可以检查