Gulp uncss: ben-eb/gulp-uncss: DEPRECATED. Remove unused CSS selectors.

Содержание

Grunt- и Gulp-таски для оптимизации производительности

#Grunt- и Gulp-таски для оптимизации производительности

Снижение производительности может влиять на вовлечённость пользователей,
на их ощущения от взаимодействия с сайтом и его доходность.
К счастью, команда проекта «Make The Web Faster» из Google
предложила набор наилучших практик для поддержания
ваших страниц лёгкими, быстрыми и привлекательными.
Они включают минификацию ресурсов вроде CSS и JavaScript,
оптимизацию изображений, встраивание CSS в разметку, удаление неиспользуемых стилей и т.д.

Если вы имеете полный доступ к вашему серверу, отличным вариантом для вас
будет использование модуля PageSpeed для Apache и Nginx
с фильтрами для многих из этих задач. Тем не менее, если же доступа нет, или вы
понимаете, что модуля будет не достаточно, существует достаточно плагинов для
систем сборок, использование которых, пожалуй, позволит восполнить пробелы с
более точным контролем производительности.

Ниже представлены Grunt- и Gulp-плагины, которые команда
Yeoman регулярно использует в своих проектах. Мы постарались сохранить список
целенаправленным и исключить прежние рекомендации, которые не представляют
такой большой ценности, но того, что представлено здесь достаточно, чтобы
помочь вам поддерживать страницы и их ресурсы настолько компактными, насколько это возможно.

Примечание: Генератор webapp для Grunt и Gulp от команды
Yeoman уже включает плагины для оптимизации изображений, конкатенации и
минификации HTML/CSS/JS. Мы считаем, webapp — отличная основа,
а настоящая статья охватывает плагины, выходящие за пределы этих процессов.

Сжатие и оптимизация изображений

Средняя веб-страница сейчас занимает чуть больше 1.5 Мб, включая
изображения, составляющие большую часть от этого объёма. Мы стремимся поддерживать
размеры наших изображений настолько малыми, насколько это возможно, чтобы
сократить время ожидания их загрузки пользователем.

При правильном балансе сжатия и формата вполне возможно загружать
изображения вашей страницы настолько быстро, насколько это возможно. Это очень важно для
пользователей мобильных устройств с ограниченными тарифными планами или
медленным подключением.

Grunt

Почему два плагина? Ок, вот вам отличный анализ различий между ними.
Можете выбрать один, наиболее подходящий для вас.

Gulp

На момент написания статьи ещё не существовало плагина для Gulp, использующего
ImageOptim.

Примечание: Ребята из Etsy выяснили, что добавление всего лишь
160 Kб изображений на их страницы увеличивает отказ пользователей мобильных
устройств на 12%. Если вы не можете сократить количество изображений на
страницах, хотя бы оптимизируйте их.

Генерация отзывчивых изображений для элемента

<picture>

Если у вас сайт с RWD, адаптирующийся под различные устройства, вы также
можете делать отзывчивыми и изображения.

Отдача излишне больших изображений браузеру может влиять на
производительность загрузки и отображения страницы, и это не единственные
характеристики, которые могут от этого пострадать.

Это одна из причин, по которой нам нужно использовать отзывчивые изображения, и в связи с этим
мы рады приветствовать srcset — то, что, как мы надеемся, приведёт к
полному внедрению элемента <picture>.

Существует несколько Grunt-плагинов, помогающих генерировать несколько изображений с различными разрешениями в рамках вашего процесса
сборки проекта.

Grunt

Кроме того, если вам нужно изменить размер больших изображений,
можете воспользоваться grunt-image-resize.

Примечание: Исследование Тима Кадлека в области отзывчивых изображений
привело к выводу, что их использование может
привести к экономии до 72% на размере изображений.
Несмотря на то, что пока ещё рано делать выбор в пользу отзывчивости, BBC и
Guardian используют Imager.js в качестве кросс-браузерного решения.

Минификация SVG изображений

SVG файлы, созданные в редакторах, обычно содержат большое количество
избыточной информации (мета-данные, комментарии, скрытые элементы и т.д.).
Всё это может быть совершенно безвредно удалено или сконвертировано в более
компактное представление, не влияя на отрисовку.

Grunt
Gulp

Генерация спрайтов

Grunt
Gulp

Конвертация изображений в WebP

WebP это современный формат изображений, который предлагает сжатие изображений
для веба с потерями и без. Изображения WebP со сжатием без потерь по размеру на 26%
меньше, чем PNG и со сжатием с потерями на 25-34% меньше, чем JPEG.
Это достаточно экономично и, к счастью, существуют Grunt- и Gulp-плагины
кодирования WebP.

Grunt
Gulp

Примечание: Тест, проведённый WebPageTest, говорит, что в
сравнении с JPEG загрузка изображений WebP происходит гораздо быстрее, благодаря их
маленькому размеру.
В Chrome Web Store выяснили, что использование WebP дало в среднем 30%
экономии, что сохраняет им несколько терабайт трафика в день.

Сборка SVG спрайтов с поддержкой для различных браузеров

Grunt

Gulp

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

Минификация CSS

Минификация устраняет лишние пробелы, переносы строк, отступы и символы,
которые обычно не нужны в релизной версии вашего продукта.
Сжатие HTML-, CSS- и JS-файлов может улучшить парсинг, выполнение и время
загрузки. Касательно CSS мы рекомендуем:

Grunt
Gulp

Удаление неиспользуемого CSS

В проектах, основанных на CSS-фреймворках вроде Bootstrap, Foundation и т.д. вы
обычно не используете всё разнообразие доступных стилей.
Вместо того, чтобы включать весь фреймворк в релиз, используйте UnCSS для
удаления неиспользуемых вашими страницами стилей. Таким образом, некоторые
разработчики облегчают свои таблицы стилей до 85% от исходного размера.

Grunt
Gulp

Примечание: Наиболее часто задаваемый разработчиками вопрос по поводу
UnCSS или процесса удаления неиспользуемого CSS это может ли он также работать
со стилями, внедряемыми в страницу динамически. Наш ответ — «да».
Это стало возможным благодаря тому, что UnCSS работает в паре с PhantomJS.
Разработчики получают от
10 до 120 Кб экономии на типовой Bootstrap-странице, и настолько же
хорошо UnCSS работает и с другими фреймворками.

Встроенный CSS

Если внешние CSS-ресурсы для конкретной страницы небольшие, вы можете
встроить их в вашу разметку, экономя при этом на дополнительных запросах к
серверу. Встраивание небольшого количества CSS позволяет браузеру мгновенно
приступить к отрисовке страницы.

Grunt
Gulp

Комбинирование медиа-выражений

Хоть это и не является рекомендацией команды PageSpeed, но вы имеете
возможность комбинировать медиа-выражения в единые определения. Мы сочли эти
плагины полезными для обработки CSS, генерируемого препроцессорами, которые
могут использовать вложенные определения медиа-запросов.

Grunt
Gulp

JavaScript

Минификация, сжатие JS

Grunt
Gulp

RequireJS (оптимизация с r.js)

Grunt
Gulp

Минификация HTML

Grunt
Gulp

Простая конкатенация

Grunt
Gulp

Общее сжатие для файлов/папок

Grunt
Gulp

Сжатие Zopfli

Алгоритм сжатия Zopfli — это библиотека сжатия с открытым исходным кодом,
которая генерирует выходные данные на 3-8% меньше в сравнении с zlib при
максимальном уровне сжатия.
Он лучше всего подходит для приложений, в которых данные сжимаются только один
раз, а затем передаются по сети большое количество раз.

Grunt
Gulp

Примечание: Когда в Google Fonts начали использовать Zopfli, шрифты стали
легче в среднем на 6%, а в некоторых случаях на 15%. По словам
Ильи Григорика, для Open Sans уменьшение размера было более чем на 10%,
что сказалось на уменьшении времени на отрисовку и загрузку.
Однако, изображения сжатые с Zofli декодируются дольше, чем обычные JPG. Эти
показатели можно использовать для принятия решения о целесообразности
использования WebP.

Встраивание CSS критического пути

Критический путь представляет собой код и ресурсы, необходимые для отрисовки
контента, расположенного в верхней части страницы (прим. пер.: дословно
«above-the-fold» — до сгиба, т.е. первый экран страницы) — то есть то, что
ваши пользователи увидят в первую очередь, когда они станут загружать вашу
страницу.
PageSpeed рекомендует встраивать ваши необходимые стили для улучшения
производительности.
В то время, как инструменты вроде mod_pagespeed достаточно высоко
эффективны для достижения этого, оптимизировать необходимые стили другими
инструментами гораздо сложнее.

Вы можете использовать PhantomJS со скриптами speedreport, чтобы
получить представление о том, какие стили отвечают за верхушку страницы и
затем вручную оптимизировать их.

Примечание: Пол Кинлэн написал букмарклет для оценки стилей верхушки
страницы, который тоже стоит посмотреть.

Asset pipeline (авто-обработка всех оптимизаций)

Одним из инструментов, на которые стоит обратить внимание является AssetGraph.

AssetGraph смотрит на проекты как на набор задач на графах, где узлами
считаются наборы ресурсов (HTML, CSS, изображения, JS), а рёбрами — отношения
между ними (теги img, a, script и т.д.).

Если AssetGraph определит, как проектные наборы ресурсов связаны друг
с другом, он может автоматически выполнить большинство оптимизаций
производительности. Это
работает, в частности, на маленьких проектах и в данный момент идёт работа над поддержкой для больших
проектов.

Grunt
Gulp

Пользователи Gulp должны использовать непосредственно AssetGraph.

Сравнительный анализ

Приведённые ниже бенчмарк-плагины полезны для использования в качестве части
реализации подхода непрерывной интеграции (Continuous Integration). Несмотря
на то, что в настоящее время они доступны только для Grunt, вы можете
использовать gulp-grunt для запуска Grunt-тасков через Gulp. Мы
рекомендуем:

  • grunt-pagespeed — превосходен для автоматического определения ваших
    количества очков PageSpeed как часть непрерывной интеграции.

  • grunt-topcoat-telemetry — получение гладкости, времени загрузки и
    другой статистики из Telemetry, как часть процесса непрерывной интеграции.
    Это может помочь вам настроить панель сравнительного анализа
    производительности, похожую на ту, что используют в TopCoat.

  • grunt-wpt — непрерывная интеграция с очками WebPageTest.

  • grunt-phantomas — время ответа на запросы, на ответы, время загрузки
    первого изображения/CSS/JS, время события готовности DOM и другое.

Framework Optimization

Grunt
Gulp
Misch

Заключение

Снижение производительности может влиять на вовлечение пользователя и его
впечатления от взаимодействия с ресурсом. Уделите время на эксперименты с плагинами
для оптимизации производительности — узнайте, какие практические выгоды они
могут дать вашим проектам.

Посетители ваших сайтов будут счастливее в результате мгновенного отклика, да
и вообще, быстрый веб — лучше для всех.

Подробности про UnCSS



Вёрстка


CSS  / 

Tools

Ранее я уже немного упоминал UnCSS, а сегодня расскажу о нем подробнее.
Напомню, он, с помощью PhantomJS, рендерит страницы и выполняет JavaScript, ищет используемые классы и удаляет остальные.

Лично мне удобнее всего использовать его вместе с PostCSS. При желании, можно подключить его к Grunt, Broccoli или Gulp.
Также можно использовать его API из Node.js или вызывать из командной строки.

Подробности есть на странице проекта.

Важные замечания

Что нужно иметь в виду, при использовании UnCSS.

Во-первых — некоторые “динамические” стили могут быть незаслуженно выпилены.
После того, как вы это обнаружите, решить проблему можно с помощью опции ignore или простым комментарием перед селектором:

/* uncss:ignore */
.js .input-file {
…

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

Опыт использования

Пока могу сказать, что опыт использования небольшой, но положительный. Поскольку я использую его вместе с PostCSS, всё просто.
Сначала ставится плагин postcss-uncss:

npm install postcss-uncss uncss

Затем в набор плагинов для PostCSS прописывается этот (указан один файл для примера, в принципе можно задавать несколько файлов, маски файлов тоже допустимы):

require(‘postcss-uncss’)({
html: [ ‘index.html’ ]
}

Если требуется, задаются исключения (в строчке выше или комментариями, как в предыдущем разделе. Вот, собственно, и всё.
В результате, CSS избавляется от неиспользуемых стилей, а пользователи наслаждаются чуть более быстрой загрузкой страниц 🙂



Вёрстка


CSS  / 

Tools

Обновление Microsoft Visual Studio (KB3165756)

Uber-Postgres+MySQL

Обзор полезных gulp плагинов — Rukoder.ru

gulp — таск менеджер для автоматизации рутинных задач работает под node.js
gulp-autoprefixer — автоматически расставляет префиксы к CSS свойствам
gulp-useref — парсит специфичные блоки и конкатенирует описанные в них стили и скрипты
gulp-uncss — анализирует HTML код и находит все неиспользуемые и продублированные стили.
gulp-jscpd — для поиска дубликатов в коде
gulp-notify — выводит ошибки при сборке Gulp в виде системных сообщений
gulp-jshint — проверяет js код
gulp-fixmyjs — исправляет js код после jshint
gulp-minify-css — сжимает css
gulp-uglify — сжимает js
gulp-concat — обьеденяет файлы в один
gulp-imagemin — сжимает изображения
— imagemin-jpeg-recompress — пережимает jpg изображения
— imagemin-pngquant — сжатие PNG с потерями https://pngquant.org/
gulp-zip — архивирует папки и файлы
gulp-gzip — создание gzip архива
gulp-csscomb — облагораживает структуру ваших CSS
gulp-htmlhint — HTML валидатор
gulp-load-plugins — автоматическая загрузка gylp плагинов из вашего package.json
gulp-size — выводит в лог размер файла
gulp-inline-css — выводит весь css в inline
gulp-grunt — позволяет запускать Grunt плагины для Gulp
gulp-sprite — создание спрайтов изображений
gulp-rev-mtime — создание временной метки для js css
gulp-rsync — rsync, для деплоя файлов на сервер
gulp-rimraf — удаление файлов и директорий
gulp-git — для работы с git
gulp-changed — обработка только измененых файлов
gulp-cat — выводит файл в консоль
gulp-svgmin — минимизация svg файлов
gulp-image-embed — конвертирует img в стилях в data-URI
gulp-ssh — для работы с SSH и SFTP
gulp-css-base64 — конвертация данных в стилях в base64 data URI
gulp-jscs — проверяет ваш js на правильность javascript Code Style http://jscs.info/
gulp-strip-debug — Strip console, alert, and debugger statements from javascript code
gulp-ruby-sass — sass препроцессор
gulp-jade — html препроцессор
gulp-bower — менеджер пакетов
gulp-rigger — позволяет импортировать один файл в другой простой конструкцией
gulp-plumber — ловим ошибки, чтобы не прервался watch
gulp.spritesmith — создание спрайтов изображений
browser-sync — прокручиваете, кликаете, обновляете и заполняете формы в различных тестируемых браузерах одновременно, браузеры автоматически обновляются с каждым изменением вашего HTML, CSS, изображений и других файлов проекта
gulp-git-deploy — деплоит гит проект в удаленный репозиторий
gulp-rev — добавляет хэш к статическому файлу, например unicorn.css ? unicorn-d41d8cd98f.css
gulp-rev-rep — используеться в связке с gulp-rev и заменяет стандартные имена на имена с хэшем
gulp-mocha — галп обертка для тест фреймверка js
gulp-coverage — инструмент определяет покрытие кода тестами работает в связке с gulp-mocha
gulp-phpunit — обертка для управления phpunit
gulp-phpspec — обертка для управления phpspec
gulp-codeception — обертка для управления codeception
gulp-selectors — плагин для gulp сокращает имена классов и id

Черный список gulp-плагинов http://gulpjs.com/plugins/blackList.json
Репозиторий gulp-плагинов http://gulpjs.com/plugins/

инструменты Chrome, PostCSS или UnCSS

От автора: рассуждать о монолитных стилях довольно сложно, так как, обычно, CSS файлы часто раздуваются. Удаление неиспользуемых стилей CSS должно перевести ситуацию в управляемое русло. Прежде чем мы начнем искать неиспользуемые стили, стоит отметить, что существует множество других стратегий написания обслуживаемых стилей. Наши стили можно разделить на логические части (макет страницы, кнопки, сетки, виджеты и т.д.) и использовать понятную систему именования (например, БЭМ). Как правило, разработчики делают это еще до того, как ищут неиспользуемые правила. Я думаю, это правильно, ведь стили имеют долгосрочное воздействие.

Еще одна причина, по которой не так часто урезают правила – просто неудобно искать и удалять неиспользуемые стили в чем-либо, что больше маленького веб-проекта. Если контент не статичен, как понять, какие правила используются и где?

Инструмент разработчика Chrome

Оказывается, в инструментах разработчика Chrome уже есть встроенная функция. Я испытал ее на сайте, на котором, как я знал, было много стилей, которые можно удалить. Ощущения были смешанные. Порог входа очень низкий, особенно для разработчиков, которые уже работали с панелью разработчика Chrome. Устанавливать ничего не нужно, это приятно.

Что нужно сделать для проверки стилей на сайте:

Откройте интересующий сайт

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Откройте панель разработчика

Перейдите на вкладку audits

Выберите опцию Web Page Performance и запустите

В части результатов будет «Remove unused CSS rules». Если этого нет, значит, у вас нет неиспользуемых стилей. Поздравляю! Результат разбит по стилям. Разбивка не просто по файлам, а по блокам style. Реально полезная функция, так как нам нужны только те стили, которые писали мы. По крайней мере, в рамках этой статьи.

Хорошо ли это?

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

Вывод: для начала полезно, но не долгосрочное решение.

UnCSS

Для поиска неиспользуемых стилей можно задействовать инструменты командной строки. UnCSS – интересный экземпляр. Он вытягивает страницу через phantomJS и ловит стили, вставленные через JS. Я очень хотел попробовать этот инструмент, так как он решал мою проблему, ведь панель разработчика Chrome совсем не связана с редактированием кода. С помощью UnCSS результат можно сохранить прямо в файл, идеально.

Установка

У меня не получилось выполнить npm install uncss на Ubuntu. Ничего серьезного, оказалось, я забыл пару зависимостей. Команды для установки недостающих библиотек, которые я запускал:

sudo apt-get update
sudo apt-get install build-essential chrpath libssl-dev libxft-dev
sudo apt-get install libfreetype6 libfreetype6-dev
sudo apt-get install libfontconfig1 libfontconfig1-dev

sudo apt-get update

sudo apt-get install build-essential chrpath libssl-dev libxft-dev

sudo apt-get install libfreetype6 libfreetype6-dev

sudo apt-get install libfontconfig1 libfontconfig1-dev

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

UnCSS можно интегрировать в процесс билда, но мы сейчас опустим это. Думаю, вставлять его в процесс билда не самая хорошая идея. У Addy Osmani есть по этой теме хорошая статья. В идеале, нам нужно удалять неиспользуемые стили прямо из кода, а не просто фильтровать их под финальный продукт.

Возможно, лучший выход – делать и то и то. Во-первых, запускать его как пребилд шаг для оптимизации кода. Во-вторых, запускать шаг билда для оптимизации стилей, которые вы не контролируете.

Использование командной строки

uncss //your-site.foo/ > unused-styles.css

uncss //your-site.foo/ > unused-styles.css

Результат разбивается на стили сайта your-site.com и браузер Chrome, но хранятся в одном файле. На моем сайте есть шрифт font-awesome, и все иконки, которые не используются на домашней странице, попали в вывод UnCSS. Сейчас мне это неважно. Их можно спрятать, если запустить команду еще раз и указать ignoreSheets.

Обратите внимание, что ignoreSheets может принимать строку (полный URL стиля, который нужно проигнорировать) или регулярное выражение. С регулярным выражением проще, так как там меньше символов, и оно покрывает возможные изменения в пути к файлу.

—ignoreSheets /.*font-awesome.min.css/

—ignoreSheets /.*font-awesome.min.css/

Регулярное выражение передается в слэшах. Так UnCSS проверяет, является ли аргумент строкой или нет.

Единичные ошибки?

(node:20557) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2):
Error: Network Error

(node:20557) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2):

Error: Network Error

Вот такое сообщение об ошибке выскакивает при таймауте страницы. Таймаут можно увеличить с помощью -t N, где N – количество миллисекунд (не ставьте –t 360, чтобы потом удивляться, почему код не подождал 5 минут).

Вывод: UnCSS удобнее, так как ближе к месту, где я редактирую стили. Выходной файл полезен при исключении ненужных стилей. Я вижу ему применение из-за опции –includeSheets, которая автоматически игнорирует все, что попало под регулярное выражение. Удобно для, например, сайтов в WordPress, где различные плагины могут подтягивать свои стили, но разработчику нужны только стили темы style.css и т.д.

Какой инструмент использовать?

Сначала я выбор отдал UnCSS и удобной командной строке. Однако пока я писал эту статью, я попробовал их на еще паре сайтов и получил менее перспективные результаты. В частности, у меня есть несколько сайтов, созданных пару лет назад, на которых используется фреймворк, где задействованы постоянные комментарии /*!*…*/. Они плохо работают с PostCSS, поэтому и с UnCSS. Я еще не вникал в проблему, но, возможно, более новая версия PostCSS прощает такие комментарии. Тем не менее, прямо сейчас это стало еще одним барьером, и я не могу полностью использовать UnCSS в своей работе.

Источник: //falkus.co/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

глоток-uncss — npm

Удалите неиспользуемый CSS с помощью UnCSS.

Если у вас возникли трудности с выводом этого плагина, используйте
Трекер UnCSS.

Установить

С npm do:

  npm установить gulp-uncss --save-dev

Пример

Отдельные файлы, шаблоны подстановки и URL-адреса поддерживаются gulp-uncss и
можно смешивать и сочетать:

 
 var gulp = require ('gulp'); 
 
 var uncss = require ('gulp-uncss'); 
 
 
 
 гл.task ('default', function () {
 
 return gulp.src ('site.css') 
 
 .pipe (uncss ({
 
 html: ['index.html', 'posts / ** / *. html ',' http://example.com '] 
 
})) 
 
 .pipe (gulp.dest (' ./ out ')); 
 
});

gulp-uncss также можно использовать в конвейере, который включает предварительную обработку CSS.
Использование множества преобразований в одном файле — одна из сильных сторон gulp:

 
 var gulp = require ('gulp'); 
 
 var uncss = require ('gulp-uncss'); 
 
 var sass = require ('gulp-sass'); 
 
 var concat = require ('gulp-concat'); 
 
 var nano = require ('gulp-cssnano'); 
 
 
 
 гл.task ('default', function () {
 
 return gulp.src ('styles / ** / *. scss') 
 
 .pipe (sass ()) 
 
 .pipe (concat ('main.css') ) 
 
 .pipe (uncss ({
 
 html: ['index.html', 'posts / ** / *. Html', 'http://example.com'] 
 
})) 
 
 .pipe (nano ()) 
 
 .pipe (gulp.dest ('./ out')); 
 
});

Всего за несколько строк мы скомпилировали исходный код SCSS в один файл, удалили неиспользуемые
CSS и минимизировал вывод!

Опции

Пожалуйста, смотрите документацию UnCSS для всех опций, которые вы можете использовать.Некоторые из них не так необходимы при использовании gulp-uncss, потому что CSS для
анализ поступает из потока, а не из файлов HTML. Основные варианты, которые вы
скорее всего будут использовать:

HTML

Тип: Массив | Строка
Обязательное значение.

Массив, который может содержать массив файлов относительно вашего gulpfile.js и
который также может содержать URL-адреса. Обратите внимание, что если вы должны передать здесь URL-адреса, тогда
задача займет гораздо больше времени.Если вы хотите передать HTML напрямую
вместо этого в задачу, вы можете указать его здесь как строку.

игнорировать

Тип: Массив
Значение по умолчанию: undefined

селекторов, которые не следует трогать с помощью UnCSS, поскольку он не может обнаружить пользователя
взаимодействие на странице (например, наведение, щелчок, фокус). И буквальные имена, и
шаблоны регулярных выражений распознаются.

тайм-аут

Тип: Целое число
Значение по умолчанию: undefined

Укажите, как долго ждать загрузки JS.

Обратите внимание, что options.ignoreSheets — это , уже определенное для вас . gulp-uncss будет
обрабатывать только файлы CSS в потоке.

Содействие

Pull-запросы приветствуются. Если вы добавляете функциональность, пожалуйста, добавьте модульные тесты
чтобы покрыть это.

Лицензия

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

ben-eb / gulp-uncss: УСТАРЕЛО. Удалите неиспользуемые селекторы CSS.

Поскольку UnCSS теперь является плагином PostCSS, который можно комбинировать с другими CSS
этапов обработки, нет особых стимулов добавлять отдельный проход к вашему
построить шаг.Вместо использования gulp-uncss вы можете воспроизвести функциональность
следующей задачей gulp:

 var gulp = require ('gulp');
var postcss = require ('gulp-postcss');
var uncss = require ('postcss-uncss');

gulp.task ('по умолчанию', function () {
    var plugins = [
        uncss ({
            html: ['index.html', 'posts / ** / *. html', 'http://example.com']
        }),
    ];
    вернуть gulp.src ('./ src / *. css')
        .pipe (postcss (плагины))
        .pipe (gulp.dest ('./ dest'));
});

Теперь вы можете добавлять другие плагины в дополнение к UnCSS, такие как cssnano.

Удалите неиспользуемый CSS с помощью UnCSS.

Если у вас возникли трудности с выводом этого плагина, используйте
Трекер UnCSS.

Установить

С npm do:

  npm установить gulp-uncss --save-dev

Пример

Отдельные файлы, шаблоны подстановки и URL-адреса поддерживаются gulp-uncss и
можно смешивать и сочетать:

 var gulp = require ('gulp');
var uncss = require ('gulp-uncss');

глоток.task ('по умолчанию', function () {
    вернуть gulp.src ('site.css')
        .pipe (uncss ({
            html: ['index.html', 'posts / ** / *. html', 'http://example.com']
        }))
        .pipe (gulp.dest ('./ out'));
});

gulp-uncss также можно использовать в конвейере, который включает предварительную обработку CSS.
Использование множества преобразований в одном файле — одна из сильных сторон gulp:

 var gulp = require ('gulp');
var uncss = require ('gulp-uncss');
var sass = require ('gulp-sass');
var concat = require ('gulp-concat');
var nano = require ('gulp-cssnano');

глоток.task ('по умолчанию', function () {
    вернуть gulp.src ('стили / ** / *. scss')
        .pipe (sass ())
        .pipe (concat ('main.css'))
        .pipe (uncss ({
            html: ['index.html', 'posts / ** / *. html', 'http://example.com']
        }))
        .pipe (нано ())
        .pipe (gulp.dest ('./ out'));
});

Всего за несколько строк мы скомпилировали исходный код SCSS в один файл, удалили неиспользуемые
CSS и минимизировал вывод!

Опции

Пожалуйста, смотрите документацию UnCSS для всех опций, которые вы можете использовать.Некоторые из них не так необходимы при использовании gulp-uncss, потому что CSS для
анализ поступает из потока, а не из файлов HTML. Основные варианты, которые вы
скорее всего будут использовать:

HTML

Тип: Массив | Строка
Обязательное значение.

Массив, который может содержать массив файлов относительно вашего gulpfile.js и
который также может содержать URL-адреса. Обратите внимание, что если вы должны передать здесь URL-адреса, тогда
задача займет гораздо больше времени.Если вы хотите передать HTML напрямую
вместо этого в задачу, вы можете указать его здесь как строку.

игнорировать

Тип: Массив
Значение по умолчанию: undefined

селекторов, которые не следует трогать с помощью UnCSS, поскольку он не может обнаружить пользователя
взаимодействие на странице (например, наведение, щелчок, фокус). И буквальные имена, и
шаблоны регулярных выражений распознаются.

тайм-аут

Тип: Целое число
Значение по умолчанию: undefined

Укажите, как долго ждать загрузки JS.

Обратите внимание, что options.ignoreSheets — это , уже определенное для вас . gulp-uncss будет
обрабатывать только файлы CSS в потоке.

Содействие

Pull-запросы приветствуются. Если вы добавляете функциональность, пожалуйста, добавьте модульные тесты
чтобы покрыть это.

Лицензия

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

addyosmani / gulp-uncss-task: [Устарело] Используйте вместо этого gulp-uncss.

Примечание: этот модуль устарел и заменен gulp-uncss.

Задача Gulp для удаления неиспользуемого CSS

Это Gulp дополнение к grunt-uncss .

О проблемах с выходными данными следует сообщать в системе отслеживания проблем UnCSS.

Установить

Установить с помощью npm

  установка npm --save-dev gulp-uncss-task

Использование 

 var gulp = require ('gulp');
var uncss = require ('gulp-uncss-task');

gulp.task ('по умолчанию', function () {
    глоток.src ('bootstrap.css')
        .pipe (uncss ({
            html: ['index.html', 'contact.html', 'about.html']
        }))
        .pipe (gulp.dest ('dest'));
});

Опции

Пример использования всех поддерживаемых опций:

  игнорировать: ['#added_at_runtime', / test \ - [0-9] + /],
csspath: "../public/css/",
raw: 'h2 {цвет: зеленый}',
таблицы стилей: ["lib / bootstrap / dist / css / bootstrap.css", "src / public / css / main.css"],
тайм-аут: 1000

Что делают опции?

  • ignore [Array]: предоставить список селекторов, которые не следует удалять с помощью UnCSS.Например, стили, добавленные при взаимодействии пользователя со страницей (наведение курсора, щелчок), поскольку они еще не обнаруживаются UnCSS. Распознаются как буквальные имена, так и шаблоны регулярных выражений.
  • csspath [String]: путь, по которому файлы CSS связаны с файлами html. По умолчанию UnCSS использует путь, указанный в
  • таблицы стилей [массив]: принудительная оптимизация списка таблиц стилей с использованием пути относительно gulpfile .js . В противном случае он извлекает таблицы стилей из файлов HTML.
  • raw [String]: предоставить задаче необработанную строку CSS в дополнение к существующим параметрам таблицы стилей; полезно при написании сценариев, когда ваш CSS еще не записан на диск.
  • тайм-аут [Число]: укажите, как долго ждать загрузки JS.

Лицензия

MIT © Адди Османи

node_modulesold / gulp-uncss · master · com / foundation_email_edit · GitLab

перейти к содержанию

  • Проектов
  • Группы
  • Фрагменты
  • Помощь

    • Загрузка…

  • Помощь

    • Помощь
    • Служба поддержки
    • Форум сообщества

    • Горячие клавиши
      ?

    • Отправить отзыв
    • Внесите свой вклад в GitLab

  • Войти

Переключить навигацию

Ф

Foundation_email_edit

  • Обзор проекта


    • Обзор проекта
    • Детали
    • Действия
    • Релизы

  • Репозиторий


    • Репозиторий
    • Файлы
    • коммитов
    • Филиалы
    • Теги
    • Авторы
    • График
    • Сравнить

  • вопросы

    0


    • вопросы

      0

    • Список

    • Доски

    • Этикетки

    • Служба поддержки
    • Вехи

  • Запросы на слияние

    0


    • Запросы на слияние

      0

  • CI / CD


    • CI / CD
    • Трубопроводы

    • Вакансии

    • Расписания

  • Операции


    • Операции
    • Инциденты

    • Среды

  • Аналитика


    • Аналитика
    • CI / CD
    • Репозиторий
    • поток создания ценности

  • Вики


    • Вики

  • Члены


    • Члены

    • Свернуть боковую панель

    Закрыть боковую панель

  • Мероприятия

  • График
  • Создать новый выпуск
  • Вакансии
  • Совершает
  • Доски выпуска

Открыть боковую панель

  • com
  • foundation_email_edit

мастер