Создание социконок с помощью 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, если совсем упрощённо:
- Он наблюдает за изменениями файлов jade в папке app
- Конвертирует все файлы .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
Этой статье сто лет в обед. Возможно, что-то изменилось/сломалось/отвалилось. Имей в виду.
Рассказывать про то, что такое Gulp, как установить Node.js и прочее не буду. Инфы итак вагон и маленькая тележка. Лучше сфокусируемся на нужном.
1. Что используется и что происходит?
- Шаблонизатор — Pug(Jade), файлы компилируются в обычный HTML.
- С помощью 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
- blocks
- public
- css
- fonts
- images
- js
Все задачи делятся на две категории. Задачи из первой используются при разработке и постоянно выполнятся. Из второй (конвертация шрифтов, оптимизация картинок, минификация CSS/JS) — запускаются один раз, после окончания разработки.
Давайте пробежимся по gulpfile.js и посмотрим какие таски что делают.
BrowserSyns.
Запукает сервер, при изменении каких-то файлов — перезагружает страницу.
Images/Fonts/Scripts.
Переносит картинки, шрифты и скрипты.
Pages.
Компилирует .pug файлы в HTML.
Styles.
Компилирует стили (использую stylus), расставляет префиксы.
SvgSpriteBuild.
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 — минимизируются.
// jshint asi: правда | |
var gulp = require(‘gulp’) // главный парень | |
var clone = require(‘gulp-clone’) // используется для разветвления потока | |
var notify = require(‘gulp-notify’) // уведомления на уровне ОС | |
var rename = require(‘gulp-rename’) // переименовать файлы в потоке | |
var stylus = require(‘gulp-stylus’) // превратить код стилуса в css | |
var plumber = require(‘gulp-plumber’) // обработка ошибок | |
var beautify = require(‘gulp-cssbeautify’) // сделать файлы удобочитаемыми | |
var sourcemap = require(‘gulp-sourcemaps’) // запись исходных карт | |
var minifycss = require(‘gulp-minify-css’) // уменьшить код css | |
var autoprefix = require(‘gulp-autoprefixer’) // префикс любого css с низкой поддержкой | |
var combinemq = require(‘gulp-combine-media-queries’) // префикс любого css с низкой поддержкой | |
путей = { | |
стилус: [‘assets/styl/style.![]() | |
вывод: ‘активы/css/’ | |
} | |
вар сантехникОптс = { | |
errorHandler: notify.onError(«Ошибка: <%= error.message %>«) | |
} | |
gulp.task(‘css’, функция(){ | |
// подготовить код css | |
var stream = gulp.src(paths.stylus) // получаем файл стилуса | |
.![]() | |
.pipe(sourcemap.init()) // будьте готовы написать исходную карту | |
.pipe(stylus()) // превращаем стилус в css | |
.pipe(combinemq()) // поместить все медиа-запросы в конец | |
.pipe(autoprefix(‘последние 2 версии’)) // автопрефикс кода css | |
// сделать style.css | |
stream.pipe(clone()) // делаем копию потока до автопрефикса | |
.![]() | |
.pipe(gulp.dest(paths.output)) // сохранить в папку dist | |
// сделать style.min.css | |
stream.pipe(clone()) // делаем копию потока до автопрефикса | |
.pipe(minifycss()) // минимизировать его (удалить исходную карту) | |
.pipe(sourcemap.write()) // запись исходной карты | |
.pipe(rename(‘style.min.css’)) // добавить .min к имени файла | |
.pipe(gulp.dest(paths.output)) // сохранить в папку dist | |
обратный поток | |
}) | |
gulp.![]() | |
gulp.watch(paths.stylus, [‘css’]) // отслеживаем изменения и запускаем задачу css | |
}) | |
gulp.task(‘по умолчанию’, [‘css’]) |
gulp-stylus — Анализ работоспособности пакетов npm
Все уязвимости безопасности относятся к производственных зависимостей прямых и косвенных пакеты.
Риск безопасности и лицензии для основных версий
Все версии
Версия | Уязвимости | Лицензионный риск | |||
---|---|---|---|---|---|
3.![]() | | | 12/2022 |
|
| |
2.![]() | | | 12/2021 |
|
| 9000 7|
2,7 .![]() | | | 12/2017 | Популярные |
|
|
1.![]() | | | 01/2015 |
|
| |
0.![]() | | | 04/2014 |
|
|
Ваш проект подвержен уязвимостям?
Сканируйте свои проекты на наличие уязвимостей. Быстро исправить с помощью автоматизированного
исправления. Начните работу со Snyk бесплатно.
Начните бесплатно
Загрузка за неделю (12 595)
Скачать тренд
- Звезды GitHub
- 224
- Вилки
- 63
- Авторы
- 40
Популярность прямого использования
ТОП 5%Пакет npm gulp-stylus получает в общей сложности 12 595 загрузок в неделю. Таким образом, мы забили Уровень популярности gulp-stylus должен быть признан.
На основе статистики проекта из репозитория GitHub для
npm package gulp-stylus, мы обнаружили, что он
снялся 224 раза.
Загрузки рассчитываются как скользящие средние за период из последних 12 месяцев, за исключением выходных и известных отсутствующих точек данных.
Частота фиксации
- Открытые проблемы
- 0
- Открытый PR
- 1
- Последняя версия
- 5 месяцев назад
- Последняя фиксация
- 5 месяцев назад
Дальнейший анализ состояния обслуживания gulp-stylus на основе
каденция выпущенных версий npm, активность репозитория,
и другие точки данных определили, что его обслуживание
Устойчивый.