Combine assets with Laravel Mix

December 3, 2017 By - Usama Muneer | 67

    What’s Laravel Mix?

    Laravel Mix is a simple API built around Webpack to facilitate compiling of assets using several CSS and JS pre-processors.

    By default, your Laravel project’s webpack.mix.js contains the following code.

    mix.js('resources/assets/js/app.js', 'public/js')
       .sass('resources/assets/sass/app.scss', 'public/css');
    

    What if you want to chain your included files along with that?

    Well there’s a simple solution to this using mix.combine method.

    For CSS files

    mix.combine([
        'resources/assets/css/styles.min.js',
        'resources/assets/css/main.min.js',
        'resources/assets/css/responsive.min.js',
    ], 'public/css/app.js');
    
    

    For JS files

    mix.combine([
        'resources/assets/js/libs/jquery-3.2.1.min.js',
        'resources/assets/js/libs/sweet_alert.min.js',
        'resources/assets/js/libs/main.js',
        'resources/assets/js/libs/functions.js'
    ], 'public/js/all.js');
    
    
    

    Well that’s it. Give it a try and see if that works out for you.

    If you have any queries regarding this blog, leave us a comment below. You can also follow us on Twitter.

    blog user
    Usama Muneer

    A web enthusiastic, self-motivated & detail-oriented professional Full-Stack Web Developer from Karachi, Pakistan with experience in developing applications using JavaScript, WordPress & Laravel specifically. Loves to write on different web technologies with an equally useful skill to make some sense out of it.

    Related Posts

    In this article, we'll go through the process of adding up the Event Listener on a simple button and compare the methods form both Vanilla JavaScript & Vue JS.

    In this Article, I’ll walk you through the basic yet useful steps to help you setup Gulp workflow in your project’s