Asset Pipeline 打包压缩？到底是什么！？ in Rails 村

最近在专案上碰到了要修改前端的部分，
原本以为只是将图片更新，应该不是件困难的事，
没想到阿菜如我，真的连图片更新这件事都做不起来...？

事情是这样，
我在本机端测试都正常后，把更新后的专案部署上远端测试机，
结果在测试机器上面居然发现我的图片都显示不出来，
看着自己本机端却正常，到底发生了什么事？

首先，你可以先到 config/application.rb 中

config.assets.enabled = true

把这行从true改成false
好了，这样你就可以直接上一页跳过这篇了～（喂！）

回归正题
我们可能会需要先了解Asset pipeline到底是什么鬼东西

Asset Pipline 提供了一个框架，用于连结、压缩 JS 和 CSS 文件，还允许使用其他语言和预处理器编写 JS 和 CSS 例如 CoffeeScript、Sass 和 ERB

Assets指的是JavaScript、Stylesheets和图档等静态档案，这些档案并不会随Requests不同而有所不同。而在Rails目录中，只有public这个目录是公开读取的，所以通常我们会将静态档案都放在public这个目录下，好让浏览器可以直接读取。但是随着JavaScript和Stylesheet档案越来越多时，如何管理这些档案变为一项议题，为了加快浏览器的下载速度，我们会合併JavaScript和Stylesheet档案，来减少浏览器Request下载次数。

看不懂也没关係，总而言之看起来这家伙是来帮我们将专案内的静态资源打包压缩（像是图档、JS、CSS）
来增加浏览器的存取速度，此外原本会将静态档案丢到public资料夹中，我们也能开始为这些档案做出区隔跟整理。
那到底 Asset pipeline 做了什么？
其实就在 app/assets/stylesheets 这个资料夹里头有两个很重要的档案
application.css & appication.js
这里必须要注明一下，可能有些人会想说为什么没看到application.js这个档案
如果你是使用 Rails 6.0 以上的版本，
那么application.js档案则会出现 app/assets/javascript/packs 这个资料夹中
再来看看这两个档案，点开来可能满头问号，一堆注解
其实上面说将静态资源打包压缩出来的就是指上面这两个档案，也就是 Asset pipeline 替我们做的事。
那打包了总有地方用上吧？
我们可以看看在 View 中的 layout/application.html.erb 这个档案

<%= stylesheet_link_tag 'application' %><%= javascript_pack_tag 'application' %>

因为 Asset pipeline 已经替我们打包好了，
而我们所需要做的也就是载入这两个档案就大功告成啦！
Asset pipeline要讲完整的话篇幅很长，
底下会分享参考资料，有兴趣的朋友可以直接去网站上详读～

这里的主题就是会针对 image 图档的部分来做处理
前面引用文字也有提到所谓预处理，
也就是 Assets 资料夹下 Rails 支援不同使用的语法：
而这里会带到的则是 Sass 语法中的 scss 形式。

放在app/assets/images下的图片该怎么使用呢？在实际布署后，Rails会将档案名称加以编码

实务上使用也有针对不同的情况下，而使用不同的方法来对应：
在一般 View 的档案中，
我们可以使用image_tag这个 helper 来指向我们的图档

<%= image_tag('apple.jpg') %>

另外在 css 的情况下稍微複杂一些些，
如果档案的类型为example.css.erb，我们会使用asset_path这个 helper

body {  background-image: url('<%= asset_path('apple.jpg') %>')}

如果是比较熟悉的example.scss，则可以使用image_url这个 helper

body {  background-image: image-url('apple.jpg')}

说了这么多，还是得回到使用上发生的情况～
其实我一开始是这么写的

body {  background-image: url('../assets/images/apple.jpg')}

这里一开始做的时候，查 css 的语法，都会看到路径需要写什么相对路径blabla
但我真的这么写的时候，反而都无法正常显示，
后来才发现原来又是 Asset pipeline 做得好事，
也许是因为已经被打包的关係，所以会自动默认到images资料夹底下，
我们只需要直接给档名，他自然就能帮我们找到了

body {  background-image: url('apple.jpg')}

原以为这样就结束了，但并没有，
当我 deploy 到远端测试机的时候，咦，我的图怎么又不见了？！
最后则是这么写才解决了我的问题：

body {  background-image: image-url('apple.jpg')}

老实说我并没有很清楚为什么这么做可以让远端机器找得到图，
我只确定的是image-url这个 helper 他会帮你把图档档名做一串编译的动作。
希望有大大可以帮我解惑！

参考资料：
Rails实战圣经
Rails 静态档案处理（The AssetPipeline）
一次搞懂 Assets Pipeline