Laravel-mix: Compile multiple js files

Created on 25 Jan 2017  路  6Comments  路  Source: JeffreyWay/laravel-mix

I have an app that uses two different javascript files based on how the site is entered. I have my mix files set up like below. However, whenever I try to compile it the second .js() just overwrites the first file regardless of where the output path is set to.

let mix = require('laravel-mix').mix;

mix.js('resources/assets/js/app.js', 'public/js')
   .extract(['vue','lodash','axios','moment'], 'public/js/vendor.js')
   .js('resources/assets/js/scanner/app.js', 'public/js/scanner/app.js')
   .copy('resources/assets/js/scanner/eb', 'public/js/scanner/eb');

Here is the output from the terminal:

DONE  Compiled successfully in 3104ms

                                 Asset       Size  Chunks                    Chunk Names
            js/scanner/eb/eb.navbar.js  758 bytes          [emitted]
                            /js/app.js    1.21 MB       0  [emitted]  [big]  app
      js/scanner/eb/eb.audiocapture.js    2.78 kB          [emitted]
            js/scanner/eb/eb.camera.js    5.19 kB          [emitted]
       js/scanner/eb/eb.application.js    4.37 kB          [emitted]
        js/scanner/eb/eb.cardreader.js    2.98 kB          [emitted]
           js/scanner/eb/eb.barcode.js    25.8 kB          [emitted]
           js/scanner/eb/eb.battery.js    1.55 kB          [emitted]
js/scanner/eb/eb.connectionchecking.js  772 bytes          [emitted]
          js/scanner/eb/eb.database.js    2.17 kB          [emitted]
            js/scanner/eb/eb.device.js     1.1 kB          [emitted]
  js/scanner/eb/eb.database.sqlite3.js    1.48 kB          [emitted]
   js/scanner/eb/eb.instrumentation.js    3.48 kB          [emitted]
            js/scanner/eb/eb.intent.js  922 bytes          [emitted]
          js/scanner/eb/eb.keystate.js  711 bytes          [emitted]
               js/scanner/eb/eb.log.js    1.78 kB          [emitted]
        js/scanner/eb/eb.keycapture.js  927 bytes          [emitted]
       js/scanner/eb/eb.mediaplayer.js    1.09 kB          [emitted]
        js/scanner/eb/eb.logcapture.js  962 bytes          [emitted]
     js/scanner/eb/eb.nativemenubar.js  776 bytes          [emitted]
      js/scanner/eb/eb.nativetabbar.js    1.15 kB          [emitted]
                     mix-manifest.json   32 bytes          [emitted]
     js/scanner/eb/eb.nativetoolbar.js  977 bytes          [emitted]
      js/scanner/eb/eb.notification.js    1.13 kB          [emitted]
           js/scanner/eb/eb.network.js    2.19 kB          [emitted]
           js/scanner/eb/eb.printer.js    6.31 kB          [emitted]
      js/scanner/eb/eb.printerzebra.js    10.2 kB          [emitted]
              js/scanner/eb/eb.push.js    3.21 kB          [emitted]
           js/scanner/eb/eb.rhofile.js    2.28 kB          [emitted]
 js/scanner/eb/eb.screenorientation.js    1.02 kB          [emitted]
            js/scanner/eb/eb.sensor.js    2.34 kB          [emitted]
         js/scanner/eb/eb.signature.js    1.63 kB          [emitted]
       js/scanner/eb/eb.smartcradle.js    1.71 kB          [emitted]
    js/scanner/eb/eb.system.process.js  900 bytes          [emitted]
             js/scanner/eb/eb.timer.js  839 bytes          [emitted]
            js/scanner/eb/eb.system.js    4.52 kB          [emitted]
           js/scanner/eb/eb.webview.js    1.96 kB          [emitted]
  js/scanner/eb/eb.signalindicators.js    1.04 kB          [emitted]
                js/scanner/eb/ebapi.js    13.7 kB          [emitted]
        js/scanner/eb/ebapi-modules.js     204 kB          [emitted]
             js/scanner/eb/scanner.css  308 bytes          [emitted]
             js/scanner/eb/elements.js     142 kB          [emitted]

Most helpful comment

This can be done by following way:

let mix = require('laravel-mix');

mix
    /*Admin assets*/
   .js('resources/assets/admin/js/admin.js', 'public/admin/js/admin.js')
   .sass('resources/assets/admin/sass/admin.scss', 'public/admin/css/admin.css')

    /*Common assets*/
   .js('resources/assets/common/js/common.js', 'public/common/js/common.js')
   .sass('resources/assets/common/sass/common.scss', 'public/common/css/common.css')

    /*Front-End assets*/
   .js('resources/assets/app/js/app.js', 'public/app/js/app.js')
   .sass('resources/assets/app/sass/app.scss', 'public/app/css/app.css');

Above code will create three folders in public directory name admin, app, common with CSS and JS folders.

Now you can use them in different master layouts for admin panel and front-end.

All 6 comments

It's a bug I'm fixing today. Until then, provide a full output path including the file name for your second mix.js() output

Thank you for the update.

Just so you know. I just recompiled with a different source name and it places the file in public/js instead of public/js/scanner.

myself i just want to know how to add multiple js library files such as jquery, animate,wow, superfish etc to laravel mix

This can be done by following way:

let mix = require('laravel-mix');

mix
    /*Admin assets*/
   .js('resources/assets/admin/js/admin.js', 'public/admin/js/admin.js')
   .sass('resources/assets/admin/sass/admin.scss', 'public/admin/css/admin.css')

    /*Common assets*/
   .js('resources/assets/common/js/common.js', 'public/common/js/common.js')
   .sass('resources/assets/common/sass/common.scss', 'public/common/css/common.css')

    /*Front-End assets*/
   .js('resources/assets/app/js/app.js', 'public/app/js/app.js')
   .sass('resources/assets/app/sass/app.scss', 'public/app/css/app.css');

Above code will create three folders in public directory name admin, app, common with CSS and JS folders.

Now you can use them in different master layouts for admin panel and front-end.

...

Disregard my question, actually it works the issue was in my code :)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

dtheb picture dtheb  路  3Comments

nezaboravi picture nezaboravi  路  3Comments

Micaso picture Micaso  路  3Comments

jpmurray picture jpmurray  路  3Comments

mstralka picture mstralka  路  3Comments