2017-04-12 1 views
2

Nouveau sur Rails alors gardez-moi ... Je regardais un fichier manifeste (application.js) aujourd'hui tout en recherchant le pipeline d'actifs et j'étais curieux de voir comment les directives telles que //= require jquery étaient lues. Est-ce quelque chose que Sprockets fait en arrière-plan? Comment? Pourquoi la directive doit-elle être commentée en premier et le signe égal ajouté? Si je décommente les directives et charge le fichier application.js dans mon broswer, je ne vois plus le contenu de la bibliothèque jquery. Juste curieux de savoir comment cela fonctionne en arrière-plan. De plus, lorsque j'ajoute ma propre feuille de style css personnalisée, dois-je ajouter une directive require dans le fichier manifeste application.css ou dois-je ajouter le lien de la feuille de style tel que <link rel="stylesheet" type="text/css" href="mystyle.css">? Ou est-ce que je fais les deux? Je suppose que je ne devrais pas ajouter css directement à l'intérieur du fichier manifeste ...Comment les directives Sprockets sont-elles lues dans le fichier manifeste lors de l'utilisation de Rails?

Merci!

Répondre

1

Ne sachez pas combien vous savez, alors essayez d'expliquer dans les détails.

Rails stocke nos actifs (comme les images, css, fichiers js) dans des endroits distincts, donc tout est en ordre et mieux pour nous - devs, à utiliser. Donc, ça s'appelle Assed Pipeline. Lorsque Rails charge ces ressources, disons les fichiers css, il crée un gros fichier à partir de tous nos fichiers d'applications, pour éviter les appels multiples. Et Manifest est comme une carte ou des règles pour Rails quels fichiers à inclure dans ce grand fichier css et ce *= est ce qui dit à Rails quoi inclure exactement (je le considère comme une syntaxe Rails). Alors, quand vous avez quelque chose comme ceci:

//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require_tree . 

require_tree . dit Rails pour saisir tous les fichiers du dossier javascripts, tandis que //= require jquery et autres directs Rails à cas particuliers - actifs, généralement utilisés par vos pierres précieuses (les fichiers que vous ne gardez jamais dans vos dossiers javascripts/stylesheets, donc //= require_tree . ne peux pas les voir). Lorsque vous ajoutez votre fichier on css, il vous suffit de l'ajouter dans le dossier stylesheets et require_tree informe Rails de l'inclure dans la grande image. Mais Rails a une belle caractéristique - échafaudage. Vous échafaudez votre objet avec la commande rails g scaffold User et Rails crée tout pour vous - vues, contrôleur, modèle, tests (et qui sait quoi d'autre :)). Donc, dans ce cas, vous ne même pas besoin de créer votre fichier CSS, il suffit d'insérer des règles CSS dans et Rails trouver grâce require_tree .

Un peu autre histoire avec les fichiers SASS:

Si vous voulez Pour utiliser plusieurs fichiers Sass, vous devez généralement utiliser la règle Sass @import au lieu de ces directives Sprockets. Lors de l'utilisation directives Pignons, les fichiers Sass existent dans leur propre champ, ce qui variables ou mixins ne sont disponibles que dans le document qu'ils ont été définis.

Donc, si vous utilisez (Bootstrap sera probablement), c'est un important à savoir aussi.

Hope this helps

+0

@JD, merci pour la réponse et le pourboire à propos de Sass, ne l'aurait pas su autrement! –

+0

@Craig Ness, merci! Ce fut un plaisir :) –

1

Comment? Pourquoi la directive doit-elle être mise en commentaire en premier?

Parce qu'il s'agit de la directive sprockets. Il est exécuté bien avant que tout js/café dans ce fichier ait la chance de fonctionner. Et css n'est pas du tout un code "runnable".Comment faites-vous ce type de code ne produisent pas d'erreurs? Vous le commentez.

... et le signe égal ajouté?

Pour indiquer ces directives spéciales en dehors des autres commentaires "réguliers" qui peuvent se trouver dans ce fichier.

Je suppose que je ne devrais pas ajouter directement à l'intérieur du css fichier manifeste ...

Pourquoi ne pas, allez-y. Bien que vous souhaitiez mettre n'importe quel code personnalisé dans des fichiers séparés pour des raisons d'organisation du code. Mais techniquement, il n'y a pas de problème ici.

Aussi, quand j'ajouter mon propre feuille de style CSS personnalisé, ajouter une directive require dans le fichier manifeste de application.css

Pas besoin, require_tree . trouvera et inclure votre dossier.

ou est-ce que j'ajoute le lien de la feuille de style tel que <link rel="stylesheet"type="text/css" href="mystyle.css">?

Non, ne faites pas cela.

+0

Bonne prise avec des lignes commentées .. Sad ne pouvait pas le réaliser moi-même ... –

+0

Merci @SergioTulentsev! Cela a certainement aidé à éclaircir les choses –