Рубрики
Без рубрики

Компиляция и обслуживание фронтальных активов в колбе

Вы, вероятно, не разработчик Frontend, и я предполагаю, что у вас нет желания стать единым. Я Фа … Tagged с помощью колбы, питона, программного обеспечения, фронта.

Вы, вероятно, не разработчик Frontend, и я предполагаю, что у вас нет желания стать единым. Я вполне уверен в этом, потому что в настоящее время вы занимаетесь учебным пособием, в отличие от жалоб на количество фронтальных рамок, которые вы были вынуждены учиться в последнее десятилетие (извините, From Fam, вы знаете, я люблю вас) Анкет

Каждый бэкэнд Dev должен смириться с суровой реальностью: значимые приложения не могут быть построены, не в конечном итоге не выявившись на написание некоторых стилей или Frontend JavaScript. С первых дней Django разработчики Python предпочли код Frontend монеты в качестве статических активов: перезападный термин, который, по -видимому, преуменьшает важность JavaScript, CSS или любых активов уровня презентаций, которые составляют веб -приложение. Было решено, что во вселенной существуют только два типа кода: Python, а не Python. Все, что не .py Файл считается «статическим» активом, заправленным в один каталог после того, как предположительно получил передачу от разработчика фронта. Это подразумеваемое мышление является несколько абсурдно, но также неудивительно.

Пришло время столкнуться с нашими страхами справиться с кодом Frontend в фланге Правильно Путь: написав стили в препроцессорах CSS, министерство файлов и обслуживая их в «связях», сродни эквиваленту WebPack. Если вы из тех людей, которые предпочли бы ссылаться на версию JQUERY 1.11 CDN, или включить ужасно общую библиотеку начальной загрузки, чтобы призвать ваше приложение для вас, пожалуйста, прекратите читать и уходите. Для тех из нас, у кого более высокие устремления, чем работа на полный рабочий день, поддерживая 30-летний устаревший кодекс для Ситибанка, мы узнаем о Флэк-Ассовые Анкет

Как это устроено

Приложения Flask с использованием библиотеки флезов, как правило, будут иметь два каталога, связанные со «статическими» активами. Один каталог зарезервирован для необработанного несущественного кода, в то время как другой предназначен для готовых к производству, сжатые активы, генерируемые из файлов, хранящихся в первом (этот готовый к производству каталог обычно называют /dist или /build папка). В зависимости от того, как мы настраиваем наше приложение, Assets Assets составляют статические активы в пучки при запуске. Это достигается с помощью нескольких вспомогательных библиотек Python, посвященных построению и сжатию файлов: Меньшек, и pyscss Скомпилируйте меньше/SCSS CSS соответственно, в то время как CSSMIN и jsmin Сжатие CSS/JavaScript.

В зависимости от нашего выбора стека, нам нужно установить соответствующие пакеты Python. Я планирую писать стили с меньшим количеством и добавить в свое приложение Frontend JavaScript:

$ pip install flask-assets lesscpy cssmin jsmin

Конфигурация флаг-ассет

Как и в случае с большинством плагинов колбы, мы можем настроить колбы, установив переменные в нашей конфигурации колбы верхнего уровня. Тот, кто создал эту библиотеку, сделал интересный выбор не документировать ни один из это , так что я собираюсь сэкономить вам время:

LESS_BIN = '/usr/local/bin/lessc'
ASSETS_DEBUG = False
ASSETS_AUTO_BUILD = True
  • Меньше_BIN : Меньше требует библиотеки NPM под названием меньше (Известно системе как меньшек ) для установки в нашей системе, чтобы меньше собирать в CSS. Запустить который меньшек в вашем терминале, чтобы найти этот путь. Сасс, эквивалентный этому, Sass_bin .
  • Assets_debug : Мы обязаны время от времени испортить стиль или JS -функцию, что иногда не становится очевидным, пока мы не создадим наши пучки и не пытаемся использовать наше приложение. Если мы установим эту переменную на Истинный , Flask-Assets не будет Отведите наши статические файлы, пока мы запускаем колбу в режиме отладки. Это полезно для устранения неполадок или JavaScript, пошли не так.
  • Assets_auto_build : Флаг, который скажет Флэзу, чтобы построить наши пакеты активов, когда колба запускается автоматически. Как правило, мы хотим установить это Истинный , если только вы не предпочели бы строить только активы с некоторой внешней силой (aka: вы раздражаете).

Создание пакетов активов

Прежде чем погрузиться в код, давайте установим структуру нашего приложения. Здесь ничего необычного:

app
├── /static
│   ├── /img
│   ├── /dist
│   │   ├── /css
│   │   └── /js
│   └── /src
│       ├── /js
│       └── /less
├─ /templates
├─ config.py
└─ app.py

Ключевой вывод состоит в том, что мы собираемся настроить колбы для поиска необработанных файлов для компиляции в статический/src/меньше и Статический/SRC/JS . Когда содержимое этих папок будет составлено, мы выберем результаты в Статический/Дист/Меньше и Статический/Dist/JS где они будут готовы служить.

Давайте уволим этого ребенка в app.py :

from flask import Flask
from flask_assets import Environment


app = Flask(__name__, instance_relative_config=False)

assets = Environment(app)

Мы инициализируем флезы, создав Среда экземпляр и инициализация его против Флески приложение объект. Существует альтернативный способ инициализации библиотеки через фабрику приложений Flask, но мы доберемся через мгновение.

Наш первый актив Статический/SRC/Меньше каталог. Мы собираемся собрать эти файлы в CSS, министерство полученного CSS и вывести его для производства:

from flask import Flask
from flask_assets import Environment, Bundle


app = Flask(__name__, instance_relative_config=False)

assets = Environment(app)
style_bundle = Bundle('src/less/*.less',
                     filters='less,cssmin',
                     output='dist/css/style.min.css',
                     extra={'rel': 'stylesheet/css'})
assets.register('main_styles', style_bundle)  # Register style bundle
style_bundle.build()  # Build LESS styles

Пакет Объект – это то, где происходит большая часть нашей магии. Компания может принять любое количество позиционных аргументов, где каждый аргумент – это путь файла, который включает в нашу пакет. Наш пример создает пакет из 'src/mess/*. меньше' , что означает «All .less файлы в src/less . «Вместо этого мы могли бы передать отдельные файлы (например, 'src/mess/main.less', 'src/mess/varials.less' и т. Д.) Если мы хотим, чтобы таблицы вишни по производству вишни. В этом сценарии важно отметить, что любой импорт в этих меньших файлах (например, @import './other_styles.less' ) также будет автоматически включен в наш пакет.

Следующий шаг в создании нашего Пакет передает некоторые необходимые аргументы ключевого слова:

  • Фильтры : Здесь мы говорим, какие библиотеки Python использовать для обработки Прохождение 'Меньше, cssmin' сообщает нашему пакету, что мы собираемся построить пакет из меньшего количества файлов, используя Меньшек, , который мы должны затем сжать, используя CSSMIN .
  • Вывод : Справочник, в котором будет сохранен нашу подготовку к производству.
  • Дополнительное : Добавляет дополнительные атрибуты HTML к выводу пакета в наш шаблон Jinja (это обычно не требуется).

После создания пачки стилей, называемых style_bundle , мы «зарегистрируем» пакет с нашей средой с Assets.register ('main_styles', style_bundle) ( 'main_styles' – это произвольное имя, которое мы присваиваем наше пакет, и style_bundle сама переменная).

Мы наконец строим наш пакет с style_bundle.build () Анкет Это выводит один файл CSS в dist/css/style.css Анкет

Создание пакета JavaScript

Процесс создания пакета для Frontend JavaScript практически идентичен пакету, который мы создали для стилей. Основное отличие – наше использование jsmin Фильтр, чтобы минимизировать файлы JS.

Вот пример создания пучков для обоих в унисон:

...

style_bundle = Bundle('src/less/*.less',
                     filters='less,cssmin',
                     output='dist/css/style.min.css',
                     extra={'rel': 'stylesheet/css'})
js_bundle = Bundle('src/js/main.js',
                   filters='jsmin',
                   output='dist/js/main.min.js')
assets.register('main_styles', style_bundle)
assets.register('main_js', js_bundle)
style_bundle.build()
js_bundle.build()

Служба пакетов через шаблоны страниц

Мы можем обслуживать наши вновь созданные активы в наших шаблонах страниц, как и любой другой статический активы:

{% extends "layout.jinja2" %}



Запуск вашего приложения Flask теперь должна привести к созданию стилей и JavaScript в SRC/Dist . Если все пойдет хорошо, ваши шаблоны страниц поднимут их, и ваше приложение будет выглядеть шикарно с некоторыми сексуальными, оптимизированными для выступления фронтальные активы.

Протеп!

По -видимому, есть альтернативный способ создания пучков полностью в шаблонах с нулевым кодом Python. Я лично не пробовал это, но простота синтаксиса довольно Круто:

{% assets filters="jsmin", output="src/js/main.js", "src/js/jquery.js"  %}



{% endassets %}

Специфичные пакеты Blueprint

Одной из самых мощных особенностей флагско-ассет является легкость, с которой мы можем создать пакеты активов, специфичных для чертежа. Это позволяет нам «сдвинуть код» соответствующие фронтальные активы, чтобы быть эксклюзивными для чертежей, в первую очередь для целей производительности. Мы собираемся опираться на пример проекта, который мы создали в прошлый раз в нашем Учебное пособие на фланг -чертеории Чтобы создать специфичные для чертежа пакеты.

Вот краткий обзор проекта с двумя зарегистрированными чертежами (/Main и/Admin), который мы создадим для активов для:

flask-assets-tutorial
├── /flask_assets_tutorial
│   ├── __init__.py
│   ├── assets.py
│   ├── /admin
│   │   ├── admin_routes.py
│   │   ├── /static
│   │   └── /templates
│   ├── /main
│   │   ├── main_routes.py
│   │   ├── /static
│   │   └── /templates
│   ├── /static
│   └── /templates
├── config.py
└── wsgi.py

У каждого из наших чертежей есть свои собственные Статический Папка, которая предназначена для содержания активов, специфичных для чертежа. Наше приложение все еще имеет Статический Собственная папка, содержащая активы, которые будут использоваться во всех чертежах. Прежде чем узнать подробности того, как это работает, давайте посмотрим, как мы создаем экземпляры флэк-ассеты на фабрике приложений Флэста:

"""Initialize app."""
from flask import Flask
from flask_assets import Environment
from .assets import compile_assets

assets = Environment()


def create_app():
    """Construct the core application."""
    app = Flask(__name__, instance_relative_config=False)
    app.config.from_object('config.Config')

    # Initialize plugins
    assets.init_app(app)

    with app.app_context():
        # Import parts of our application
        from .admin import admin_routes
        from .main import main_routes
        app.register_blueprint(admin_routes.admin_bp)
        app.register_blueprint(main_routes.main_bp)
        compile_assets(assets)

        return app

Давайте посмотрим, что происходит в Assets.py :

"""Compile static assets."""
from flask_assets import Bundle


def compile_assets(assets):
    """Configure and build asset bundles."""
    main_style_bundle = Bundle('src/less/*.less',
                               'main_bp/homepage.less',
                               filters='less,cssmin',
                               output='dist/css/landing.css',
                               extra={'rel': 'stylesheet/css'})
    main_js_bundle = Bundle('src/js/main.js',
                            filters='jsmin',
                            output='dist/js/main.min.js')
    admin_style_bundle = Bundle('src/less/*.less',
                                'admin_bp/admin.less',
                                filters='less,cssmin',
                                output='dist/css/account.css',
                                extra={'rel': 'stylesheet/css'})
    assets.register('main_styles', main_style_bundle)
    assets.register('main_js', main_js_bundle)
    assets.register('admin_styles', admin_style_bundle)
    main_style_bundle.build()
    main_js_bundle.build()
    admin_style_bundle.build()

Волшебство приходит, чтобы играть в Bundle () позиционные аргументы. В случае main_style_bundle , мы передаем глобальные стили с src/mess/*. меньше и Конкретный план Стили с main_bp/homepage.less Анкет Но подожди, main_bp не каталог! На самом деле, это зарегистрированное имя нашего основного плана, который мы создаем в main_routes.py :

main_bp = Blueprint('main_bp',
                    __name__,
                    template_folder='templates',
                    static_folder='static')  # Blueprint Configuration

При настройке static_folder = 'static' На нашем проекте мы говорим Флеску проверить активы в два Места: первое в flask_assets_tutorial/static , а затем flask_assets_tutorial/main/static второй. Bundle () признает, что main_bp является именем чертежа, в отличие от каталога и, таким образом, правильно разрешает актив.

Настройка активов, специфичных для чертежа, не является прогулкой в парке в первый раз. Официальная документация для флаг-ассет просто ужасен. В результате есть много подводных камней и причуд, которые могут разрушить чей -то день … особенно мой. Если вы застряли, я создал рабочий проект на GitHub здесь:

https://hackersandslackers.com/flask-assets/

Оригинал: “https://dev.to/hackersandslackers/compiling-and-serving-frontend-assets-in-flask-ml”