Rails 资产管道

Question

我有 2 个问题。

• 在我正在练习的 Rails 应用程序中，我的文件树如下所示：

从 Michael Hartl 的教程中学习，我学会了添加“custom.css.scss”文件来处理 CSS。我的问题是为什么 CSS 的东西不进入“kalendar.css.scss”，它从我的“Kalendar”控制器中选择它的名字，或者为什么 CSS 不进入“application.css”？

• 使用 javascript，我需要创建一个“custom.js.coffee”文件吗？如果没有，我将如何在视图中显示的文本上添加文本效果。意思是如何添加我下载的额外 javascript 插件？

但我知道在视图中我可以执行以下操作：

<%= javascript_tag "alert('hey you!')" %>

编辑：

现在在我的“vendor/assets/javascripts/textEffect.js”中有这个代码，这是我在线下载的插件。

(function($) {

    function shuffle(a) {
        var i = a.length, j;
        while (i) {
            var j = Math.floor((i--) * Math.random());
            var t = a[i];
            a[i] = a[j];
            a[j] = t;
        }
    }

    function randomAlphaNum() {
        var rnd = Math.floor(Math.random() * 62);
        if (rnd >= 52) return String.fromCharCode(rnd - 4);
        else if (rnd >= 26) return String.fromCharCode(rnd + 71);
        else return String.fromCharCode(rnd + 65);
    }

    $.fn.rot13 = function() {
        this.each(function() {
            $(this).text($(this).text().replace(/[a-z0-9]/ig, function(chr) {
                var cc = chr.charCodeAt(0);
                if (cc >= 65 && cc <= 90) cc = 65 + ((cc - 52) % 26);
                else if (cc >= 97 && cc <= 122) cc = 97 + ((cc - 84) % 26);
                else if (cc >= 48 && cc <= 57) cc = 48 + ((cc - 43) % 10);
                return String.fromCharCode(cc);
            }));
        });
        return this;
    };

    $.fn.scrambledWriter = function() {
        this.each(function() {
            var $ele = $(this), str = $ele.text(), progress = 0, replace = /[^\s]/g,
                random = randomAlphaNum, inc = 3;
            $ele.text('');
            var timer = setInterval(function() {
                $ele.text(str.substring(0, progress) + str.substring(progress, str.length).replace(replace, random));
                progress += inc
                if (progress >= str.length + inc) clearInterval(timer);
            }, 100);
        });
        return this;
    };

    $.fn.typewriter = function() {
        this.each(function() {
            var $ele = $(this), str = $ele.text(), progress = 0;
            $ele.text('');
            var timer = setInterval(function() {
                $ele.text(str.substring(0, progress++) + (progress & 1 ? '_' : ''));
                if (progress >= str.length) clearInterval(timer);
            }, 100);
        });
        return this;
    };

    $.fn.unscramble = function() {
        this.each(function() {
            var $ele = $(this), str = $ele.text(), replace = /[^\s]/,
                state = [], choose = [], reveal = 25, random = randomAlphaNum;

            for (var i = 0; i < str.length; i++) {
                if (str[i].match(replace)) {
                    state.push(random());
                    choose.push(i);
                } else {
                    state.push(str[i]);
                }
            }

            shuffle(choose);
            $ele.text(state.join(''));

            var timer = setInterval(function() {
                var i, r = reveal;
                while (r-- && choose.length) {
                    i = choose.pop();
                    state[i] = str[i];
                }
                for (i = 0; i < choose.length; i++) state[choose[i]] = random();
                $ele.text(state.join(''));
                if (choose.length == 0) clearInterval(timer);
            }, 100);
        });
        return this;
    };

})(jQuery);

在我的“视图”中，我有一个包含内容的文件：

<p class="my-container">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

在我的“application.js”中我有：

//= require textEffect

在“app/assets/javascripts/custom.js.coffee”中有

$(document).ready() -> 
$("#my-container").unscramble();

除非，当然我错了，我假设页面加载，我应该看到文本效果启动。但什么也没有发生。有什么我错过或做错了吗？

Answer 1

显然 michael 只是以这个 custom.css.scss 文件为例。 您可以使用最适合组织项目的任何文件名。

比如我喜欢把布局相关的项目放在layout.css.scss，我把Kalendar相关的css放在kalendar.css.scss。我不会将application.css 用于您的自定义样式的唯一原因是因为application.css 是一个清单文件。

清单文件是一个文件，它使用逗号语法告诉 Rails 要包含哪些资产。例如，在 css 清单中

/* Manifest File
 *= require_tree .
*/

这告诉 rails 包含整个样式表目录。您可以手动包含文件

*= require layout
*= require my_file_name

这个系统的重点是将所有资产渲染到一个文件中，这使得页面加载速度更快，并且在生产中您应该只需要一个 css/js 文件。要包含您只需编写的清单文件

= stylesheet_link_tag 'manifest_file_name'

文件名纯粹是为了组织。