CLI Browsersync для WordPress

Всякие там верстальщики пользуются целой кучей всяких воркфловов, типа автоматическая компиляция SASS в CSS, всякий там gulp с минификацией и так далее.

Если вы не делаете гугл, то вам это не надо. Сервите на 2 килобайта больше на каждой странице, всё равно сервер на лету gzip’ом сжимает. Ну и так далее, не усложняйте себе жизнь.

Но есть в этом мире хипстеров и прикольные штуки. Например Browsersync. Например у меня 3 монитора, на центральном пишу код, на левом открыта страница, под которую пишу, на правом открыты dev-tools (блин, с этим browsersync уже не хватает мониторов под консоль php ошибок, надо больше мониторов). По любому промежуточному сейву в коде, автоматически обновляется содержимое страницы слева, видно изменения в реальном времени, удобно. Как только из редактора табаюсь на ту же страницу на основном мониторе, чтобы подробнее с ней поработать, тоже по потере фокуса в редакторе там делается автоматически сейв, из-за этого browsersync делает автоматический релоад.

Удобно и то, что browsersync сам понимает, когда необходимо страницу перезагрузить (например изменился php), а когда он может моментально просто сам поменять состояние страницы (например изменился css).

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

• если время между вашим действием и результатом меньше 100ms, вы воспринимаете это как мгновенное, вообще не отвлекаетесь
• если время <1s, вы замечаете задержку, но это вас не отвлекает
• <10s, это вас отвлекает, но вы всё ещё можете не выходить из the flow из потока, всё ещё сконцентрированы на задаче; но тем не менее, при возможности, постараетесь эту операцию не делать
• <1m, уже нет возможности остаться в потоке, эта операция выбьет вас из колеи, вы отвлечётесь
• <10m, очень долгая операция, вы постараетесь не делать её
• >10m, невыносимо долгая операция, вы будете избегать её всеми возможными способами, непродуктивная работа.

Смысл в том, что если вам нужно что-то проверить, и если это будет «моментально», вы возьмёте и проверите это. Как например если вы носите часы, только у вас появилась идея «а сколько там времени?», вы сразу посмотрели на запястье и узнали. А вот если эта операция будет занимать минут пять, вы сами себе объясните «да не особо-то мне и хочется узнавать время».

Это критично при разработке: если что-то делается медленно, то вам автоматически «не хочется это делать», и значит вы скорее всего это не сделаете, обойдёте стороной, и либо пропустите возможный баг, либо пропустите возможное решение текущей задачи. И в любом случае это выбивет вас из «потока». Поэтому ваша первостепенная задача как разработчика — обеспечить себе наилучшие условия труда:

• быстрая неглючная одинаковая клавиатура (а то у меня в детстве была клавиатура, потом она сломалась, а других с таким лейаутом я уже не смог найти, это проблема). Сейчас я использую стандартный us layout с узким ентером. Без русских букв, и почти без каких-либо обозначений, не смотрю на клавиатуру в общем-то, лишь бы кнопки всегда были на своих местах )
• самый быстрый из возможных компьютеров; т.к. программирование это не рендеринг, как правило тут много однопоточных задач, и значит вам нужен процессор с самыми быстрыми ядрами, например у меня 4.2-4.7 GHz ядро. Ну и там всякие M.2 SSD и всё такое.
• лучшие инструменты; например меня всегда калила Visual Studio, не хотелось ничего делать. Доходило до того, что на моём супермощном в то время компьютере 3.4 GHz тормозило.. просто набирание символов. Вот я печатаю, а отображаются они не моментально. Понятно, всякие там попытки автодополнения и всего такого, но блин ну смоги ты отобразить то, что я печатаю в момент, когда я это печатаю! Компьютеры 70-х годов это могли, а сейчас майкрософт не может. Поэтому победил sublime text кстати.
• и так далее.

Ну и вот как вишенка на торте — browsersync. Прикольная штука. Тем более, как оказалось, ей очень просто пользоваться:

1. убедитесь, что у вас установлен node.js и npm https://nodejs.org/ (да, я тоже это всё не люблю, нужно просто немного потерпеть и всё пройдёт)
2. теперь, когда у вас в командной строке есть и работает npm, выполните npm install -g browser-sync, чтобы установить browser-sync глобально в командную строку.
3. теперь, когда browser-sync есть в командной строке, можно пользоваться вот этой справкой https://browsersync.io/docs/command-line, или просто посмотреть как это сделал я:

Когда вы выполните этот bs.bat, у вас откроется https:// localhost:3000/, который будет проксировать ваш wp.local. В принципе, там будет красный сертификат, но с одной стороны, поговаривают, можно использовать chrome://flags/#allow-insecure-localhost (я вроде включил, но разницы не заметил), с другой стороны можно передать браузерсинку свои селф-сигнед сертификаты на localhost (не пробовал, но должно работать, почему нет; пока мне self-signed на wp.local хватает), ну и т.к. передо мной не стоит каких-то сложных задач, где красный сертификат мог бы помешать, можно жить и с ним.

Теперь можно просто работать с файлами своего проекта, релоады будут происходить сами, и как пел Валерий Сюткин, эти полсекунды я день за днём сложу в классные проекты )

P.S.: если мониторить слишком много (десятки тысяч) файлов, начальная загрузка будет занимать больше времени (не пару секунд, а десятки секунд), в итоге эта штука будет занимать больше оперативной памяти (500 мб на 25к файлов), но дальше вроде как всё будет работать так же хорошо, как и если смотреть в несколько файлов.