"ignore" in Bower's bower.json? - bower

Bower's website describes the ignore key in bower.json:
ignore [array]: An array of paths not needed in production that you want Bower to ignore when installing your package.
Does this mean that it's ignoring paths in installed components, or in your package? Or something else? I was confused by this.

TL;DR:
ignore only works within the scope of packages being installed, ignoring matching patterns.
Somewhat longer answer:
Bower will ignore all files matching the patterns specified in the ignore property of bower.json in installed packages.
So, suppose if you ran bower install someBowerPackage which had following structure:
someBowerPackage
|- css/
|- js/
|- index.html
|- bower.json
with a bower.json file having:
{
...
"ignore": [ "index.html" ]
}
then, index.html file of this someBowerPackage will not be installed within this package.

ignore is related to the files in your package
You can't ignore on behalf of other packages
Dependencies are loaded all or none

ignore values are only applied to packages fetched from a bower install endpoint by that component's bower.json file.
ignore values specified in project-root/bower.json have no effect on packages fetched as that project's components.
The bower.json Spec has been documented in its own github repo since this question was originally asked.
Ignore
Recommended
Type: Array of String
A list of files for Bower to ignore when installing your package.
Note: symbolic links will always be ignored. However bower.json will never be ignored.
The ignore rules follow the same rules specified in the gitignore pattern spec.
Files matching globs or file values in ignore will not be downloaded from an endpoint as part of the package.

Related

How is Bower working without .bowerrc file

I appreciate this is not a real problem, just curious...
I'm using bower version 1.7.2 and all my projects so far have a .bowerrc file in the main project folder.
On my current project (through an oversight with .gitignore) I lost the .bowerrc file. However bower still works just fine and everything gets created where I want it.
I've read the docs on the Bower site and there is nothing to suggest that it will work without the .bowerrc file, and plenty on stackoverflow suggests that I need the .bowerrc file - ALSO - there isn't a .bowerrc file in the file tree between the project folder and root (although there are plenty around in folders that have different paths)
My question then is: does bower work ok without a .bowerrc file (e.g. defaulting to directory:bower_components) ? or is there a way to see which .bowerrc file my bower is using?
Many thanks for any reply, although completely understandable if you read this and move on, like I said, my problem is that it works, and I don't think it should...
As the docs specify, the .bowerrc file can be either in the project dir, the user home (i.e ~/.bowerrc - depends on your OS) or the root dir.
If you didn't put it anywhere Bower uses defaults as specified here.
And to answer your question - the default directory for bower packages is bower_components
Yes , I tested in my project with out .bowerrc I am able to install packages with bower.If we don't specify the .bowerrc file bower_components directory is creating in the root directly which is default. If we want "bower_components" to be in specific location that should be specified in the .bowerrc file.
For example if we want bower_components folder in "app" folder
bowerrc file should specify directory location : "directory": "app/bower_components",
But while downloading packages from git ,if you computer has any proxy settings that need to be configured in .bowerrc file. If we don't specify the proxy settings in .bowerrc we wont be able to download packages form git.

Is Bower only about automatically installing dependencies?

Does Bower actually do anything else than resolve dependecies? I'm trying hard to understand how it is meant to be used, but I guess I'm missing some points...
Say, I have Bower package A, which depends on Bower package B. In my application I'm just interested in package A, since that's what I'm going to use. Of course, that means that somehow both packages must be loaded into the Browser, so that package A can work.
Using Bower I can just do bower install a and will then find both packages A & B in my bower_components. So far, awesome.
But now? Am I forced to find out myself (manually) which files from A and B need to be loaded in my HTML page? I don't think that the full bower_components directly shall be accessible via web, so I have to configure myself manually my Grunt (or whatever) build-file to copy the relevant files?
What am I missing here? If what I wrote above is true, what's the point using Bower when I still need to be aware of all implicit dependencies?
Bower manages dependencies, and it will add the correct files into your HTML if you use it with the --save (or -S) flag. You would need appPath set in your bower.json if your index.html isn't in the same directory.
$ bower help install
Usage:
bower install [<options>]
bower install <endpoint> [<endpoint> ..] [<options>]
Options:
-F, --force-latest Force latest version on conflict
-h, --help Show this help message
-p, --production Do not install project devDependencies
-S, --save Save installed packages into the project's bower.json dependencies
-D, --save-dev Save installed packages into the project's bower.json devDependencies
Additionally all global options listed in 'bower help' are available
Description:
Installs the project dependencies or a specific set of endpoints.
Endpoints can have multiple forms:
- <source>
- <source>#<target>
- <name>=<source>#<target>
Where:
- <source> is a package URL, physical location or registry name
- <target> is a valid range, commit, branch, etc.
- <name> is the name it should have locally.
```
You're actually not missing anything. Bower doesn't deal with loading your dependencies, just installing them. Loading them is something you have to do on your own. Also, there are a lot various ways in which people load there dependencies; the most common probably being Require.JS, Browserify (have too few credits to post links) and plain script includes in an index.html page. So, basically you have a few options here
You can just deal with load registrations manually. This would mean adding <script src="..."></script> tags to your index.html page, or adding registrations for dependencies and similar to your app.js if you're using Require.JS. Note that this step would mean that you'd manually have to look at each dependency, read documentation or bower.json files to figure out transitive dependencies and file paths.
If you're using plain script includes, you can use Wiredep to have that done automatically for you through Wiredep's inspection of the bower.json files of dependencies.
If you're using RequireJS (or similar) you can look at Yeoman's grunt-require-js to do this automatically for you.
Note that both 2 and 3 relies on library authors provide the correct output files. You might e.g. have to declare overrides or explicitly declare if you want minified or non-minified versions.
As for publicly allowing access to "bower_components", I find that this is the most common approach. What things there would you like to prevent access to?
I'm a recent bower user myself. And as far as I know the short answer is: YES, bower is meant to download dependencies, however, apart from being able to configure the bower_components directory to anything you like, the idea is that bower installed components won't be edited by you at all, if you want to include them manually, you type
bower list --paths
and this will list all the files you need to include from the dependencies (in relative urls).
You can also use bower-installer (npm install -g bower-installer) which allows you to copy the files you need to any path you like. With a fine grained controll, or choose the minified versions, for example.
Here's an example output.
C:\Users\german\test>bower install bootstrap
bower bootstrap#* not-cached git://github.com/twbs/bootstrap.git#*
bower bootstrap#* resolve git://github.com/twbs/bootstrap.git#*
bower bootstrap#* download https://github.com/twbs/bootstrap/archive/v3.3.4.tar.gz
bower bootstrap#* extract archive.tar.gz
bower bootstrap#* resolved git://github.com/twbs/bootstrap.git#3.3.4
bower jquery#>= 1.9.1 not-cached git://github.com/jquery/jquery.git#>= 1.9.1
bower jquery#>= 1.9.1 resolve git://github.com/jquery/jquery.git#>= 1.9.1
bower jquery#>= 1.9.1 download https://github.com/jquery/jquery/archive/2.1.4.tar.gz
bower jquery#>= 1.9.1 extract archive.tar.gz
bower jquery#>= 1.9.1 resolved git://github.com/jquery/jquery.git#2.1.4
bower bootstrap#~3.3.4 install bootstrap#3.3.4
bower jquery#>= 1.9.1 install jquery#2.1.4
bootstrap#3.3.4 bower_components\bootstrap
└── jquery#2.1.4
jquery#2.1.4 bower_components\jquery
C:\Users\german\test>bower list --paths
jquery: 'bower_components/jquery/dist/jquery.js',
bootstrap: [
'bower_components/bootstrap/less/bootstrap.less',
'bower_components/bootstrap/dist/css/bootstrap.css',
'bower_components/bootstrap/dist/js/bootstrap.js',
'bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot',
'bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.svg',
'bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf',
'bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff',
'bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2'
]
after
bower list --paths
bootstrap[] shows all the files I need to include according to bower_components/bootstrap/bower.json
main:[]
part
Hope this helps! cheers.

Best practice for front end library management using Bower

I want to use bower add manage my library, my question is along with the js files, it always comes with some extra json or git related files. I don't want to push those files to the client, is there a recommended way rather than extract js filed manually?
Bower allows you define in your bower.json file a list of files it will ignore when installing your package:
ignore
Recommended Type: Array of String
A list of files for Bower to ignore when installing your package.
Note: README (all variants of case, .md, .text) and bower.json will
never be ignored.
The ignore rules follow the same rules specified in the gitignore pattern spec.
For example:
{
"name": "my-project",
"version": "1.0.0",
"main": "path/to/main.css",
"ignore": [
".jshintrc",
"**/*.txt"
],
...
}
Another option is keeping only the files you want to distribute in the Git tags which represents you package versions.

Is it possible to put bower.json outside root folder?

When defining a package, Is it possible to put the bower.json file inside a subdirectory of my git repository, and reference it in other projects?
I know that the docs says to put it in the root, but I already have my own directory structure on my git repository and want to put it inside a subdirectory.
I'm wondering if exists an option inside .bowerrc file to configure bower.json location. That would solve my problem.
I know this question is pretty old but none of the answers address the OP's actual question.
It is possible to store your bower.json in a subdirectory of your project (or another project for that matter).
In your .bowerrc, use the cwd (current working directory) setting to specify where your json file is stored.
More info can be found in the bower configuration docs.
Bower will create the ./bower_components folder next to the bower.json file.
So, as long as you ensure that the paths of the js/css files are OK, you can put the components wherever you want.
In my case, I have to use different versions/dependencies for an HTML5 mobile app and a Bootstrap/Angular backend. So I have something like that:
/bower.json
/bower_components/
/app/bower.json
/app/bower_components/
Just be sure to include your bower.json files in the GIT tree and add the bower_components folders to the .gitignore file
Hope it helps

Yeoman install component fails

When I execute yeoman install git://github.com/paperjs/paper.js.git, it fails. This is the output:
Running "bower:install:git://github.com/paperjs/paper.js.git" (bower)
task bower cloning git://github.com/paperjs/paper.js.git bower caching
git://github.com/paperjs/paper.js.git bower fetching paper.js bower
checking out paper.js#39f744de0c117e678b7c663dbf489c55def6f415 bower
copying
/Users/my-username/.bower/paper.js/58f9c1c5f33cae79df922c8fde57158c
GET https://bower.herokuapp.com/packages/canvas <FATAL> canvas not
found </FATAL>
Seems like it is looking for a 'canvas'-module which doesn't exists. Any ideas on how to resolve this?
It probably has to do with 'cavas' being defined as a dependency in package.json, but the package.json file is meant for NPM.
It probably has to do with 'cavas' being defined as a dependency in package.json, but the package.json file is meant for NPM.
That's correct. It's an invalid component since it's missing a component.json file, which is required if a component has dependencies. You can ask the author of Paper.js to add a component.json file, or fork the repo and add it yourself.
In addition their git tags, which yeoman install (Bower) uses, are invalid semver (v0.22 while the valid notation is 0.2.2). This will cause it to not work.

Resources