Bower dependencies

sage
1

I’m not finding that files identified in “main” in bower_components/*/bower.json files are being pulled into the ./dist directory without identifying them in the manifest.json file.

need things like angular.js, ng-infinite-scroll.js, lightbox.js, lightbox.css, etc.

These are all listed as “main” in their respective bower.json files (or overridden in ./bower.json).

Does Gulp in Sage not pull these automatically? Apologies if this is asked elsewhere. I have not been able to find an answer.

Also, how can I get a Gulp verbose output to see what files are being pulled?

Thank you in advance for your input.

2

Edit:

For clarity: If you installed them via bower bower install angular --save you are done and angular is already being included in app.js. angular.js will not appear in the dist folder because it is a part of app.js.

So in:

When you say:

// ...
"main.js": {
      "files": [
        "scripts/main.js"
      ],
      "main": true
}
// ...

You are creating dist/app.js with:

[
  "bower_components/whatever/angular.js".
  "bower_components/whatever/ng-infinite-scroll.js".
  "bower_components/whatever/lightbox.js",
  "assets/scripts/main.js"
]

Think about it like you have C/C++ source files that you are running through a compiler to get a binary at the other end.

"main.js": {
      "files": [
        "scripts/main.js"
      ],
      "main": true
},
"myangular.js": {
      "bower": ["angular"]
}

Will output

dist/app.js as:

[
  "bower_components/whatever/ng-infinite-scroll.js".
  "bower_components/whatever/lightbox.js",
  "assets/scripts/main.js"
]

and dist/myangular.js as:

[
  "bower_components/whatever/angular.js".
]

You do not have to do this, the only reason we are doing this for jquery and modernizr is for wordpress compatibility. You should ship your JS in as few files as possible to keep things simple.

There are some simplified examples here: https://github.com/austinpray/asset-builder/blob/master/help/examples.md

3

You can drop gulp-debug - npm in the middle of a pipe to see what files are coming through.

You can also add a console.log(manifest); to see the asset-builder structure

You can also interactively inspect asset-builder via the command line:

In your theme root (where your gulpfile.js is) run

node

Which gives you an interactive node command line. You can then run

var manifest = require('asset-builder')('./assets/manifest.json');

Which assigns the generated asset-builder object to the manifest variable. Now type

manifest

Now you can explore

manifest.globs.js

manifest.globs

manifest.dependencies['main.js']
4

Great, Austin. I’m getting the intended results, now. Thx for your time! bkc