bower 101

Bower v.s. Gulp v.s. Grunt

Gulp and Grunt : automate things like mimify CSS, minify HTML. ( ref : https://dsin.wordpress.com/2015/10/28/gulp/ )

Bower : managing the client-side libraries in your projects.

Example : install latest version of Bootstrap. If a library depends on other libraries (Bootstrap’s JS relies on jQuery, for instance), Bower helps manage that tree.

ref : http://stackoverflow.com/questions/34287542/what-are-the-differences-between-grunt-gulp-js-and-bower-why-when-to-use-the

installation

$ npm install -g bower

create bower.json

 $ bower init
? name test
? description test
? main file test
? keywords test
? authors Phongsathorn Eakamongul <phongsathorn.eakamongul@rockyou.com>
? license MIT
? homepage
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being ac? would you like to mark this package as private which prevents it from being accidentally published to the registry? Yes

{
name: 'test',
authors: [
'Phongsathorn Eakamongul <phong.ek@gmail.com>'
],
description: 'test',
main: 'test',
keywords: [
'test'
],
license: 'MIT',
homepage: '',
private: true,
ignore: [
'**/.*',
'node_modules',
'bower_components',
'test',
'tests'
]
}

update bower.json

bower install PACKAGE --save

install from bower.json

bower install

dependencies v.s. devDependencies

devDependencies = dependencies that are only needed for development of the package, e.g., test framework or building documentation

default installation path

bower_components/

change the installation path

.bowerrc

{

"directory": "whatever/subdirectory/it_is"

}

Normally, it is

{

"directory": "vendor/assets/bower_components"

}

Changing assets path in the config/application.rb

config.assets.paths << Rails.root.join(‘vendor’, ‘assets’, ‘bower_components’)

ref : https://bower.io/docs/config/

bower.json references

https://github.com/bower/spec/blob/master/json.md

Example bower packages

https://github.com/jquery/jquery

https://github.com/rails/jquery-ujs

https://github.com/angular/bower-angular

https://github.com/angular/bower-angular-resource

https://github.com/angular/bower-angular-sanitize.git

https://github.com/angular/bower-angular-messages.git

https://github.com/angular-ui/angular-ui-router-bower

https://github.com/picardy/angular-fontawesome

https://github.com/oblador/angular-scroll

https://github.com/pitr/angular-rails-templates

https://github.com/danielcrisp/angular-rangeslider

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s