Инструменты для ускорения процесса верстки?

Question

[leonard]

Уважаемые знатоки, подскажите пожалуйста инструменты, которые позволяют упростить жизнь верстальщику.


Для CSS есть LESS, для быстрого написания кода есть Zen-Coding. Может быть есть что-нибудь еще?


Особенно интересует вопрос, как можно автоматизировать изменение одинаковых блоков в разных html файлах проекта? Может быть есть какой-то аналог <? include('header.html'); ?> только без локального сервера и php?

Answer 1

[Сергей Протько]

А чем плох локальный сервер?

К примеру можно установить node.js и использовать grunt. Преимущества:

• Можно использовать какой-либо готовый процессор для HTML (к примеру такой)
• Ватчеры. Их правда можно настроить и в любимой IDE но все же… как-то проще в гранте. Ребилд стилей по измению, ребилд шаблонов и т.д.
• Оптимизация графики: при резке очень лениво каждый раз пережимать те же PNG-шки. Да, можно просто использовать консолькую утилиту и дергать ее руками, а можно и автоматизировать процесс. Да и есть imgmin и тому подобные.
• Оптимизация JS — конкатенация, минификация
• Управление JS зависимостями через bower

Правда придется потратить день два на настройку какого-то boilerplate проекта, но в итоге время окупится.

Comments

[leonard]

Сервер не плох. Просто наш верстальщик плюется от php (хотя казалось бы, нужно использовать только include).

За grunt спасибо. Изучу.

[Сергей Протько]

Ну так я предлагаю JS, а не PHP)) Не на одном PHP свет сошелся.

Answer 2

[Николай Антал]

Compass?

Answer 3

[Игорь]

Я использую PhpStorm. Для разработки клиентской части я использую LiveEdit (в основном для верстки) + JS debug (для отладки сценариев).
Персонально для верстки я бы выбрал WebStorm.
Продукты платные от компании JetBrains, но я думаю, они того стоят если верстка\разработка это основной заработок.

Подробнее о LiveEdit можно почитать тут:
blog.jetbrains.com/webide/2012/08/liveedit-plugin-features-in-detail/#more-4098

Для автоматизации процесса, я бы попробовал все таки использовать локальный web-сервер (с php\python интерпретатором на борту) и шаблонизатором (twig, smarty & etc). А если на выходе нужен чистый html, то генерировал его каким-нибудь самописным скриптом для деплоя. Таким образом можно избежать дублирования ненужных повторений частей кода, таких как header, footer, sidebar & etc. А на выходе получать в том формате который нужен персонально вам для вашего проекта(ов).

Answer 4

[Николай]

Я использую NetDrive для создания как бы локальной версии проекта на рабочем компьютере, плюс что-нибудь такое — www.youtube.com/watch?v=iQLhGbkupS4

Comments

[Суфикс Суфиксович]

Я так и не смог его запустить, хоть и старался. Не до конца указано всё как делать.

Answer 5

[Роман Мисюра]

Из редакторов кода я б использовал Sublime Text + нагрузку плагинами. Верстаю с емметом(ex. zen-coding), + сниппеты. В СТ можно выделять различные блоки и редактровать их или же однотипные элементы.

Comments

[leonard]

Подскажите, а есть ли плагин реализующий что-то вроде include?

Answer 6

[Nilard]

Я так понимаю, речь идет о Windows, иначе не стоял бы вопрос о локальном сервере и РНР :)

1. Dreamweaver умеет собирать макеты из шаблонов.
2. Можно настроить IIS (он встроен в винду), и использовать SSI.

Comments

[Nilard]

Еще совет — собирать страницу из <? include('header.html'); ?> и т. п. — довольно порочная практика. Лучше сверстать общий макет с хедером-футером и в него уже инклюдить контент и блоки.

[Суфикс Суфиксович]

Dreamweaver — я был его фанатом пока он не стал у себя во Viewer показывать одно, а браузер — другое.

Answer 7

[JohnnyParazit]

Использую Brackets + Emmet
https://youtu.be/29ySoIc8d1A

Answer 8

[Виталий Кузнецов]

Использовать шаблонизатор pug.

Освоить gulp.

Если не хотите шаблонизатор — для gulp-а есть море подобных плагинов.