Django, webpack, bower и gulp

Опубликовано 15 мая 2016

В наше время сборка фронтенда становится актуальным и всё более интересным вопросом. Если раньше собирать особо ничего и не требовалось, так как проекты состояли лишь из набора стилей и скриптов, то сейчас, с развитием javascript, появляется всё больше возможностей и интересных технологий.

Фронтенд меняется, а вместе с ним должны меняться и мы.

В качестве демонстрационного проекта буду рассматривать мой шаблон проекта для Django.

Итак, у нас в проекте используются технологии:

стили в scss, с трансляцией в css
скрипты на javascript (ES2015, ES7, JSX), с трансляцией в ES5
для сборки скриптов (и стилей) в бандл используется webpack
для установки зависимостей для сборки проекта используется npm
для установки библиотек от вендоров (статика) — bower
для задач по сборке фронтенда используется gulp
gulpfile использует синтаксис ES2015 и требует Node 6.

Полезные ссылки

Привожу все ссылки на исходники вначале статьи, так как дальше кода не будет, а будет общее описание подхода.

Структура директорий

Приведу частичную структуру директорий, касающуюся только фронтенда.

.
├── assets
│   ├── js
│   │   └── index.js
│   └── sass
│       └── index.scss
├── .bowerrc
├── bower.json
├── gulpfile.js
├── package.json
├── src
│   ├── manage.py
│   ├── project_name
│   │   ├── __init__.py
│   │   ├── static
│   │   │   ├── build
│   │   │   ├── css
│   │   │   ├── vendor
│   │   │   ├── img
│   │   │   └── js
│   │   ├── templates
│   │   ├── urls.py
│   │   └── views.py
└── webpack.config.js

Итак, как видно у нас две основные директории — src с исходниками приложения (бэкенда) и assets с исходниками графического интерфейса (фронтенд).

Преобразованные исходные файлы собираются в бандлы и кладутся в директорию проекта project_name/static/build, откуда и подключаются. Таким образом сборка прозрачно интегрируется с подсистемой статических файлов Django (django.contrib.staticfiles).

Зависимости проекта

Все зависимости для сборки проекта описаны в файле package.json. При развёртывании они устанавливаются с помощью команды npm install.

Также используется bower для управления статикой, а конкретно для удобной установки и обновления библиотек. Все либы ставятся в project_name/static/vendor/ и коммитятся в репозиторий.

Стили

Стили лежат в директории assets/scss и импортируются в файл index.scss. Сборка происходит с помощью тасков в gulp: sass:dev и sass:prod. В область видимости sass добавлена директория node_modules, так что исходники их сторонних пакетов можно импортировать прямо оттуда.

Пример подключения bootstrap-sass:

$ cat assets/sass/index.scss

@import "bootstrap-sass/assets/stylesheets/bootstrap";

Для дополнительного удобства разработки, в gulp подключен Browsersync, так что менять стилевое оформление можно прямо «на ходу». Разумеется, всё запускается автоматически, одной командой, но об этом позже.

Скрипты

Скрипты лежат соответственно в assets/js и подключаются в index.js. Сборка происходит с помощью webpack. Кстати сборщик умеет автоматически подключать нужные стили прямо в runtime (аттачит их в head страницы).

Поддерживается синтаксис ES2015 с фичами из ES7, а также JSX. За транспайлинг отвечает babel.

Задачи для сборки проекта

Для сборки проекта используется два типа задач — сборка в продакшн и девелопмент-сборка. Отличие сборок заключается в том, что для боевой сборки мы используем минификацию и прочие оптимизации, а для локальной — нет. На скорости это тоже отражается, так как пересборка изменений происходит на лету, при изменении исходных файлов — за этим следит gulp.

Вот список наших задач: - js:dev и js:prod — сборка яваскрипта - sass:dev и sass:prod — сборка стилей - django-runserver — запуск сервера django - browser-sync — запуск сервера browsersync - watch — слежение за изменёнными исходниками и запуск пересборки. Отслеживаются только стили, так как javascript сжимается вебпаком, который работает в режиме наблюдения (watch). Такое разделение обусловлено тем, что вебпак знает как эффективнее пересобрать изменившийся файл. - default — запуск сборки стилей, скриптов, сервера django, browsersync и слежения за изменениями. Команды запускаются для сборки разрабатываемой версии. - deploy — сборка стилей и скриптов в режиме для продакшена.

Интеграция django и gulp

Ребята из CaktusGroup в своём блоге описали опыт по интеграции сборки ассетов в Django−проекте. Вместо того, чтобы привязываться к конкретным инструментам Django (pipeline или compressor), они решили инвертировать процесс — и научили gulp запускать Django-проект (runserver) вместе с другими задачами.

Этот подход реализован и у нас, и, должен сказать — работает превосходно. Для того, чтобы приступить к полноценной разработке, достаточно одной команды — gulp. Всё запустится автоматически и будет готово к работе через несколько секунд. А благодаря Browsersync ещё и вкладка с сайтом откроется в браузере автоматически :)

Единственный нюанс в том, чтобы настроить работу Browsersync на порту 8000, а Django запускать на другом, например, 3000 и проксировать запросы от первого ко второму. Тогда для разработчика вообще всё будет прозрачно.

Итого

Данный подход позволяет нам ускорить процесс разработки и сделать его более удобным. Отсутствие ограничений в выборе используемых технологий и настройке сборки позволяет максимально гибко подстраиваться под меняющиеся реалии веб-разработки.

Одно могу сказать точно — пока в Django не появится крутой asset pipeline, мы будем использовать описанный в статье подход к разработке фронтенда.

Asyncee