{"id":684,"date":"2014-09-06T02:46:03","date_gmt":"2014-09-06T02:46:03","guid":{"rendered":"https:\/\/dev.railscarma.com\/asset-pipeline-in-rails-3-1-0\/"},"modified":"2021-06-07T07:19:40","modified_gmt":"2021-06-07T07:19:40","slug":"pipeline-dactifs-dans-les-rails-3-1-0","status":"publish","type":"post","link":"https:\/\/www.railscarma.com\/fr\/blog\/gestion\/pipeline-dactifs-dans-les-rails-3-1-0\/","title":{"rendered":"Pipeline d'actifs dans Rails 3.1.0"},"content":{"rendered":"
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Le pipeline d'actifs fournit un cadre pour concat\u00e9ner et r\u00e9duire ou compresser les actifs JavaScript et CSS. Il ajoute \u00e9galement la possibilit\u00e9 d'\u00e9crire ces actifs dans d'autres langages tels que CoffeeScript, Sass et ERB. Dans Rails 3.1, le pipeline d'actifs Rails est activ\u00e9 par d\u00e9faut. Il peut \u00eatre d\u00e9sactiv\u00e9 dans config\/application.rb en pla\u00e7ant cette ligne dans la d\u00e9finition de la classe d'application\u00a0:<\/p>\n

config.assets.enabled = faux<\/p>\n

nous pouvons \u00e9galement d\u00e9sactiver le pipeline d'actifs lors de la cr\u00e9ation d'une nouvelle application en passant l'option \u2014skip-sprockets.<\/p>\n

rails le nouveau nom de l'application -skip-sprockets<\/p>\n\n

Caract\u00e9ristiques du pipeline d'actifs\u00a0:<\/strong><\/h5>\n
1.Concat\u00e9ner les actifs<\/h6>\n

Cette fonctionnalit\u00e9 est importante dans un environnement de production, car elle peut r\u00e9duire le nombre de requ\u00eates qu'un navigateur doit effectuer pour afficher une page Web. Les navigateurs Web sont limit\u00e9s dans le nombre de requ\u00eates qu'ils peuvent effectuer en parall\u00e8le, donc moins de requ\u00eates peut signifier un chargement plus rapide de l'application.<\/p>\n

Des rails<\/strong><\/a> 2.x a introduit la possibilit\u00e9 de concat\u00e9ner les ressources JavaScript et CSS en pla\u00e7ant :cache => true \u00e0 la fin des m\u00e9thodes javascript_include_tag et stylesheet_link_tag. Mais cette technique pr\u00e9sente certaines limites. Par exemple, il ne peut pas g\u00e9n\u00e9rer les caches \u00e0 l\u2019avance et il n\u2019est pas en mesure d\u2019inclure de mani\u00e8re transparente les ressources fournies par des biblioth\u00e8ques tierces.<\/p>\n\n

2.Minification ou compression des actifs<\/strong><\/h6>\n

Pour les fichiers CSS, la compression est effectu\u00e9e en supprimant les espaces et les commentaires. Pour JavaScript, des processus plus complexes peuvent \u00eatre appliqu\u00e9s. nous pouvons choisir parmi un ensemble d'options int\u00e9gr\u00e9es ou sp\u00e9cifier les n\u00f4tres.<\/p>\n

3. Il permet de coder des actifs via un langage de niveau sup\u00e9rieur, avec une pr\u00e9compilation jusqu'aux actifs r\u00e9els. Les langages pris en charge incluent Sass pour CSS, CoffeeScript pour JavaScript et ERB pour les deux par d\u00e9faut. Dans les anciennes versions du pipeline d'actifs Rails, tous les actifs sont situ\u00e9s dans des sous-r\u00e9pertoires publics tels que les images, les javascripts et les feuilles de style.<\/p>\n

Avec le pipeline d'actifs, l'emplacement privil\u00e9gi\u00e9 pour ces actifs est d\u00e9sormais le r\u00e9pertoire app\/assets. Les fichiers de ce r\u00e9pertoire sont servis par le middleware Sprockets inclus dans la gem sprockets. Les actifs peuvent toujours \u00eatre plac\u00e9s dans la hi\u00e9rarchie publique. Tous les actifs publics seront servis sous forme de fichiers statiques par l'application ou le serveur Web. nous devrions utiliser app\/assets pour les fichiers qui doivent subir un pr\u00e9traitement avant d'\u00eatre servis.<\/p>\n

En production, Rails pr\u00e9compile ces fichiers en public\/assets par d\u00e9faut. Les copies pr\u00e9compil\u00e9es sont ensuite servies comme ressources statiques par le serveur Web. Les fichiers dans app\/assets ne sont jamais servis directement en production.<\/p>\n

Lorsque nous g\u00e9n\u00e9rons un \u00e9chafaudage ou un contr\u00f4leur, Rails g\u00e9n\u00e8re \u00e9galement un fichier JavaScript (ou un fichier CoffeeScript si la gemme coffee-rails est dans le Gemfile) et un fichier de feuille de style en cascade (ou un fichier SCSS si sass-rails est dans le Gemfile) pour ce contr\u00f4leur.<\/p>\n\n

Organisation des actifs\u00a0:<\/strong><\/h5>\n

La plus grande diff\u00e9rence pratique entre les applications Rails 3.0 et Rails 3.1 r\u00e9side dans le changement de l'emplacement des fichiers d'actifs tels que les images, les feuilles de style et les fichiers JavaScript. Dans les versions pr\u00e9c\u00e9dentes du pipeline d'actifs Rails, ces fichiers se trouvaient tous dans le r\u00e9pertoire public\/\u00a0:<\/p>\n

public\/images\/<\/p>\n

public\/feuilles de style\/<\/p>\n

public\/javascripts\/<\/p>\n

Dans Rails 3.1 et Rails 3.2.3, l'emplacement de ces fichiers diff\u00e8re selon qu'ils sont cr\u00e9\u00e9s par nous ou proviennent d'un fournisseur externe. Dans ce cas, les fichiers se trouvent dans le r\u00e9pertoire app\/assets\u00a0:<\/p>\n

application\/actifs\/images\/<\/p>\n

application\/actifs\/feuilles de style\/<\/p>\n

application\/actifs\/javascripts\/<\/p>\n

Dans le cas de code ou d'images provenant de fournisseurs externes, nous utilisons le r\u00e9pertoire supplier\/assets\u00a0:<\/p>\n

fournisseur\/actifs\/images\/<\/p>\n

fournisseur\/actifs\/feuilles de style\/<\/p>\n

fournisseur\/actifs\/javascripts\/<\/p>\n

Fichiers manifestes<\/p>\n

Ce sont des fichiers js ou css simples contenant des processeurs de directives, des lignes de commentaires suivies d'un =<\/p>\n

\/\/ …<\/p>\n

\/\/= n\u00e9cessite jquery<\/p>\n

\/\/= n\u00e9cessite jquery_ujs<\/p>\n

\/\/= require_tree .<\/p>\n

Ou:<\/p>\n

\/* …<\/p>\n

*= require_self<\/p>\n

*= require_tree .<\/p>\n

Ces fichiers manifestes font r\u00e9f\u00e9rence et incluent d\u2019autres actifs dont ils d\u00e9pendent. require_directory et require_tree nous permettent d'exiger des r\u00e9pertoires entiers et leurs enfants, require_self inclut \u00e9galement tous les js ou css dans le fichier manifeste lui-m\u00eame.<\/p>\nPrenez contact avec nous.<\/a>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Abonnez-vous pour les derni\u00e8res mises \u00e0 jour<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\t\t\t\t\t