Question L5 bower

Published 3 years ago by JoshWegener

Hello! I was watching this video: https://laracasts.com/series/laravel-5-and-the-front-end/episodes/2

And I noticed that it says it uses L5 and that L5 should coume with a bower.json... I just installed a fresh copy yesterday and there is no bower.json...

But this brings me to my question. So I installed node/npm on my forge server, then I tried to use the bower install but it just sticks the files in the app root folder under bower_compoents, not even in vender like in the video... how do I get it to install into vender??

Thanks!

_stefanzweifel

You can add a .bowerrc file in the root of your project with the following content:

{
    "directory": "resources/vendor"
}

resources/vendor is then your new bower_components folder.

JoshWegener

@_stefanzweifel Should I put it in "vendor/bower_components" ? or "resources/vendor" or "resources/bower_components" ?? I'm not sure where things go yet in L5

bastiaan89

The .bowerrc file that used to come with L5 looked like this:

{
  "directory": "vendor/bower_components"
}

Elixir has this as the default bower directory, used for bootstrap sass for example.

JoshWegener

Getting an error message... here is my gulp file... (Please note, I have have never used gulp before...)

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 Less
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(function(mix) {
    mix.less('app.less')
        .publish(
                'jquery/dist/jquery.min.js',
                'public/js/vendor/jquery.js'
        ).publish(
                'jquery/dist/jquery.min.map',
                'public/js/vendor/jquery.map'
        ).publish(
                'bootstrap-sass-official/assets/javascripts/bootstrap.min.js',
                'public/js/vendor/bootstrap.js'
        ).publish(
                'fontawesome/css/font-awesome.min.css',
                'public/css/vendor/font-awesome.css'
        ).publish(
                'fontawesome/css/font-awesome.css.map',
                'public/css/vendor/font-awesome.css.map'
        ).publish(
                'fontawesome/fonts',
                'public/css/fonts'
        ).publish(
                'angular/angular.min.js',
                'public/js/angular.js'
        ).publish(
                'angular/angular.min.js.map',
                'public/js/angular.js.map'
        );
});

and the error ....

TypeError: Object #<Object> has no method 'publish'
    at /home/forge/default/gulpfile.js:16:3
    at Elixir (/home/forge/default/node_modules/laravel-elixir/index.js:3:5)
    at Object.<anonymous> (/home/forge/default/gulpfile.js:14:1)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Liftoff.handleArguments (/usr/lib/node_modules/gulp/bin/gulp.js:116:3)
usman
usman
3 years ago (121,685 XP)

@JoshWegener publish has been removed use copy method instead.

Please refer to Elixir Documentation: http://laravel.com/docs/5.0/elixir#usage

Relevant Commit: https://github.com/laravel/elixir/commit/b6d59b9f68978224064964a75a7639f95aa2eeee

JoshWegener

@usman Thank you Sir! also updaged my gulp file and added: "resources/vendor/...." prefix to the files.

JoshWegener

@usman, Below is my gulp file after some changes... does that look better? (following the correct formate??)

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

elixir(function(mix) {
    mix.rubySass('app.scss', 'resources/css')
        .copy(
                'vendor/bower_components/jquery/dist/jquery.min.js',
                'resources/js/jquery.js'
        ).copy(
                'vendor/bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.min.js',
                'resources/js/bootstrap.js'
        ).copy(
                'vendor/bower_components/fontawesome/css/font-awesome.min.css',
                'resources/css/font-awesome.css'
        ).copy(
                'vendor/bower_components/fontawesome/fonts',
                'public/css/fonts'
        ).copy(
                'vendor/bower_components/angular/angular.min.js',
                'resources/js/angular.js'
        ).styles([
                'app.css',
                'font-awesome.css'
        ]).scripts([
                'jquery.js',
                'bootstrap.js',
                'angular.js'
        ]);
});
JoshWegener

I now see why "resources/vendor" might be better then "vendor/bower_components" .....

usman
usman
3 years ago (121,685 XP)

@JoshWegener what about this:

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

elixir(function(mix) {
    mix.rubySass('app.scss', 'resources/css')
        .copy(
                'vendor/bower_components/fontawesome/css/font-awesome.min.css',
                'resources/css/font-awesome.css'
        ).copy(
                'vendor/bower_components/fontawesome/fonts',
                'public/css/fonts'
        ).styles([
                'app.css',
                'font-awesome.css'
        ]).scripts([
                'jquery/dist/jquery.min.js',
                'bootstrap/dist/js/bootstrap.min.js',
                'angular/angular.min.js'
        ],'public/js/app.js', 'vendor/bower_components/');
});
unitedworx

Why do you guys copy all those files over the public folder and not merge them together instead to minimize requests and minify them when you are ready to push to production ? doing "gulp --production" will minify as well.

here is my setup and i don't use copy at all (btw i have bower components in resources/lib)

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

elixir.config.registerWatcher("default", "resources/**");
elixir.config.sourcemaps = false;

var frontendStyles = [
    "../lib/bootstrap/dist/css/bootstrap.css",
    "../lib/fancybox/source/jquery.fancybox.css",
    "../lib/validationEngine/css/validationEngine.jquery.css",  
    "../views/css/app.css"
    ];
    
var frontendScripts = [
    "../lib/jquery/dist/jquery.js",
    "../lib/bootstrap/dist/js/bootstrap.js",
    "../lib/fancybox/source/jquery.fancybox.js",
    "../lib/jquery-placeholder/jquery.placeholder.js",
    "../lib/modernizr/modernizr.js",
    "../lib/validationEngine/js/jquery.validationEngine.js",
    "../lib/validationEngine/js/languages/jquery.validationEngine-en.js",
    "../lib/selectivizr/selectivizr.js",    
    "../views/js/app.js"
    ]; 

    
var adminStyles = [
    "../lib/dropzone/dist/dropzone.css",
    "../lib/bootstrap/dist/css/bootstrap.css",
    "../lib/fancybox/source/jquery.fancybox.css",
    "../lib/messenger/build/css/messenger.css",
    "../lib/vex/css/vex.css",
    "../lib/messenger/build/css/messenger-theme-flat.css",
    "../lib/validationEngine/css/validationEngine.jquery.css",  
    "../views/admin/css/app.css"
    ];

   
    
var adminScripts = [
    "../lib/jquery/dist/jquery.js",
    "../lib/tinymce/tinymce.jquery.js",
    "../lib/bootstrap/dist/js/bootstrap.js",
    "../lib/Sortable/Sortable.min.js",
    "../lib/dropzone/dist/dropzone.js",
    "../lib/fancybox/source/jquery.fancybox.js",
    "../lib/messenger/build/js/messenger.js",
    "../lib/vex/js/vex.js",
    "../lib/jquery-placeholder/jquery.placeholder.js",
    "../lib/modernizr/modernizr.js",
    "../lib/validationEngine/js/jquery.validationEngine.js",
    "../lib/validationEngine/js/languages/jquery.validationEngine-en.js",
    "../lib/selectivizr/selectivizr.js",
    "../views/admin/js/app.js"
    ];        

elixir(function(mix) {
    mix
    .styles(frontendStyles, 'public/css/frontend.css')
    .scripts(frontendScripts, 'public/js/frontend.js')
    .styles(adminStyles, 'public/css/backend.css')
    .scripts(adminScripts, 'public/js/backend.js');
});


JoshWegener

This is what I eneded up going with... (for now)

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

elixir(function(mix) {
    mix
        .rubySass('app.scss', 'resources/css')
        .styles([
                'app.css',
                '../vendor/fontawesome/css/font-awesome.min.css'
        ])
        .scripts([
                '../vendor/jquery/dist/jquery.min.js',
                '../vendor/bootstrap-sass-official/assets/javascripts/bootstrap.min.js',
                '../vendor/angular/angular.min.js'
        ])
        .version([
                'css/all.css',
                'js/all.js'
        ])
        .copy(
                'resources/vendor/fontawesome/fonts',
                'public/build/fonts'
        );
});
_stefanzweifel

For styles() and scripts() you could also specify the root folder. I've written about this approach here.

mix.scripts([
    'vendor/package-name/package.js',
    'vendor/antoher-package-name/another-package.js',
    'js/app.js',
], 'public/app.js', 'resources/');

Please sign in or create an account to participate in this conversation.