Rails資產管道

Question

我有兩個問題。

• 在我正在練習的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'

文件名僅用於組織。