Статьи помеченные css
Как удалить не используемые CSS правила
Очистка и сжатие CSS с помощью Gulp
Сейчас много шаблонов на базе bootstrap. На сайте, из всего разнообразия стилей, предлагаемых шаблоном, используется порой 10-20%. От балласта можно избавиться с помощью on-line ресурсов. Например uncss-online. Но этот подход трудоемок.
Надежнее использовать утилиту. Задание создается один раз и при любых изменениях в проекте достаточно выполнить одну или пару команд.
Как сделать галерею фотографий "До и После"
Показ фотографий до и после момента времени
Представьте, что вы продаете курс похудания. Вам нужно наглядно представить результат вашего курса. Фото "До" и "После", что может быть лучшей иллюстрацией?
Как и в предыдущем примере примем, что участников ограниченное количество. Например 4. Забудем про похудающих - слишком скучно. Будем "работать" с кинозвездами. Для каждого можно загрузить только 4 фотографии. Таким образом всего 16 фото. Если загружены все 16 и кому-то захочется добавить "свои" фото, то придется что-то удалить. Демо.
Поиск
Метки
Сейчас много шаблонов на базе bootstrap. На сайте, из всего разнообразия стилей, предлагаемых шаблоном, используется порой 10-20%. От балласта можно избавиться с помощью on-line ресурсов. Например uncss-online. Но этот подход трудоемок.
Надежнее использовать утилиту. Задание создается один раз и при любых изменениях в проекте достаточно выполнить одну или пару команд.
Установка утилиты проста и описана в 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
Заключение
От хлама стоит избавляться в больших файлах стилей. Связанные с темой стилевые файлы проще просто сжимать.
Оставьте комментарий
Только зарегистрированные пользователи могут оставлять комментарии. Пожалуйста войдите или пройдите регистрацию.
Можно авторизоваться, используя социальную сеть-
-
-