项目使用的前端库很多的话,使用Bower这个库管理工具来管理依赖关系就会很方便,记录一下将Bower集成到Rails项目中的步聚。 安装bower前,需要先在系统中安装node.js

# 安装 bower
npm install -g bower

在Rails项目的根目录建立 .bowerrc 文件,此后用bower命令安装的前端库文件都会安装到此目录下,内容如下:

{
  "directory": "vendor/assets/components"
}

进入项目根目录,创建bower的配置文件 bower.json

$ bower init
# 根据向导生成配置文件
# 配置文件内容
{
  "name": "example",
  "version": "1.0.0",
  "authors": [
    "exapmle <exapmle@example.com>"
  ],
  "license": "MIT",
  "homepage": "http://example.com",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "vendor/assets/components",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap": "~3.3.5"
  }
}

配置 config/application.rb 文件,将安装目录加入assets路径中:

config.assets.paths << Rails.root.join('vendor', 'assets', 'components')

使用bower安装的前端库,如:bootstrap

bower install bootstrap --save
# --save 参数会将安装的库及版本写入bower.json文件中

在js文件中引入前端库

//=require bootstrap/dist/css/bootstrap

安装bower.json中定义的库列表

bower install

随后就可以直接用bower命令安装需要的前端库,并在相应的文件中引用即可。bower目前已收录3w+的前端库。

相关网站