在rails项目中，前端开发要怎么进行
bruce
05 Nov 2015
本篇博客主要是指导作为一个前端新手，如何快速的参与到Rails项目中，配合后端人员进行开发。
1. 拉取项目仓库到本地
git clone
参考： Set Up Git
2. 配置项目环境
1. bundle install
2. rake db:create
3. rake db:migrate
具体需要按照项目Readme配置环境，一般是运行bundle install命令安装各种需要的gem等；创建当前 RAILS_ENV 项目环境下的数据库，数据迁移等
参考：
- 具体项目的 README.md
- Rails 起步走
3. 启动服务器 rails server 在项目根目录下用rails serve命令启动本地 HTTP 服务器，默认情况通过localhost:3000访问，也可添加-b和-p参数指定通过本机ip地址和某个端口访问
4. 静态资源的组织方式 在Rails中，静态文件可以放在三个位置：app/assets、lib/assets 或 vendor/assets。
- app/assets：存放程序的静态资源，例如图片、JavaScript 和样式表；
- lib/assets：存放自己的代码库，或者共用代码库的静态资源；
- vendor/assets：存放第三方的静态资源，如 momentjs, bootstrap 等第三方库/框架
app/
|
|- assets/
| |- fonts/
| |- images/
| |- javascripts/
| |- stylesheets/
|
|- views/
| |
| |- layout
| | |- application.html.erb
| |
| |- shared
| | |- _header.html.erb
| | |- _footer.html.erb
| |
| |- welcome
| | |- index.html.erb
|
前端开发一般只需要关注app文件夹下的assets和views文件夹。
assets文件夹包含了字体、图片、样式表、JS脚本等静态资源；views文件夹主要存放erb模板;
*注释：erb是rails项目中view里默认使用的模板语言，支持html和ruby代码混合使用;详解解释:模板，局部视图和布局layout目录是存放布局模板shared目录是存放共用的partial(局部模板)，如 header，footer 等模板；welcome目录是自定义的与controller同名的目录，里面放的是各个action对应的模板
- 参考：如何合理组织程序的静态资源
5. 引用静态资源
在纯前端开发中，我们会通过 link 标签去引用 CSS，通过 script 标签去引用 JavaScript
<!--引用 app/assets/javascript/application.js -->
# File path: app/assets/stylesheets/application.css
# CSS总的索引文件，在这里声明和引用程序所依赖的CSS文件
/*
*= require reset
*= require bootstrap
*/
# File path: app/assets/javascript/application.js
# js总的索引文件，在这里声明和引用程序所依赖的js文件
//= require jquery
//= require jquery_ujs
*注释：在项目部署时，所有js/css内容都会合并和压缩到与这个2个同名的文件中，以便减少请求数。
- 参考: 如何引用静态资源
6. 如何引用图片
在 erb 模板中，使用image_tag来引用图片， 例如：可以像下面这样获取app/assets/images 文件夹中的图片：
在 scss 文件中，使用image-url来引用图片，例如: 可以像下面这样引用 app/assets/images 文件夹中的图片路径： image-url("logo.png") 编译成 url(/assets/logo-fac667ee32b2cc86bdf0ad54.png)
*注释：编译后的文件名fac667ee32b2cc86bdf0ad54 是文件的指纹（Fingerprinting），用途是文件有改动时浏览器的缓存能失效；
详见：指纹是什么，我为什么要关心它*
7. 开发流程
-
编写一个新的页面时，先用常规的
HTML语法在erb模板中写好页面的DOM结构，写好样式，页面逻辑、交互效果等等 -
完成后交给后端开发者，他们会按照写好的后端API，用
erb语法替换原有的假数据
8. 开发调试
修改项目中前端方面的bug，利用Chrome DevTools等调试工具定位到bug处，根据对应DOM元素的id或者class，在编辑器中通过全局搜索找到相应的CSS和JS，必要时可改动原有的DOM结构
参考： Chrome Dev Tools 浅析 Chrome 控制台不完全指南 discover-devtools