Какими инструментами быстрее, проще и правильнее разрабатывать и собирать front end (верстка+wordpress)?

Question

[Ростислав]

Хотелось бы услышать мнение профессионалов которые проверили множество этих вещей на личном опыте. Желательно список инструментов и краткое описание как это работает.
Занимаюсь верстой + натяжкой на ВП. Думаю как бы ускорить старт нового проекта и упростить переход от верстки к натяжке.
Пока использую openServer + phpStorm + gulp
Есть куча готовых решений, инструментов таких как: webpack, yeoman, Varying-Vagrant-Vagrants, css hat, avocode, jade, emmet, bem, scss, различные starter kit, quick start, bedrock и т.д., но придется убить очень много времени чтобы опробовать большинство из них и понять что же таки лучше.

Answer 1

[Vlad Feninets]

webpack в твоем случае будет излишним, имхо.
если вебпак, то можно юзать create-react-app, для того, чтобы что-то быстро напрототипировать - там уже готовый/настроенный/поперченный вебпак с hot module replacement.

в обычных случаях (вроде натянуть верстку на вордпресс или django), я как правило, юзаю галп с лайврилоадом, который однажды настроил и забыл - по-моему лучшее решение. Можешь как написать конкретно под свои нужды сеттинг, либо же найти готовый.
могу поделиться своим - https://github.com/fnnzzz/gulp-config

для каких-то совсем простых штук - можно юзать прямо npm-скрипты: https://gist.github.com/fnnzzz/f90304458ee24307a3d...

что касается других инструментов:
раньше долго сидел на саблайме с зоопарком плагинов (emmet, всякое для синтаксиса, сниппеты и пр.), недавно пересел на webstorm и доволен (особенно радует синхронизация настроек через репозиторий)

из препроцессоров юзаю только SCSS + бэм, но бэм использую малость кастомизированный с модификаторами через минус (читать тут - frontender.info/bem-sass-modifiers/)

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

Comments

[Ростислав]

Хочется слепить какую-то единую систему.
По типу такого:
- начинаем новый проект (верстку), вводим команду "start new project"
- создаются все необходимые папки проекта с настроенным gulp-ом(сжатие, релоад и т.д.)
- сохраняем всю необходимую графику из psd
- пишем html
- пишем css, большинство стилей вытаскиваем из макета при помощи css hat/avocode и т.д.
- заканчиваем верстку
- вводим команду "start wp project"
- скачивается WP, необходимые плагины, моя стартовая тема
- создается и подключается БД, устанавливается WP
- необходимые файлы из верстки переносятся в папки WP (style.css в корень темы, favicon в корень WP)
- по максимуму все автоматизируем, html переименовывается в php, меняются пути к css, js и картинками, добавляются базовые штуки такие как wp_head(), wp_footer(), body_class()
- запускаем уже настроенный gulp который теперь следит за WP проектом

Я уже изобрел велосипед, но его нужно еще долго оттачивать. Вот думаю может есть уже готовые комплексные решения для верстки + WP

[Vlad Feninets]

Ростислав: у меня для таких случаев много разных алиасов в bash, которые как раз копируют/создают/удаляют + в таком случае можно подвязать это все с yeoman.

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

[Ростислав]

Vlad Feninets: Понял. Тогда не зря создавал велосипед, осталось только допилить.

[Vlad Feninets]

Ростислав: +
зато ты знаешь наверняка, как этот велосипед работает

[Kadzi]

Ростислав, Привет, прошло 3 года. Удалось что-то ещё добавить в автоматизацию? (-:

[Ростислав]

Kadzi, Привет. Да все так же, ничего не автоматизировал, css и js собираю с помощью laravel-mix. Я больше не работаю с WP, перешёл на October CMS

[Kadzi]

Ростислав, я особо не кодер, но почему многие так нахваливают October?

[Ростислав]

Kadzi, он очень гибкий, по умолчанию в самой цмс почти ничего нет, весь функционал добавляется плагинами. Плагины пишутся очень легко. Вот тут есть перевод статьи где сравнивают October с WP. https://m.habr.com/ru/post/509098/
Очень легко расширять чужие плагины не влезая в их код, чтобы после обновления изменения не пропали. Практически любой функционал можно дописать самому.

Answer 2

[Вася Петров]

Занимаюсь верстой + натяжкой на ВП.

Для этого (да и для большинства другого) достаточно нормального редактора. Возможно IDE.
Для локального сервера лучше не виндовые форки, а виртуалку с линуксом.