Gulp stylus: stevelacy/gulp-stylus: Stylus plugin for gulp

Создание социконок с помощью Gulp, stylus, bower, font-awesome, yeoman MODX

Создание рабочей папки проекта с помощью Yeoman

Создадим папку с названием myicons и воспользуемся генератором Tapp, который создаст все директории с пакетами Stylus, Jade, Gulp, Browserify, Bower и остальными.

При успешном запуске Yeoman у вас должна получится такая картинка:

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

Запустим Gulp командой:

gulp serve

Остальные команды вы можете просмотреть в файле .gulpfile.

При успешном запуске у вас должна получится следующая картинка:

кроме этого должно открыться окно браузера по-умолчанию по адресу http://localhost:9000, которая будет иметь следующий вид:

Перейдём к нашему главному шаблону app/index. jade и вставим туда код для социконок, у меня получился такой:

Пару слов о том, как работает gulp с jade шаблоном в нашем случае при запуске команды gulp serve, если совсем упрощённо:

1. Он наблюдает за изменениями файлов jade в папке app
2. Конвертирует все файлы .jade в .html, сжимает и передаёт их в папку dist

Установка и подключение Font-awesome

Tapp генератор установит также и Bower — установщик пакетов. Воспользуемся им и установим иконочный шрифт Font Awesome:

bower install font-awesome

Укажем стили в index.jade:

После этого в браузере у вас должны отобразится иконки:

Создание стилей с помощью Stylus

В комплекте у нас шёл и Stylus, цвета для социконок я брал с Brandcolors. Давайте воспользуемся мощью Stylus, создадим пару функций и придадим стили нашему коду, сделанному по BEM-методологии:

Для красоты я добавил transition свойство при наведении и уходе с иконки, поэтому получился такой код.

В результате этого должны получится вот такие иконки:

Код для вставки в ваш сайт можете найти в dist/index.html и dist/styles/main.css

Я создал на Github репозиторий с этим кодом, поэтому можете сразу склонировать себе и запустить проект:

Демо можете увидеть внизу на этом сайте. Как обычно — не стесняйтесь задавать вопросы и давать замечания в комментариях.

14-01-2016 Frontend Yeoman Gulp Виктор Матушевский

Создание SVG спрайтов с помощью Gulp… Введение в PostCSS

Please enable JavaScript to view the comments powered by Disqus.

инструкция для начинающих — 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 — Анализ работоспособности пакетов npm

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

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

Все версии

9 02.2022 |

Версия				Уязвимости	Лицензионный риск
12/2022		C H M L	H M L
2. 7.1	|	12/2021		C H M L	H M L
2. 7.0	|	12/2017	Popular	C H M L	H M L
1. 3.7	|	01/2015		C H M L	H M L
0. 2.1	|	04/2014		C H M L	H M L

License

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

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

Нет

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

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

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

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

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

Звезды GitHub

224

Вилки

63

Авторы

40

---

Популярность прямого использования

TOP 5%

---

Пакет npm gulp-stylus получает в общей сложности 9 354 загрузки в неделю. Таким образом, мы забили уровень популярности gulp-stylus должен быть Small.

На основе статистики проекта из репозитория GitHub для npm package gulp-stylus, мы обнаружили, что он снялся 224 раза.

Загрузки рассчитываются как скользящие средние за период из последних 12 месяцев, за исключением выходных и известных отсутствующих точек данных.

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

Открытые проблемы

0

Открытый заказ на продажу

1

Последняя версия

4 месяца назад

Последняя фиксация

4 месяца назад

---

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

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

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

Совместимость с Node.js

>= 4.2.0

---

Возраст

9 лет

Зависимости

7 прямых

Версии

49

Размер установки

20,6 КБ

Распределенные теги

1

Количество файлов

27

Обслуживающий персонал

1

Типы TS

Да

---

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

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

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

Угроза безопасности и лицензии для основных версий

Все версии

902.25

Версия				Уязвимости	Лицензионный риск
2 |	08/2015		C H M L	H M L
1. 0.6	|	08/2015		C H M L	H M L

Лицензия

ИСК

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

Нет

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

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

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

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

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

Звезды GitHub

?

Вилки

?

Авторы

—

---

Популярность прямого использования

---

Пакет npm gulp-stylus-tree получает в общей сложности 4 загрузки в неделю. Таким образом, мы забили Уровень популярности gulp-stylus-tree будет ограничен.

На основе статистики проекта из репозитория GitHub для npm gulp-stylus-tree мы обнаружили, что он снялся? раз.

Загрузки рассчитываются как скользящие средние за период из последних 12 месяцев, за исключением выходных и известных отсутствующих точек данных.

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

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

Открытые проблемы

?

Открытый PR

?

Последняя версия

8 лет назад

Последняя фиксация

неизвестный

---

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