Getting CSS and JS packages into Laravel

Hello. So, I'm new to laravel and i'm still learning. Basically I'm trying to include twitter bootstrap, and jquery into my app. I've read some stuff online, but it's left me confused. Too much overwhelming info at once, regarding npm, elixer, gulp, sass, less, coffee etc Anyway..... I've ran npm and it created the folder 'node_modules'. I've included jquery and bootstrap sass into the package.json file. Now ive got 87000 files in that folder?? Is this the best way to access those files?

ejdelmonico

9 years ago

Level 53

Don't worry about the files in node_modules. It is what you requested via package.json all of the necessary dependencies. Essentially, just a bunch of very small files. Now, to use the npm packages, you will do it with Elixir. Basically, you just need to run the copy() method to get them to you resource/assets directory. Here is an example:

var elixir = require('laravel-elixir');
/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */
var paths = {
  'bootstrap'     : 'node_modules/bootstrap-sass/assets/',
  'fonts'         : 'node_modules/bootstrap-sass/assets/fonts/',
  'animate'       : 'node_modules/animate.css/',
  'datetimepicker': 'node_modules/jquery-datetimepicker/'
};
elixir(function(mix) {
  'use strict';
  mix.copy(paths.fonts + 'bootstrap/**', 'public/build/fonts/bootstrap')
      .copy(paths.bootstrap + 'javascripts/bootstrap.js', 'resources/assets/js')
      .copy(paths.bootstrap + 'stylesheets/**', 'resources/assets/sass')
      .copy(paths.animate + 'animate.css', 'resources/assets/sass/_animate.scss')
      .copy(paths.datetimepicker + 'build/jquery.datetimepicker.full.min.js', 'resources/assets/js/datetimepicker.js')
      .copy(paths.datetimepicker + 'jquery.datetimepicker.css', 'resources/assets/sass/_datetimepicker.scss')
      .copy('resources/assets/dictionaries', 'app/build/dictionaries')
      .copy('resources/assets/images', 'public/build/images')
      .sass('app.scss')
      .scripts([
        'jquery.js',
        'bootstrap.js',
        'datetimepicker.js',
        'app.js'
      ])
      .version(['public/css/app.css', 'public/js/all.js']);
});