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 mix来构建用于不同用途的2个js和2个CSS。

Answer 1

这是我使用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下的所有文件，只要目录下的任何文件被更改，便执行编译。

Answer 2

在 / public

中创建两个文件夹

第一个前端样式（ user ）： / public / frontend /
，第二种是后端样式（ admin ）： / public / backend /

并将所有样式，图片和js放在这些文件夹中

Laravel Mix，如何为前端和管理部分设置不同的CSS和JS？

2 个答案:

文件结构

安装软件包

webpack.mix.js

运行脚本