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

user_1323474 0
Viewed 2045

I want to have admin and user parts of css and js in separate files. What is the best way to do that? I set: `

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');

` but how should my resources folder structure should be to prevent everything from duplicates? Any guide how to minimize, separate or restructure my files to get better performance readability? How to set up laravel mix to build 2 js and 2 css for different usage.

laravel-mix webpack css javascript
1 Answers

Here is what I do using minimist. This works as of Laravel v8 and Laravel Mix v5.

File Structure

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

Install Package

# 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);
}

Run Script

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

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

You can replace the watch script with dev or prod.

Note: Laravel Mix still keeps watching all files under resources, executes compilation whenever any file under the directory is changed.

user_34457240
Related