Giter VIP home page Giter VIP logo

bower-rails-pt's Introduction

bower-rails

Gem Version Code Climate Dependency Status Build Status Coverage Status

Bower support for Rails projects. Dependency file is bower.json in Rails root dir or Bowerfile if you use DSL. Check out changelog for the latest changes and releases.

Requirements

Install

in Gemfile

  gem "bower-rails", "~> 0.6.1"

##JSON configuration

Bower-rails now supports the standard bower package format out-of-the-box. Simply place your bower.json file the Rails root directory to start. Using the standard format will default all bower components to be installed under the vendor directory.

To install dependencies into both lib and vendor directories, run the initializer to generate a custom bower.json:

  rails g bower_rails:initialize

This will generate a special bower.json that combines two standard bower packages into one. Simply specify your dependencies under each folder name to install them into the corresponding directories.

example bower.json file

{
   "lib": {
    "name": "bower-rails generated lib assets",
    "dependencies": {
      "threex"      : "[email protected]:rharriso/threex.git",
      "gsvpano.js"  : "https://github.com/rharriso/GSVPano.js/blob/master/src/GSVPano.js"
    }
  },
  "vendor": {
    "name": "bower-rails generated vendor assets",
    "dependencies": {
      "three.js"    : "https://raw.github.com/mrdoob/three.js/master/build/three.js"
    }
  }
}

##Ruby DSL configuration

The Ruby DSL configuration is a Bowerfile at the project's root with DSL syntax similar to Bundler.

Example Bowerfile

By default assets are put to ./vendor/assets/bower_components directory:

# Puts to ./vendor/assets/bower_components
asset "backbone"
asset "moment"

But the default value can be overridden by assets_path method:

assets_path "assets/my_javascripts"

# Puts to ./vendor/assets/my_javascripts/bower_components
asset "backbone"
asset "moment"

And finally, the assets_path method can be overridden by an option in a group call:

assets_path "assets/javascript"

# Puts files under ./vendor/assets/js/bower_components
group :vendor, :assets_path => "assets/js"  do
  asset "jquery"            # Assummes it's latests
  asset "backbone", "1.2"
end

# Puts files under ./lib/assets/javascript/bower_components
group :lib do
  asset "jquery"
  asset "backbone", "1.2"
end

NOTE: Available groups are :lib and :vendor. Others are not allowed according to the Rails convention. NOTE: All the assets should be stored in /assets subdirectory so putting it under ./vendor/js directory is unavailable

##Rake tasks

Once you are done with bower.json or Bowerfile you can run

  • rake bower:install to install js components
  • rake bower:install:force to install with force option
  • rake bower:update to update js components
  • rake bower:update:prune to update components and uninstall extraneous packages
  • rake bower:list to list all packages
  • rake bower:resolve to resolve relative asset paths in components

##Bower Configuration

If you provide a .bowerrc in the rails project root, bower-rails will use it for bower configuration. Some .bowerrc options are not supported: directory, cwd, and interactive. Bower-rails will ignore the directory property and instead will use the automatically generated asset path.

###Bower Installation

Bower should be installed using npm. Bower can be installed globally (with $ npm install -g bower) or in node_modules in the root directory of your project.

##Relative asset paths

Some bower components (eg. Bootstrap) have relative urls in the CSS files for imports, images, etc. Rails prefers using helper methods for linking to assets within CSS. Relative paths can cause issues when assets are precompiled for production.

Before the rake assets:precompile task is run, the bower assets will be reinstalled with the relative paths replaced with calls to asset_path so that all asset links work in production.

bower-rails-pt's People

Contributors

cj avatar codeodor avatar dra1n avatar fddayan avatar fny avatar fredjean avatar jimpo avatar kenips avatar klacointe avatar mattr- avatar rharriso avatar romanenko avatar sergeykishenin avatar tikitdo avatar tohae avatar tylerflint avatar yujiym avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.