инструкция для начинающих — WebBeaver.ru
Этой статье сто лет в обед. Возможно, что-то изменилось/сломалось/отвалилось. Имей в виду.
Рассказывать про то, что такое 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
- blocks
- 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
Все уязвимости безопасности принадлежат производственных зависимостей прямых и косвенных пакеты.
Риск безопасности и лицензии для важных версий
Все версии
Версия | Уязвимости | Лицензионный риск | 07/2020 | Популярный |
|
|
---|
Ваш проект подвержен уязвимостям?
Сканируйте свои проекты на наличие уязвимостей. Быстро исправить с помощью автоматизированного
исправления. Начните работу со Snyk бесплатно.
Начните бесплатно
Еженедельные загрузки (2)
Скачать тренд
- Звезды GitHub
- ?
- Вилки
- ?
- Авторы
- —
Популярность прямого использования
Пакет npm gulp-stylus-file получает в общей сложности 2 загрузки в неделю. Таким образом, мы забили Уровень популярности gulp-stylus-file будет ограничен.
На основе статистики проекта из репозитория GitHub для
npm package gulp-stylus-file мы обнаружили, что он был
снялся? раз.
Загрузки рассчитываются как скользящие средние за период из последних 12 месяцев, за исключением выходных и известных отсутствующих точек данных.
Частота фиксации
Недоступные данные фиксации
- Открытые проблемы
- ?
- Открыть 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.
Настройка подсветки синтаксиса
Вы можете настроить подсветку синтаксиса с поддержкой стилуса в соответствии со своими предпочтениями и привычками.