Bower ?

[prigal]

Hi,

This issue is just an idea for future releases to make the starter kit more flexible.

Bootstrap is "pre-packaged" in your app, so when we clone your repo we will have a specific version of bootstrap you choose.

Why not using Bower to install it after cloning, and write an Elixir recipe to handle it from where it's installed ?

source : http://www.codeheaps.com/php-programming/creating-website-using-laravel-5-elixir-assets/

Thanks for your work :)

[Zemke]

Good idea, I like it. I will leave it here for some others to add their thoughts.

[prigal]

This morning I worked on it.

So now, not only Bootstrap but even Angular and its modules are managed with bower.

Steps to reproduce :

create a bower.json

{
  "name": "app",
  "version": "0.0.0",
  "homepage": "http://www.app.com",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular": "1.4.2",
    "angular-route": "1.4.2",
    "angular-resource": "1.4.2",
    "ngstorage": "~0.3.7",
    "bootstrap": "~3.3.5"
  }
}

Then

bower install

Change your gulpfile.js to :

var elixir = require('laravel-elixir');
// require('laravel-elixir-livereload');
/*
 |--------------------------------------------------------------------------
 | 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'
    )
    .styles([
      'style.css'
    ])
    .scripts([
      '../../../bower_components/jquery/dist/jquery.js',
      '../../../bower_components/angular/angular.js',
      '../../../bower_components/ngstorage/ngStorage.js',
      '../../../bower_components/angular-route/angular-route.js',
      '../../../bower_components/angular-resource/angular-resource.js',
      '../../../bower_components/bootstrap/dist/js/bootstrap.js',
      'app.js',
      'appRoutes.js',
      'controllers/**/*.js',
      'services/**/*.js',
      'directives/**/*.js'
    ])
    .version([
      'css/all.css',
      'js/all.js'
    ])
    .copy(
      'public/js/all.js.map', 'public/build/js/all.js.map'
    )
    .copy(
      'public/css/all.css.map', 'public/build/css/all.css.map'
    );
    //.livereload();
});

Run

gulp && gulp watch

et voilà, everything is versioned.

You can safely delete (no longer used) :

• resources/assets/less/bootstrap*
• resources/assets/js/libs*

You have to modify the path to bootstrap in app.less and you can add a resources/assets/less/variables.less file to customize bootstrap styles and import it in your app.less file after the bootsrap import :

@import "../../../bower_components/bootstrap/less/bootstrap";

@import "variables.less";

[...]

Now, each time you need a new angular module or other front end stuff, just run

bower install yourStuff --save

It will be installed in bower_components. Don't forget to add it to your gulp file.

NB : to complete this, install livereload on chrome, laravel-elixir-livereload and uncomment second and last lines in my gulpfile.

[boadude]

Excelent!

[Zemke]

Great work, @pierrerigal!

I thought of making this part of the repo by default. Though I think this repo should be as close as possible to what Laravel and AngularJS are like out of the box in order to focus on the Laravel/AngularJS implementation and not adding any other "complexities".

What I have in my mind is a collection of pull requests of prototypes that demonstrate some certain scenarios, possibilities and expansion capabilities of this fundamental repo.

Could you do a PR for the Bower integration? I would appreciate it very much. Thank you!

[prigal]

Done :)