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. Прикольная штука. Тем более, как оказалось, ей очень просто пользоваться:
- убедитесь, что у вас установлен node.js и npm https://nodejs.org/ (да, я тоже это всё не люблю, нужно просто немного потерпеть и всё пройдёт)
- теперь, когда у вас в командной строке есть и работает npm, выполните
npm install -g browser-sync
, чтобы установить browser-sync глобально в командную строку. - теперь, когда browser-sync есть в командной строке, можно пользоваться вот этой справкой https://browsersync.io/docs/command-line, или просто посмотреть как это сделал я:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@echo off rem npm install -g browser-sync set localhost=https://wp.local set workdir=%cd%/www/wp-content/themes/stef rem set workdir=%cd%/www/wp-content/themes rem set workdir=%cd%/www/wp-content/plugins rem set workdir=%cd%/www/wp-content rem set workdir=%cd%/www @echo on browser-sync start --proxy "%localhost%" --files "%workdir%/**/*.php" "%workdir%/**/*.css" "%workdir%/**/*.js" |
Когда вы выполните этот bs.bat, у вас откроется https:// localhost:3000/, который будет проксировать ваш wp.local. В принципе, там будет красный сертификат, но с одной стороны, поговаривают, можно использовать chrome://flags/#allow-insecure-localhost (я вроде включил, но разницы не заметил)
, с другой стороны можно передать браузерсинку свои селф-сигнед сертификаты на localhost (не пробовал, но должно работать, почему нет; пока мне self-signed на wp.local хватает)
, ну и т.к. передо мной не стоит каких-то сложных задач, где красный сертификат мог бы помешать, можно жить и с ним.
Теперь можно просто работать с файлами своего проекта, релоады будут происходить сами, и как пел Валерий Сюткин, эти полсекунды я день за днём сложу в классные проекты )
P.S.: если мониторить слишком много (десятки тысяч)
файлов, начальная загрузка будет занимать больше времени (не пару секунд, а десятки секунд)
, в итоге эта штука будет занимать больше оперативной памяти (500 мб на 25к файлов)
, но дальше вроде как всё будет работать так же хорошо, как и если смотреть в несколько файлов.
Обсуждение