Как можно ускорить верстку сайта

в 7:53, , рубрики: phpstorm, Веб-разработка, Программирование

Я backend-программист. Когда при разработке сайта мне достаётся и его верстка, то рабочий процесс превращается в чтение htmlbook и написание вопросов на Toster. Чтобы уделить больше времени на решение трудных задач и освободиться от рутинных действий при верстке, я сделал для себя несколько открытий, о которых расскажу в этой публикации.

Как можно ускорить верстку сайта

LESS в PhpStorm

Для более приятной работы с оформлением сайта я использую LESS. Переменные, вложенные селекторы, миксины ускоряют разработку в разы, но сейчас не об этом. Перед тем, как выложить сайт на боевой сервер, нужно выполнить много действий: сконвертировать .less файл в css, подключить получившийся файл стилей к шаблону, удалить строки подключения библиотеки из шаблона и саму библиотеку из сайта. Всего этого можно избежать, если настроить поддержку LESS в PhpStorm.

Для этого:

1) Включаем поддержку LESS в настройках. Ctrl+Alt+S – IDE Settings – Plagins. Ставим галочку LESS Support.

Как можно ускорить верстку сайта

2) В папке со стилями сайта создаем файл style.less и открываем его в редакторе.

Как можно ускорить верстку сайта

3) Включаем слежение за файлами. Ctrl+Alt+S – Project Settings – File Watchers. Жмем на кнопку с плюсом, выбираем LESS. Устанавливаем галку «Немедленная синхронизация файлов» и жмем ОК.

Как можно ускорить верстку сайта

Как можно ускорить верстку сайта

Теперь достаточно вписать пару строчек в файл style.less, как рядом с ним появится откомпилированный файл CSS. Подключаем его к шаблону и больше не думаем о ручной компиляции.

Как можно ускорить верстку сайта

В настройки LESS можно установить флаг –x, после чего генерируемый css файл будет еще и сжиматься.

Чем поможет Punto Switcher

При верстке очень часто приходится выводить переменные на экран, использовать циклы и ветвления. Дело не хитрое, но написание кода занимает много времени:

<?php if($status 1= 0: )?>...<?php endif; ?>

Или

<?php foreach($array as $item): ?>...<?php endforeach; ?>

В программе PuntoSwitcher есть функция автозамены, которая поможет решить и эту проблему. Для примера попытаемся ускорить написание следующей конструкции:

<?php echo ; ?>

1) Заходим в Настройки — Автозамена — Добавить;
2) Заполняем поля «Что заменять» и «На что заменять».

Как можно ускорить верстку сайта

3) Сохраняем.
Все, теперь в редакторе достаточно набрать букву e, нажать таб, и она превратится в нужную конструкцию.
Стоит сказать, что Автозамена по одной букве может иногда доставить проблем, поэтому нужно постоянно помнить, что у тебя включен punto switcher.

Немного про Emmet в PhpStorm

Я начал пользоваться Emmet, когда писал в notepad++. Замечательный плагин, набираешь dib, нажимаешь TAb и получаешь:

display: inline-block;

Однако в PhpStorm мне выводилось следующее:

Как можно ускорить верстку сайта

Не совсем то, что нужно. Для решения этой проблемы нужно включить нечеткий поиск в Emmet.

Идем в Ctrl+Alt+S – IDE Settings – Emmet, ставим галку «Включить нечеткий поиск»:

Как можно ускорить верстку сайта

Вот и все, проверяем:

Как можно ускорить верстку сайта

На этом пока все, надеюсь, моя публикация сделает хоть одного читателя счастливее.

Автор: gogolinsky

Источник

Поделиться