Ruby on Rails：如何正确组织JS和CSS文件？

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.

我想在我的Rails 3应用程序中使用SlickGrid插件。我包含了几个我应该包含在HTML页面中的JS和CSS文件。

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.

可以将所有需要的JS文件放在public / javascripts目录中，将所有CSS文件放在public / stylesheets目录中。但是，我不喜欢这个解决方案，因为它破坏了插件包文件结构。

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 ?

在集成插件时包含JS和CSS文件的正确方法是什么？

2 个解决方案

#1

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.

我认为Jammit可以帮助你完成你想要做的事情。除了打包，嵌入，压缩资产外，它还允许您在应用中的任何位置存储javascript和样式表。但是图像（如果没有嵌入）可能是个问题。

#2

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:

@rubiii的回答也不错，但是由于版本2.10.0的sprockets gem支持bower，现在很容易集成任何js / css库。版本管理和更新也像打包bower安装一样简单。 Bower可以通过nodejs安装npm install -g bower，包含.bowerrc文件在应用程序的根目录中，内容如下：

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

Then specify libraries in bower.json and run bower install

然后在bower.json中指定库并运行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.

安装组件后，通常需要application.js / application.css中的文件。例如

*= require bootstrap

#1

#2

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