psaunders's avatar

Mix All JS In Directory

I have a project that has a large number of JS files in a directory structure, I was using scriptsIn() on the directory with Elixr. Looking at the Mix repo it looks like that functionality has been removed and wildcards don't work.

Is there a better way then managing links to 100 files ?

0 likes
7 replies
ejdelmonico's avatar
Level 53

Look at the docs here

mix.combine(['one.js', 'two.js'], 'merged.js');

You should be able to use a wildcard as well like *.js

1 like
psaunders's avatar

Yeah, so the thing that was throwing me off is the .js function doesn't work with wildcards:

mix.js('directory/*.js', 'merged.js')
mix.js('**/*.js', 'merged.js')

But mix.babel, mix.scripts and mix.combine do so you can just use the appropriate one.

1 like
imajkumar's avatar

Any one suggest me how to add all js and css files of any admin theme in laravel with mix

imajkumar's avatar

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');
mix.combine([
    'public/css/bootstrap.min.css', 
    'public/css/style.css',
    'public/css/animate.css'
], 'public/css/app.css');
mix.combine([
    'public/js/jquery-2.1.1.js',
    'public/js/bootstrap.min.js',
    'public/js/plugins/metisMenu/jquery.metisMenu.js',
    'public/js/plugins/slimscroll/jquery.slimscroll.min.js',    
    'public/js/plugins/pace/pace.min.js'
], 'public/js/app.js');
amm's avatar
let fs = require('fs');

let getFiles = function (dir) {
    // get all 'files' in this directory
    // filter directories
    return fs.readdirSync(dir).filter(file => {
        return fs.statSync(`${dir}/${file}`).isFile();
    });
};

getFiles('directory').forEach(function (filepath) {
    mix.js('directory/' + filepath, 'js');
});
4 likes
razr.j's avatar

inspired by @amm:

This will discover subfolder as well. Further you may specify the file ending you are looking for and then call the corresponding mix method.

const path = '...' // the path you want to discover

let fs = require('fs');

function discover(dir, type) {
    let jsFiles = []
    fs.readdirSync(dir).forEach(file => {
        let fileName = `${dir}/${file}`
        if(fs.statSync(fileName).isFile()) {
            if (fileName.endsWith(type)) {
                jsFiles.push(fileName)
            }
        } else {
            jsFiles = jsFiles.concat(discover(fileName, type))
        }
    })
    return jsFiles
}

discover(path, '.js').forEach(file => {
    mix.js(file, 'public')
})
1 like

Please or to participate in this conversation.