Where is the scriptsIn function in Laravel 5.4?

Question

I use the scriptsIn function in Laravel 5.3 to combine all Javascript files in assets/js folder. I use the AngularJS 1.x framework to write js files with this structure:

--resources\
-----assets\
--------js\
-----------app.js
-----------controllers\
-----------------....js
-----------directives\...

I combine all js file with Elixir in Laravel 5.3:

elixir(function(mix) {
    mix.sass('app.scss');
    mix.scriptsIn('resources/assets/js'); 
});

However, when I upgraded to Laravel 5.4, Elixir is not supported. Instead, Laravel Mix is used. So, scriptsIn is not available. Is there any function with the same purpose in Laravel 5.4? How to combine all js files?

may be it will help you https://laravel.com/docs/5.4/helpers — Indresh Tayal, Jan 31 '17 at 07:49
@PaladiN: I want combine all js files in assets/js folder and subfolders to app.js and put it into public/js folder — Le Thanh, Jan 31 '17 at 07:58
@IndreshTayal: what function in helpers? In `Laravel` 5.3, `Elixir` compile my js files when run `gulp` command with `scriptsIn` function. However, I don't find this function in Laravel 5.4. Read more in https://laravel.com/docs/5.3/elixir — Le Thanh, Jan 31 '17 at 08:01

score 0 · Accepted Answer · edited May 23 '17 at 11:53

As I understand from your comment, you want to add all the JS files first to app.js and then copy it to public/app.js. To perform this there is a basic example.

I am plucking the piece of code from the example. It is as easy as it used to be:

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

mix.sass('src/app.sass', 'dist')
   .js('src/app.js', 'public');

Compile the Sass file, ./src/app.sass, to ./public/app.sass
Bundle all JavaScript (and any required modules) at ./src/app.js to ./public/app.js.

You could change the path as your directory structure. This should help you.

You need to use the code in Webpack.mix.js. You could have a look at the updated config file in Laravel 5.4.

Edit:

I am not much experienced with Angularjs but i have some experience with Angular2 where we need to create the class and export it and Webpack automatically gets the chunk of the codes and bundles into it's bundle.js.

You could have a look at these solutions provided for angularjs and Webpack:

https://stackoverflow.com/a/26497742/3887342

https://stackoverflow.com/a/27500432/3887342

I use Angularjs. I put `var mainApp= angular.module('mainApp',[...])` in app.js, and controllers (for example, `mainApp.controller('somethingCtrl',...)`) in separated files. I don't have any code to import this controllers into app.js. Do you know how to require them into app.js before bundle by `Laravel Mix`? — Le Thanh, Jan 31 '17 at 08:38

score 0 · Answer 2 · answered Feb 26 '17 at 18:19

Just ran into the same problem when updating to 5.4

elixir(function(mix) {
    mix.sass('app.scss');
    mix.scriptsIn('resources/assets/js'); 
});

now becomes:

const { mix } = require('laravel-mix');

mix.sass('app.scss')
   .combine('resources/assets/js');

Where is the scriptsIn function in Laravel 5.4?

2 Answers2