Gulp stylus: gulp-stylus + gulp-concat = любовь? — Хабр Q&A — Вебджем.рф

Содержание

инструкция для начинающих — WebBeaver.ru

February 24, 2017

Этой статье сто лет в обед. Возможно, что-то изменилось/сломалось/отвалилось. Имей в виду.

Рассказывать про то, что такое Gulp, как установить Node.js и прочее не буду. Инфы итак вагон и маленькая тележка. Лучше сфокусируемся на нужном.

1. Что используется и что происходит?

Шаблонизатор — Pug(Jade), файлы компилируются в обычный HTML.
Препроцессор — Stylus, так же компилируются в обычный CSS.
С помощью autoprefixer, в стилях расставляются префиксы.
Стили и JS собираются, минимизируются.
SVG-иконки собираются в спрайт.
Шрифты конвертируются из ttf в woff и woff2.
Картинки оптимизируются через TinyPNG (нужно зарегистрироваться и указать ключ).
Используется browser-sync. При изменении каких-то файлов, страница автоматически перезагружается.
Если допустить ошибку в . styl/.pug — выводится ошибка.
Gulp следит не только за изменением файлов, но и за добавлением новых.

2. Что там по папкам?

У меня файловая структура имеет такой вид:

dev
- blocks
  - _mixins
- fonts (шрифты в формате ttf)
- images
  - icons (SVG-иконки для спрайта)
- js
- libs
- pages
- styles
  - helpers
public
- css
- fonts
- images
- js

Все задачи делятся на две категории. Задачи из первой используются при разработке и постоянно выполнятся. Из второй (конвертация шрифтов, оптимизация картинок, минификация CSS/JS) — запускаются один раз, после окончания разработки.

Давайте пробежимся по gulpfile.js и посмотрим какие таски что делают.

BrowserSyns.
Запукает сервер, при изменении каких-то файлов — перезагружает страницу.

Images/Fonts/Scripts.
Переносит картинки, шрифты и скрипты.

Pages.
Компилирует .pug файлы в HTML.

Styles.
Компилирует стили (использую stylus), расставляет префиксы.

SvgSpriteBuild.
Собирает спрайт из SVG-иконок из папки images/icons.

TinyPNG.
Прогоняет jpg, jpeg, png файлы через сервис TinyPNG.

ttf2woff/ttf2woff2.
Генерирует woff и woff2 файлы из ttf.

cssMin/jsMin.
Минифицирует CSS/JS файлы и сохраняет их с суффиксом «.min».

Рабочий процесс

В командной строке вводим «gulp». По умолчанию, gulp запускает сервер, открывает в браузере страницу, компилирует и переносит всё, что надо и начинает следить за изменением файлов.

Кроме того, gulp следит не только за изменением файлов, но и за добавлением новых. То есть, если вы создали новую страницу, файл стилей или скриптов или добавили новую иконку, не нужно перезагружать всё. Gulp автоматом их подхватит.

Так же создастся SVG-спрайт. ID для элементов спрайта берутся из названий файлов иконок (как использовать и как создавать его вручную писал тут).

Создаём pug-страницы в /dev/pages, styl-стили — в styles, SVG-иконки кидаем в /images/icons, а шрифты, в формате ttf, — в папку /fonts.

Deploy

После окончания вёрстки, вводим команду «gulp deploy». TTF-шрифты в папке конвертируются в woff и woff2, картинки прогонятся через TinyPNG (нужно предварительно зарегистрироваться у них на сайте, получить клюс и ввести его в gulpfile.js), а CSS и JS — минимизируются.

gulp-stylus-file — Анализ работоспособности пакета npm

Все уязвимости безопасности принадлежат производственных зависимостей прямых и косвенных пакеты.

Риск безопасности и лицензии для важных версий

Все версии

9003 9 02.

222 |

Версия				Уязвимости	Лицензионный риск
07/2020	Популярный	C H M L	H M L

License

Массачусетский технологический институт

Политика безопасности

Нет

Ваш проект подвержен уязвимостям?

Сканируйте свои проекты на наличие уязвимостей. Быстро исправить с помощью автоматизированного исправления. Начните работу со Snyk бесплатно.

Начните бесплатно

Еженедельные загрузки (2)

Скачать тренд

Звезды GitHub: ?
Вилки: ?
Авторы: —

Частота фиксации

Недоступные данные фиксации

Открытые проблемы: ?
Открыть PR: ?
Последняя версия: 3 года назад
Последняя фиксация: неизвестный

Дальнейший анализ состояния обслуживания gulp-stylus-file на основе каденция выпущенных версий npm, активность репозитория, и другие точки данных определили, что его обслуживание Неактивный.

Важным сигналом обслуживания проекта для gulp-stylus-file является это не видел никаких новых версий, выпущенных для npm в за последние 12 месяцев и может считаться прекращенным проектом или проектом, который получает мало внимания со стороны его сопровождающих.

За последний месяц мы не обнаружили никаких запросов на вытягивание или изменений в статус issue был обнаружен для репозитория GitHub.

Совместимость с Node.js: не определено

Возраст: 3 года
Зависимости: 0 Прямые
Версии: 3
Установочный размер: 1,81 КБ
Распределенные теги: 1
Количество файлов: 3
Обслуживающий персонал: 1
Типы TS: Нет

gulp-stylus-file имеет более одного и последнего тега по умолчанию, опубликованного для пакет нпм.

Это означает, что для этого могут быть доступны другие теги. пакет, например рядом, чтобы указать будущие выпуски, или стабильный, чтобы указать стабильные релизы.

Стилус | WebStorm Documentation

WebStorm позволяет на лету переводить код Stylus в CSS.

Перед началом работы

Убедитесь, что на вашем компьютере установлен Node.js.
Установите и включите плагин Stylus в меню «Настройки | Страница плагинов, вкладка Marketplace, как описано в разделе Установка плагинов из репозитория JetBrains.
Убедитесь, что в настройках включен плагин File Watchers. Нажмите Ctrl+Alt+S , чтобы открыть настройки IDE и выбрать Плагины. Перейдите на вкладку «Установлено». В поле поиска введите File Watchers. Дополнительные сведения о подключаемых модулях см. в разделе Управление подключаемыми модулями.

Установка Stylus

Во встроенном терминале ( Alt+F12 ) введите:
npm install — официальный сайт global stylus
Подробнее.

Компиляция кода Stylus

Для автоматической компиляции кода вам необходимо настроить Stylus File Watcher, который будет отслеживать изменения в ваших файлах и запускать компилятор.

Когда вы открываете файл, WebStorm проверяет, доступен ли в текущем проекте соответствующий File Watcher. Если такой File Watcher настроен, но отключен, WebStorm отображает всплывающее окно, которое информирует вас о настроенном File Watcher и предлагает включить его.

Если соответствующий File Watcher настроен и включен в текущем проекте, WebStorm автоматически запускает компилятор по событию, указанному в диалоговом окне New Watcher.

Если установлен флажок Автоматически сохранять отредактированные файлы для срабатывания наблюдателя, наблюдатель за файлами вызывается, как только в исходный код вносятся какие-либо изменения.
Если флажок Автосохранение отредактированных файлов для срабатывания наблюдателя снят, при сохранении запускается наблюдатель файлов (Файл | Сохранить все, Ctrl+S ) или при перемещении фокуса из WebStorm (при деактивации фрейма).

Узнайте больше от File Watchers.

WebStorm создает отдельный файл со сгенерированным выводом. Файл имеет имя исходного файла Stylus и расширение .css. Расположение сгенерированных файлов определяется в поле Выходные пути для обновления диалогового окна Новый наблюдатель. Однако в дереве проекта они отображаются под исходным файлом, который теперь отображается как узел.

Создать наблюдателя за файлами

В диалоговом окне «Настройки» ( Ctrl+Alt+S ) щелкните «Следопыты за файлами» в разделе «Инструменты». На открывшейся странице File Watchers отображается список уже настроенных File Watchers.
Щелкните или нажмите Alt+Insert и выберите из списка предопределенный шаблон Stylus.
В поле Программа укажите путь к исполняемому файлу:
Введите путь вручную или нажмите и выберите расположение файла в открывшемся диалоге.
Действуйте, как описано в File Watchers.

Настройка подсветки синтаксиса

Вы можете настроить подсветку синтаксиса с поддержкой стилуса в соответствии со своими предпочтениями и привычками.

Gulp stylus: gulp-stylus + gulp-concat = любовь? — Хабр Q&A