How do you include files from node_modules in elixir?

Copy file to assets folder first? Like scss example.
Reference file directly in node_modules directory? Like js example.
Something else entirely?

var elixir = require('laravel-elixir');

elixir(function(mix) {
    mix.copy('node_modules/sweetalert/dist/sweetalert.css', 'resources/assets/sass/sweetalert.scss');

    mix.sass('app.scss')
        .version('css/app.css');

    mix.scripts([
        '../../../node_modules/sweetalert/dist/sweetalert.min.js'
    ], 'public/js/app.js');
});

Let me know how your are doing it.

Thanks. --Jeff

frezno

10 years ago

Level 36

@quickliketurtle

here's an example using node_module and bower_components:

var elixir = require('laravel-elixir');

elixir(function(mix) {

    mix.copy(
        'node_modules/bootstrap-sass/assets/javascripts/bootstrap.js',
        'resources/assets/js'
    ).copy(
        'vendor/bower_components/sweetalert/dist/sweetalert-dev.js',
        'resources/assets/js/libs'
    ).copy(
        'vendor/bower_components/sweetalert/dist/sweetalert.css',
        'resources/assets/css/libs'
    );

    mix.sass('app.scss',
             'public/assets/css/app.css')
       .styles([
            'libs/sweetalert.css'
        ],  'public/assets/css/libs.css')
       .scripts([
            'bootstrap.js'
        ],  'public/assets/js/app.js')
        .scripts([
            'libs/sweetalert-dev.js'
        ],  'public/assets/js/libs.js');
});

2 likes

zachleigh

10 years ago

Level 47

I use browserify. I require all my node modules in my main app.js file and then run it through elixir browserify.

ejdelmonico

10 years ago

Level 53

I just use something like this....

var paths = {
 'bootstrap': 'node_modules/bootstrap-sass/assets/',
 'fonts': 'node_modules/bootstrap-sass/assets/fonts/'
};


elixir(function(mix) {
 mix.sass('app.scss')
     .copy(paths.fonts + 'bootstrap/**', 'public/build/fonts/bootstrap')
     .copy(paths.bootstrap + 'javascripts/bootstrap.js', 'resources/assets/js')
     .copy('resources/assets/js/analyticstracker.js', 'public/js')
     .scripts([
      "jquery.js",
      "bootstrap.js",
      "app.js"
     ])
     .version(["public/css/app.css", "public/js/all.js"])
     .copy('resources/json' , 'public/json');
});

5 likes

ejdelmonico

10 years ago

Level 53

And, sometimes like this...

var paths = {
    'foundation': 'vendor/zurb/foundation/'
};

elixir(function(mix) {
    mix.copy(paths.foundation + 'js/**', 'resources/assets/js')
        .copy('resources/assets/js/modernizr.js', 'public/js')
        .copy('resources/assets/js/placeholder.js', 'public/js')
        .copy('resources/assets/js/drawmap.js', 'public/js')
        .copy('resources/assets/js/analyticstracker.js', 'public/js')
        .copy(paths.foundation + 'scss/**', 'resources/assets/sass')
        .copy('resources/assets/fonts', 'public/build/css/fonts')
        .copy('resources/assets/downloads/**', 'public/downloads')
        .copy('resources/assets/images', 'public/build/images');
    });

elixir(function(mix) {
    mix.sass('app.scss')
        .scripts([
            'jquery.js',
            'fastclick.js',
            'foundation.min.js',
            'jquery.quickfit.js',
            'jquery.lazyload.js',
            'jquery.scrollUp.js',
            'jquery.datetimepicker.full.js',
            'app.js'
            ], 'public/js/all.js')
        .scripts([
            'moment.js',
            'index.js'
            ], 'public/js/home.js')
        .version(['css/app.css', 'js/all.js', 'js/home.js']);
    });

2 likes

farreal

6 years ago

Level 1

Thanks for asking this. I found this after searching for a similar issue I was having 😝

My resolution was fairly simple in the end and it just required a copy function to move the files to the correct location after a gulp. I got around it by adding this to my Elixir file:

// Copy webfonts from node modules and add to assets
elixir(function(mix) {
    mix.copy(
        'node_modules/@fortawesome/fontawesome-free/webfonts',
        'assets/fonts/fontawesome'
    );
});

Hope this helps anyone else with this issue in the future 😄

Please or to participate in this conversation.