Инструмент для удаления неиспользуемого CSS

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

UnCSS и, в частности, то, на чем я основываю рекомендацию, — это оболочка Grunt для UnCSS ; это, конечно же, интегрируется в систему сборки Grunt для большей автоматизации.

Существует довольно много вариантов настройки ( также подробно перечисленных ), и он поддерживает как локальные, так и удаленные файлы css в качестве источников.

При использовании в Grunt я предлагаю использовать его в тандеме с grunt-processhtml , чтобы автоматически заставить ваши страницы ссылаться на новые объединенные и очищенные файлы css.

Как я его использую: (фрагмент моего gruntfile.js)

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uncss: {
        main: {
            options: {
                report: 'gzip'
            },
            files: {
                '<%= grunt.option("outpath") %>/css/cleaned.css' : '<%= src_files_html %>',
            }
        }
    },
    processhtml: {
        main : {
            options: {
                strip: false
            },
            files: [{
                expand: true,
                cwd: '',
                src: '<%= src_files_html %>',
                dest: '<%= grunt.option("outpath") %>'
            }]
        }
    }

а затем в моем html файле у меня есть это:

    <!-- build:css ./css/cleaned.min.css -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
    <link href="./css/style.css" rel="stylesheet">
    <!-- /build -->

который превращается в:

<link rel="stylesheet" href="./css/cleaned.min.css">

и CSS намного меньше и лучше для производительности и мобильной пропускной способности.

У меня есть отличный вариант — по крайней мере, он мне очень нравится — хотя это не веб-приложение и не приложение для Linux.

Я рекомендую использование CSS надстройки Firefox — для этого требуется Firefox и надстройка Firefox Firebug .

Применение:

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

К сожалению, экспортированный очищенный css имеет некоторые недостатки; некоторые правила удалены (хорошо), но некоторые имеют префикс UNUSED.Там должна быть опция IMO, чтобы просто удалить их, но в настоящее время я не верю, что это так (по крайней мере, если я так и не нашел).

В качестве обходного пути я всегда делал просто копирование и вставку в Notepad ++ и использовал поиск и замену с этим регулярным выражением в качестве строки поиска: UNUSED\..*?\}(и выберите . matches newlines) и пустую замену, чтобы просто избавиться от них. - чтобы сделать то же самое в Sublime, которое вы использовали бы (?s)UNUSED\..*?\}в качестве регулярного выражения. Большинство других хороших текстовых редакторов должны иметь аналогичную функциональность.

Я сделал этот браузерный онлайн- инструмент для удаления неиспользуемых CSS .

Функции:

1. На основе браузера. Нечего устанавливать.
2. Проверяет CSS по нескольким URL-адресам.
3. Предоставляет параметры для ручного выбора/отмены выбора элементов в файле CSS.
4. Можно загрузить и запустить на локальном хосте для неограниченного количества URL-адресов.
5. Код с открытым исходным кодом

Отказ от ответственности: я являюсь автором кода.

IntelliJ IDEA имеет несколько мощных функций веб-разработки :

• работает с Windows/Mac/Linux
• обнаруживает неиспользуемые определения классов CSS

Однако вам необходимо иметь Ultimate Edition, чтобы иметь доступ к функциям веб-разработки (бесплатно, если вы руководитель проекта или постоянный коммиттер в проекте с открытым исходным кодом).

Для этого мы написали бесплатный онлайн-инструмент: UnusedCSS .

Он рекурсивно сканирует ваш сайт (по внутренним ссылкам) и находит неиспользуемые селекторы (многие другие инструменты обрабатывают только одну страницу).

Я уже использовал плагин Firebug CSS Usage в нескольких проектах раньше — единственный недостаток в том, что вам нужно вручную просматривать весь сайт, чтобы получить точную карту того, какие стили используются.

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