---

Установка утилиты проста и описана в Gulp quick-start. После установки, в папке проекта появится каталог node_modules с большим количеством подкаталогов. Если не нужно, чтобы каталог попал на сервер, добавьте строчку в .gitignore.

# JS
node_modules

Дополнительные модули

Кроме Gulp для работы с CSS необходимы еще несколько модулей - gulp-uncss, gulp-cssnano, gulp-concat-css. Каждый нужно установить локально.

npm install gulp-uncss --save-dev

Gulpfile.js пример & структура

Для работы утилиты нужно подготовить специальный файл gulpfile.js в корне проекта.

var gulp = require('gulp');
var uncss = require('gulp-uncss');
var cssnano = require('gulp-cssnano');
var concatCss = require('gulp-concat-css');
gulp.task('uncss', function () {
    return gulp.src([
        './vendor/bower-asset/bootstrap/dist/css/bootstrap.min.css',
    ])
    .pipe(concatCss('bundle.css'))
    .pipe(uncss({
        html: [
            'http://localhost/site/index',
            'http://localhost/post/rubric/trade-union-news',
            'http://localhost/post/15-spartakiada',
            'http://localhost/site/feedback'
        ],
        ignore: [/\.collapse\.in/, /\.dropdown/, /\.dropdown-menu/, /\.dropdown-toggle/]
    }))
    .pipe(cssnano())
    .pipe(gulp.dest('./frontend/web/out/css'));
});
gulp.task('mincss', function () {
    return gulp.src([
        './frontend/web/css/site.css',
        './frontend/web/css/magnific-popup.css',
        './frontend/web/css/responsive.css',
        './frontend/web/css/BootsnippQuoteCarousel/style.css'
    ])
    .pipe(concatCss('all.css'))
    .pipe(cssnano())
    .pipe(gulp.dest('./frontend/web/out/css'));
});

В секции gulp.src, через запятую, указываются все CSS ресурсы, которые нуждаются в чистке. В данном случае указан только один файл.

В функции concatCSS указывается имя финального файла.

В uncss.html нужно перечислить все страницы, которые имеют стили, отличные от остальных страниц.

Многие элементы появляются и исчезают на экране при взаимодействии с посетителем. Стили таких элементов не видны при обходе и не попадают в финальный файл. Такие элементы нужно искать вручную и добавлять в секцию uncss.ignore.

Наконец в секции gulp.dest нужно указать каталог, в который будет записан финальный файл.

Assets

Для работы утилиты нужен полный CSS файл, а для тестирования результатов - сжатый. Обычно все необходимые ресурсы подключаются в frontend/views/layouts/main.php одним вызовом.

frontend\assets\AppAsset::register($this);

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

namespace frontend\assets;
use yii\web\AssetBundle;
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
    ];
    public $js = [
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
        'yii\bootstrap\BootstrapPluginAsset',
        'frontend\assets\TextualAsset',
        'frontend\assets\BootsnippQuoteCarouselAsset',
    ];
}

Чтобы быстро переключаться с одного набора ресурсов на другой, можно сделать копию ресурсов в папке prod.

namespace frontend\assets\prod;
use yii\web\AssetBundle;
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'out/css/bundle.css',
        'out/css/all.css',
    ];
    public $js = [
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
        'yii\bootstrap\BootstrapPluginAsset',
        'frontend\assets\prod\TextualAsset',
        'frontend\assets\prod\BootsnippQuoteCarouselAsset',
    ];
}

Теперь, для тестирования, почти достаточно поменять регистрацию ресурсов в файле frontend/views/layouts/main.php.

frontend\assets\prod\AppAsset::register($this);

Почти, потому что нужно жестко отключить стандартные ресурсы. Например в конфигурации frontend/config/main.php.

    'components' => [
        'assetManager' => [
            'bundles' => [
                'yii\web\JqueryAsset' => [
                    'js' => ['jquery.min.js'],
                ],
                'yii\bootstrap\BootstrapAsset' => [
                    'css' => [], //['css/bootstrap.min.css'],
                ],
                'yii\bootstrap\BootstrapPluginAsset' => [
                    'js' => ['js/bootstrap.min.js'],
                ],
            ],
        ],

Запуск

При "полных" ресурсах в корне проекта нужно выполнить пару команд, затем переключиться на вариант prod и тестировать результат.

gulp uncss
gulp mincss

Заключение

От хлама стоит избавляться в больших файлах стилей. Связанные с темой стилевые файлы проще просто сжимать.