What is the use of property main file when you run bower init? I have been looking and many people says that it currently has no purpose.
Is that true? Bower's documentation doesn't explain it either.
According to the Bower.io documentation
main
Recommended Type: String or Array of String
The primary acting files necessary to use your package. While Bower
does not directly use these files, they are listed with the
commands bower list --json andbower list --paths, so they can be used
by build tools.
Preprocessor files like CoffeeScript should be compiled.Do not include
minified files.Filenames should not be versioned (Bad:
package.1.1.0.js; Good: package.js).
I think it's more for the package management, and build tools like Grunt and Brunch. For example, Bootstrap's bower.json looks like :
{
"name": "bootstrap",
"version": "3.0.3",
"main": [
"./dist/css/bootstrap.css",
"./dist/js/bootstrap.js",
"./dist/fonts/glyphicons-halflings-regular.eot",
"./dist/fonts/glyphicons-halflings-regular.svg",
"./dist/fonts/glyphicons-halflings-regular.ttf",
"./dist/fonts/glyphicons-halflings-regular.woff"
],
"ignore": [
"**/.*",
"_config.yml",
"CNAME",
"composer.json",
"CONTRIBUTING.md",
"docs",
"js/tests"
],
"dependencies": {
"jquery": ">= 1.9.0"
}
}
When I build in Brunch, it pulls these files from my bower_components folder in my public folder.
According to Bower's JSON Specification (https://github.com/bower/spec/blob/master/json.md#main), the "main" property is used to list the files primarily used in the project. The files listed are not actually used by Bower in any way, they are apparently there for the purpose of being used by other build tools.
Here is the official specification:
main
Recommended
Type: String or Array of String
The primary acting files necessary to use your package. While Bower does not directly use these files, they are listed with the commands bower list --json and bower list --paths, so they can be used by build tools.
Preprocessor files like CoffeeScript should be compiled.
Do not include minified files.
Filenames should not be versioned (Bad: package.1.1.0.js; Good: package.js).
Related
In an ASP.NET Core MVC website there is a .bowerrc file:
{
"directory": "wwwroot/lib"
}
And there is also a bower.config file:
{
"name": "ASP.NET",
"private": true,
"dependencies": {
"font-awesome": "4.5.0",
"startbootstrap-sb-admin-2": "1.0.8"
}
}
Should the project have both, does it need both? If so, what is the purpose of each?
Both files are in the root directory of the project.
The purpose of bower.json is to define all the dependencies your project have. The purpose of .bowerrc is to define optional configurations such as the location of the directory bower must work and other things (proxy, etc.).
To answer your question, normally .bowerrc can be optional but in your case, it looks like a specific directory is set for bower to install packages into.
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.
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.
I am trying to install some js files via bower. My repo has a bower.json with a main property, however the whole repo gets installed to components/, not just the files in the dist/custom/ dir.
Here is what my bower.rc looks like
{
"name": "jquery-m",
"version": "2.0.2mup",
"description": "Meetup custom build of jQuery 2.0, used on mobile",
"main": [ "./dist/custom/" ],
"license": "MIT"
}
Is this the way bower is supposed to work? I thought it was possible just to specify certain files with your main property.
Yes, this is how Bower is meant to work. Bower-installer looks like a more lightweight solution than Grunt to solve the exact requirement you're describing and get just the files you need to be deployed to production.
Yes, that's how Bower works.
It always look for the matching tag on the repo; if cannot find one, it goes with the default branch, and download it.
The unique usage I've seen so far for the main property of a bower.json file is for integration, for example with build tools, like Grunt (there are lots of other bower related tasks, just Google around) and others.
This is a common misconception.
As stated in Bower documentation, the main property is a string/array listing the primary endpoints of your package.
Bower package maintainers (and maybe users, using the overrides property) can use the ignore property, which is an array of paths not needed in production that you want Bower to ignore when installing your package.
Example:
{
"name": "stackoverflow",
"version": "1.0.0",
"ignore": [
"test/**",
".jshintrc"
],
"dependencies": {
"foo": "~1.1"
}
}
I would like to use the SlickGrid plugin in my Rails 3 application.
I contains several JS and CSS files that I should include in my HTML page.
It is possible to put all the needed JS files in the public/javascripts directory and all the CSS files in the public/stylesheets directory. However, I don't like this solution because it breaks the plugin package files structure.
I would like to put all the plugin files in one place (I thought about vendor/plugins, is it a better place?), and include the needed files from there. Is that possible ?
What is the proper way to include the JS and CSS files when integrating a plugin ?
I think Jammit can help you accomplish what you're trying to do. Besides packaging, embedding, gzipping your assets, it also allows you to store javascript and stylesheets anywhere in your app. Images (if not embedded) could be a problem though.
Answer by #rubiii is also good, but since sprockets gem from version 2.10.0 supports bower, now it is extremely easy to integrate any js/css libraries. Also version management and updating as easy as typing bower install. Bower can be installed through nodejs npm install -g bower, include .bowerrc file in root of application with content inside:
{
"directory": "vendor/assets/components"
}
Then specify libraries in bower.json and run bower install
{
"name": "appName",
"version": "0.0.0",
"dependencies": {
"bootstrap": "~3.0.0",
}
}
After components installed, require files in application.js/application.css as usually. e.g.
*= require bootstrap