Laravel 混合，如何为前端和管理部分设置不同的 css 和 js？

Question

我想将 css 和 js 的管理和用户部分放在单独的文件中。最好的方法是什么？我设置：`

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/admin/admin.js', 'public/js/admin')
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/admin.scss', 'public/css/admin');

` 但我的资源文件夹结构应该如何防止重复？任何指南如何最小化、分离或重组我的文件以获得更好的性能可读性？如何设置 laravel 混合构建 2 个 js 和 2 个 css 用于不同的用途。

Answer 1

在/public中创建两个文件夹

前端风格的第一个 (user) : /public/frontend/
第二个用于后端样式 (admin)：/public/backend/

然后把你所有的样式、图片、js都放在这些文件夹里

Answer 2

这是我使用 minimist 所做的。这适用于 Laravel v8 和 Laravel Mix v5.

文件结构

resources
├── js
│   ├── app.js
│   └── admin.js
└── sass
    ├── app.scss
    └── admin.scss

安装包

# NPM
% npm install minimist --save-dev

# YARN
% yarn add minimist --dev

webpack.mix.js

const mix = require('laravel-mix');
const argv = require('minimist')(process.argv.slice(2));

const src = {
  user: {
    js: 'resources/js/app.js',
    sass: 'resources/sass/app.scss'
  },
  admin: {
    js: 'resources/js/admin.js',
    sass: 'resources/sass/admin.scss'
  }
}
const dest = {
  js: 'public/js',
  sass: 'public/css'
}
// For User
if (argv.user) {
    mix.js(src.user.js, dest.js) // Output: public/js/app.js
       .sass(src.user.sass, dest.sass); // Output: public/css/app.css
}
// For Admin
else if (argv.admin) {
    mix.js(src.admin.js, dest.js) // Output: public/js/admin.js
       .sass(src.admin.sass, dest.sass); // Output: public/css/admin.css
}
// Both
else {
    mix.js(src.user.js, dest.js)
       .js(src.admin.js, dest.js)
       .sass(src.user.sass dest.sass)
       .sass(src.admin.sass, dest.sass);
}

运行脚本

# NPM
% npm run watch --user
% npm run watch --admin

# YARN
% yarn watch --user
% yarn watch --admin

您可以将 watch 脚本替换为 dev 或 prod。

注意: Laravel Mix 仍然会监视resources 下的所有文件，每当目录下的任何文件发生更改时执行编译。

Laravel 混合，如何为前端和管理部分设置不同的 css 和 js？

Laravel mix, How to set up different css and js for frontend and admin sections?

javascript

css

webpack

laravel-mix

文件结构

安装包

webpack.mix.js

运行脚本

Laravel 混合，如何为前端和管理部分设置不同的 css 和 js？

Laravel mix, How to set up different css and js for frontend and admin sections?

javascript

css

webpack

laravel-mix

文件结构

安装包

webpack.mix.js

运行 脚本

运行脚本