Bower and Elixir

Posted: 2015-07-07 00:43:30

Trying to make this workflow more easy. Right now it seems that since bower ends up putting all assets into bower_components (css and js) and elixir wants assets by default in resources/assets/css and js that I need to have an easy way to get the files via bower and then get them to the needed folders.

For most project we actually leave the files in the git repo for faster ui testing builds and we rarely run updates but when we do it would be nice for bower to also be able to work and not mess any of the above settings not cause me to have to manually move files around.

Setting up Bower

Following this https://github.com/blittle/bower-installer I have bower-installer ready to go.

Then I setup my bower.json to get my long list of way to many files ready to gulp / elixir

{
  "name": "demo",
  "version": "0.0.0",
  "homepage": "https://github.com/alnutile/demo",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "install": {
    "path": {
      "css": "resources/assets/css/vendor",
      "js": "resources/assets/js/vendor"
    }
  },
  "dependencies": {
    "angular": "1.3.*",
    "angular-bootstrap": "0.11.*",
    "angular-animate": "1.3.*",
    "angular-sanitize": "1.3.*",
    "angular-resource": "1.3.*",
    "restangular": "1.4.0",
    "ng-flow": "~2",
    "angular-xeditable": "~0.1.8",
    "jquery": "2.1.1",
    "bootstrap": "~3.2.0",
    "checklist-model": "0.1.3",
    "pace": "0.5.*",
    "moment": "latest",
    "jasny-bootstrap": "*",
    "angular-ui-router": "*",
    "angularjs-toaster": "~0.4.10",
    "angular-strap": "~2.1.6",
    "iCheck": "~1.0.2",
    "angular-spinner": "~0.6.1",
    "fontawesome": "~4.3.0",
    "ng-table": "~0.5.4",
    "angular-ui-select": "~0.11.2",
    "jquery-ui": "~1.11.4"
  }
}

Now I have bower_components which I do not need or push around anymore (thanks to this) but I also have resources/assets/js and resources/assets/css which I can now keep in the repo saving up npm and bower speed issues when running acceptance tests on Codeship more on that here.

That gets my gulpfile.js for the base libraries down to

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

elixir(function(mix) {
    mix
        .styles(["vendor/**/*.css" ], "public/css/vendor.css")
        .scripts( ["vendor/angular/angular.js", "vendor/**/*.js"], "public/js/vendor.js");
});

I still would like to controller the ordering more. For example not sure angular just happened to be in the right order due to alphabetical order, or if it was included twice etc.

Lastly adding versioning

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

elixir(function(mix) {
    mix
        .styles(["vendor/**/*.css" ], "public/css/vendor.css")
        .scripts( ["vendor/angular/angular.js", "vendor/**/*.js"], "public/js/vendor.js")
        .version( ["css/vendor.css", "js/vendor.js"]);
});

As noted in the docs http://laravel.com/docs/5.1/elixir#versioning-and-cache-busting

From here I still need to setup a workflow for all my app files.

For example a page like "/projects" in angular will need a service, controller and route file.

So do I put those in resources/assets/js and add a new section to the gulp file list

elixir(function(mix) {
    mix
        .styles(["vendor/**/*.css" ], "public/css/vendor.css")
        .scripts( ["vendor/angular/angular.js", "vendor/**/*.js"], "public/js/vendor.js")
        .scripts( ["custom/**/*.js"], "public/js/custom.js")
        .version( ["css/vendor.css", "js/vendor.js"]);
});

and run gulp watch. This is not my normal workflow but it sure beats putting all the files in my html file and then also doing this to concatenate them.


Tags:

laravel elixir