Инструмент для динамического обновления CSS

Tips & tricks
Для того чтобы увидеть результаты изменений в CSS файлах вашего рабочего проекта, необходимо просто перезагрузить страницу. При этом загружается не только таблицы стилей, но JS, разметка полностью и возможно выполняются запросы к БД. На это, как мне кажется, иногда уходит достаточно много времени, которого в наше прогрессивное время постоянно нехватает.
Мне надоело эта ситуация и, не изобретая велосипед, на широких просторах интернета я нашел для себе решение.




Делюсь им:
dev.js сохраняем, например в папку js шаблона
var DevTools={
        Init:function(){
            this.headObj = document.getElementsByTagName('html')[0].getElementsByTagName('head')[0];
			return this;
        },
        ReloadAllCSS : function(headObj) {
       
            var links = headObj.getElementsByTagName('link');
            for (var i=0 ; i < links.length ; i++){
                    var link = links[i];
                    this.ReloadCSSLink(link);
            }
            return this;
        },
        ReloadCSSLink : function(item) {
                var value = item.getAttribute('href');
                var cutI = value.lastIndexOf('?');
                if (cutI != -1)
                        value = value.substring(0, cutI);
                item.setAttribute('href', value + '?t=' + new Date().valueOf());
                return this;
        },
        ReloadAllCSSThisPage : function() {
                this.ReloadAllCSS(this.headObj);
                return this;
        }
};

Добавить можно указав его в списке js в вашшаблон/settings/config/config.php
$config['head']['default']['js'] = Config::Get('head.default.js');
$config['head']['default']['js'][] = '___path.static.skin___/js/template.js';
$config['head']['default']['js'][] = '___path.static.skin___/js/dev.js';


Использование
Вставляем в нужном месте
<a href="#" onclick="DevTools.Init().ReloadAllCSSThisPage()">CSS</a>

Как вариант можно вставить в тулбар шаблона 
<section class="devtools" >
		<a href="#" onclick="DevTools.Init().ReloadAllCSSThisPage()" class="dev-css" style="margin: 0px -2px; text-decoration: none;">CSS</a>
	</section>

И все.
P.S. Работает при отключенном кэшировании
/* Устанавливаем настройки кеширования*/
$config['sys']['cache']['use']    = false; 
/* Параметры компрессии css-файлов */
$config['compress']['css']['merge'] = false;

12 комментариев

avatar
круто!
avatar
Намана так
avatar
— Не нравится что-то мне этот код. Добавим немного магии?

function reloadCSS() {
    css_array = document.evaluate('//head/link[@rel="stylesheet"]', document, null,XPathResult.ANY_TYPE, null);
    do {
        css = css_array.iterateNext();
        if (css != null ) {
            value = css.getAttribute('href');
            cutQ = value.lastIndexOf('?');
            cutA = value.lastIndexOf('&');
            if (cutQ != -1) value = value.substring(0, cutQ);
            if (cutA == -1) css.setAttribute('href', value + '?t=' + new Date().valueOf());
            }
    } while (css != null);
}

И теперь вызываем reloadCSS как угодно.
Плюсы: затрагиваются только CSS, исправлена обработка "&" в href (как в гугловских стилях)
avatar
Но кажется evaluate в IE не работает. или IE топку
avatar
И еще есть проблема Unhandled DOMException: INVALID_STATE_ERR для второго iterateNext, в Опере заметил.
Поэтому лучше: 
function reloadCSS() {
	var css_array = document.evaluate('//head/link[@rel="stylesheet"]', document, null,XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
	var css; var i = 0;
	while (css = css_array.snapshotItem(i++)){
		value = css.getAttribute('href');
		cutQ = value.lastIndexOf('?');
		cutA = value.lastIndexOf('&');
		if (cutQ != -1) value = value.substring(0, cutQ);
		if (cutA == -1) css.setAttribute('href', value + '?t=' + new Date().valueOf());
	}
}

После setAttribute документ изменился и следующей итерации не будет из-за invalidIteratorState. Читать здесь.
Поэтому лучше изменять значения на «снимке».
avatar
Ребята, объясните пожалуйста чайнику, что это. Я так поняла: например, я решила изменить дизайн, залила сайт на домашнюю машину, переписала цсс, и раньше мне надо было чистить кеш, потом кеш браузера, потом обновить страницу, и только тогда я увижу, что вышло — а теперь достаточно просто обновить страницу? Так?
avatar
— Смотри. Создаешь файл. (dev.js) в папкt js шаблона. Туда кидаешь, к примеру, код моей функции.
подключаешь его в config.php (в списке JS)
$config['head']['default']['js'][] = '___path.static.skin___/js/dev.js';

В видное место темы пишешь ссылку:
<a href="#" onclick="reloadCSS()">CSS</a>

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

/config/config.php открывай и делай false следующее

// Устанавливаем настройки кеширования
$config['sys']['cache']['use']    = false;               // использовать кеширование или нет


* Параметры компрессии css-файлов
 */
$config['compress']['css']['merge'] = false;       // указывает на необходимость слияния файлов по указанным блокам.
$config['compress']['css']['use']   = false;       // указывает на необходимость компрессии файлов. 


* Параметры компрессии js-файлов
 */
$config['compress']['js']['merge']  = false;    // указывает на необходимость слияния файлов по указанным блокам.
$config['compress']['js']['use']    = false;    // указывает на необходимость компрессии файлов. Компрессия используется только в активированном режиме слияния файлов.
avatar
Предлагаю завернуть в плагин с кнопкой в тулбаре
  • ort
  • +2
  • ↓
avatar
Тут кода-то, кот наплакал.
Хотя для начинающих осваивать — нужен плагин.
avatar
вопрос не в коде, а в правке шаблона
avatar
— Ок, сделается.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.