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

Содержание

Создание социконок с помощью 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

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 · GitHub

	// 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. styl’],
	вывод: ‘активы/css/’
	}

	вар сантехникОптс = {
	errorHandler: notify.onError(«Ошибка: <%= error.message %>«)
	}

	gulp.task(‘css’, функция(){
	// подготовить код css
	var stream = gulp.src(paths.stylus) // получаем файл стилуса
	. pipe(plumber(plumberOpts)) // уведомить нас, если появятся какие-либо ошибки
	.pipe(sourcemap.init()) // будьте готовы написать исходную карту
	.pipe(stylus()) // превращаем стилус в css
	.pipe(combinemq()) // поместить все медиа-запросы в конец
	.pipe(sourcemap.write()) // запись исходной карты
	.pipe(autoprefix(‘последние 2 версии’)) // автопрефикс кода css

	// сделать style.css
	stream.pipe(clone()) // делаем копию потока до автопрефикса
	. pipe(beautify()) // делаем css действительно читаемым
	.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. task(‘часы’, [‘css’], функция(){
	gulp.watch(paths.stylus, [‘css’]) // отслеживаем изменения и запускаем задачу css
	})

	gulp.task(‘по умолчанию’, [‘css’])

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

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

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

Все версии

9000 7

Версия				Уязвимости	Лицензионный риск
3. 0.0	\|	12/2022		C H M 90 299 Д	В П Д 9 0299
2. 7.1	\|	12/2021		С Н М Л 9029 8	В С Д
2,7 . 0	\|	12/2017	Популярные	C H 90 305 М L	H M L 9029 9
1. 3.7	\|	01/2015		C H M 90 299 Д	В П Д 9 0299
0. 2.1	\|	04/2014		C H M 90 299 Д	В П Д 9 0299

Лицензия

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

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

Нет

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

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

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

Загрузка за неделю (12 595)

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

Звезды GitHub: 224
Вилки: 63
Авторы: 40

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

Открытые проблемы: 0
Открытый PR: 1
Последняя версия: 5 месяцев назад
Последняя фиксация: 5 месяцев назад

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

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