Понимание конвейера ресурсов Rails

Ruby on Rails — это полнофункциональный фреймворк для веб-разработки, написанный на Ruby. Для разработчика, который только начал работать с Ruby on Rails, многие вещи покажутся волшебными, например переменные экземпляра, определенные в контроллере, доступном для представлений. Еще одна такая вещь — конвейер ассетов, но временами он создает хаос, особенно при перемещении вещей в производство. В то время простой поиск в Google дал бы решение, но оно не казалось бы полным. Этот пост поможет вам лучше понять конвейер ресурсов Rails, чтобы в следующий раз вы не застряли с ним.

Конвейер ресурсов Rails

Код, написанный внутри папок app/assets и vendor/assets, составляет большую часть интерфейса в любом приложении Ruby on Rails. Любой Javascript или CSS, который мы пишем в этой папке, компилируется и минимизируется перед тем, как он будет передан браузерам в рабочей среде. Обо всем этом позаботится автоматически конвейер ресурсов, который по умолчанию поставляется вместе с Rails. Этот конвейер ресурсов реализуется гемом sprockets-rails. Это даже позволяет нам писать активы на другом языке или в препроцессорах и компилировать их в CSS и Javascript, понятные для браузера.

Приложение Ruby on Rails во время создания предоставляется с двумя файлами манифеста application.js и application.css. Эти два файла по умолчанию содержат несколько строк осмысленного кода, которые считаются обязательными. Давайте посмотрим на содержимое этих файлов и попробуем выяснить, для чего они нужны.

Файлы манифеста

/*
* Это файл манифеста, который будет скомпилирован в application.css, в который будут включены все файлы
* перечислено ниже.
*
* Любой файл CSS и SCSS в этом каталоге, lib/assets/stylesheets, vendor/assets/stylesheets,
* или поставщик/активы/таблицы стилей плагинов, если таковые имеются, можно указать здесь, используя относительный путь.
*
* Вы можете добавлять в этот файл стили для всего приложения, и они будут отображаться вверху страницы.
* скомпилированный файл, но обычно лучше создать новый файл для каждой области действия стиля.
*= требуется_я
*= требуемое_дерево.
*/

Это файл манифеста CSS по умолчанию, который включает все упомянутые файлы в один файл application.css. Ключевое слово require здесь работает так же, как и ключевое слово require в ruby. Он делает файл доступным в файле, из которого он вызывается. Ключевое слово require сначала ищет упомянутые файлы в папке app/assets/, если они там не найдены, оно будет искать в папке vendor/assets/.

«require_self» и «require_tree».

'require_self' загружает все содержимое того файла, из которого он вызывается, в нашем случае application.css в строку, где он упоминается. 'require_tree .' загружает все содержимое той же папки, где оно указано, в строку, где оно упоминается. Если нам нужно включить все файлы подпапки, используйте 'require_tree ./folder_name/'. Это полезно при использовании простого CSS. Но если мы хотим использовать SASS/SCSS, использовать глобальные переменные для цветов и т. д., нам нужно импортировать файл CSS, используя метод SCSS `@import`, а не `require`.

Пути активов

Нет большой разницы между папкой app/assets и vendor/assets. По соглашению рекомендуется использовать папку app/assets для пользовательских файлов CSS и Javascript, которые мы создаем, и папку uservendor/assets для CSS и Javascript любых сторонних плагинов.

Порядок поиска активов следующий:

/приложение/активы/изображения

/приложение/активы/javascripts

/приложение/активы/таблицы стилей

/vendor/assets/images

/активы/javascripts

/активы/таблица стилей

/[активы, включенные в драгоценные камни]

Предварительная компиляция активов

Чтобы скомпилировать все файлы и минимизировать их, мы должны запустить rake assets:precompile. Эта команда инициирует задачу rake, которая находит файлы, упомянутые в application.css, если они написаны в SCSS/SASS, они компилируются в CSS, а затем добавляются как часть файла application.css. Этот файл application.css связан с каждой страницей с помощью тега ссылки таблицы стилей, помощника просмотра рельсов. То же самое происходит и с application.js.

По умолчанию только файлы application.css и application.js являются файлами манифеста и, следовательно, предварительно компилируются. Но мы можем захотеть использовать один или несколько файлов в качестве файлов манифеста для разных макетов. В этом случае эти файлы должны быть добавлены в массив прекомпиляции в config/initializers/asset.rb.

Rails.application.config.assets.precompile += ['dashboard.js', 'dashboard.css']

Здесь, наряду с файлами application.css и application.js, файлы Dashboard.css и Dashboard.js считаются манифестом. Таким образом, во время прекомпиляции эти файлы также прекомпилируются. После предварительной компиляции эти вновь сгенерированные файлы помещаются в папку public/assets.

приложение-8cf9a6a42ecd8238b5d928c5ad7b4f4b440061daa2da0a0fe2016c7e92c9d955.css

приложение-ca682b893b6c32b8d053913db011cb78977866d8d1d6d95cf676e804adef35da.js

приложение-8cf9a6a42ecd8238b5d928c5ad7b4f4b440061daa2da0a0fe2016c7e92c9d955.css.gz

приложение-ca682b893b6c32b8d053913db011cb78977866d8d1d6d95cf676e804adef35da.js.gz

приборная панель-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css

приборная панель-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css.gz

папка public/assets

Это третья папка, в которой мы можем найти ресурсы в приложении rails, но добавление ресурсов сюда напрямую не рекомендуется, если только это не статический ресурс и он вообще не меняется. Также мы не сможем ссылаться на какие-либо файлы, размещенные в этой папке, с помощью помощников URL-адресов рельсов. Активы обычно предварительно компилируются только в производственной среде. Если вы хотите предварительно скомпилировать активы на локальном компьютере, запустите rake assets:precompile RAILS_ENV=production in local.

приборная панель-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css

приборная панель-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css.gz

Если вы посмотрите на приведенные выше имена файлов, к ним присоединены случайные 64 символа. Этот процесс называется снятием отпечатков пальцев, что делает все имя файла зависимым от содержимого файла. Этот метод действительно полезен при кэшировании ресурсов. Если содержимое файла остается прежним, имя файла также останется прежним, поэтому его можно кэшировать. Если содержимое меняется, имя меняется, а вместе с ним и кеш.

Помощники по URL-адресам ресурсов Sass

Всякий раз, когда мы помещаем некоторые шрифты, изображения в папку app/assets, а затем пытаемся получить к ним доступ из файлов CSS, SCSS, это будет нормально работать в разработке. Но в большинстве случаев он прерывает работу, говоря, что ресурс не найден /assets/bg-image.jpg. Это происходит особенно для пакетов шрифтов, которые мы включаем. Это потому, что мы бы дали что-то подобное для фонового изображения

фоновое изображение: url('/images/header_background.jpg');

В рабочей среде он попытается получить изображение из файла /images/header_background.jpg. Но в общедоступной папке с именем «header_background.jpg» не будет файлов, если мы не поместим файл в общедоступный каталог. Обычно мы помещаем их в app/assets или vendor/assets. Таким образом, во время предварительной компиляции он будет скомпилирован, и ко всем активам без js/CSS будет добавлен отпечаток пальца. Следовательно, все файлы изображений, файлы шрифтов будут содержать отпечатки пальцев в своем имени, и это не сработает.

header_background-5c2d30983dca95c015dda3f0a581ff39e9dbef809ec6290d1f8a771cc6a42e2b.png

Файлы компилируются и добавляются, как показано выше, в общую папку. Поэтому, чтобы сослаться на это в CSS, нам нужно использовать помощники путей ресурсов, предоставляемые рельсами. Вместо 'url('/images/header_backgroung.png')' используйте 'image-url('header_background.png')'. После предварительной компиляции это будет добавлено в виде

фоновое изображение: url('/images/header_background-5c2d30983dca95c015dda3f0a581ff39e9dbef809ec6290d1f8a771cc6a42e2b.png');

Я надеюсь, что этот пост помог вам получить представление о конвейере ресурсов Rails. Лучшее понимание конвейера ресурсов поможет вам сделать интерфейсный код более организованным и удобным в сопровождении. Если вы хотите узнать больше о конвейере активов, вот ссылка на официальное руководство.

Следите за нашей следующей статьей, чтобы узнать, есть ли у вас подходящие данные для анализа настроений.

Планируете получать данные из Интернета? Мы здесь, чтобы помочь. Дайте нам знать о ваших требованиях.