Как пользоваться Prepros, что это и где скачать?

Если ты верстаешь, то ты точно в курсе, как важно, чтобы твоя рабочая среда помогала тебе ускорить разработку твоего приложения. То мы используем Subline Text 3 с кучей плагинов, среди которых Emmet, TAG и другие им подобные. Глянь что нужно для того, чтобы стать профессиональным Front-end разработчиком.

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

  • Live Preview – позволяет просматривать файлы в браузере, причем Prepros сам обновляет страницу когда какой-то файл был изменен и сохранен. Кроме того, эту функцию можно применить и для кастомного локального сервера, такого как Xampp, Mamp, WordPress и так дальше.
  • Компиляция и минификация файлов – эта программа компилирует такие файлы как: Sass, Less, Pug, CSS, Stylus,Markdown, Haml, Slim, CoffeeScript, Livescript, Typescript;
  • Возможность работать с файлами по FTP;
  • Удаленная проверка – в отличии от локального инспектора на Google Chrome удобна тем, что если вы подключитесь удаленно, например, с телефона, то можно все изменения будут применяться на телефоне, вместе с возможностью работы в консоли (аллилуйя, как мне этого не хватало).
  • Гибкая настройка выгрузки файлов – то есть можно всегда указать, где размещать скомпилированный или минифицированный файл, либо в той же папке, либо в какой-то другой.

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

Кстати, программа от части бесплатная, точнее сказать даже, условно бесплатная, это означает что ее можно скачать и использовать. Разработчики дают два типа демо лицензии, но там у них все не обошлось без хитростей.

Стандартно можно зарегистрировать Prepros на 7 дней, но если немного покопать глубже, Prepros можно зарегистрировать на 30 дней. После нужно покупать лицензию, но если покупать не хотите, то дальше программой вам никто не запрещает пользоваться, просто будет постоянно выскакивать надоедливое окошко.

Разобрать с ним можно двумя способами, купить программу или взломать в интернете такого добра куча описано. Что конкретно делать дальше решать тебе, но испытать программу я очень даже рекомендую

Кстати, когда программа компилирует файлы, такие как scss или less, то так же оно переводит все переменные в нужный нам формат, точнее просто переводит их в значения переменных. Кстати, если хочешь научиться работать с переменными в scss и less, то у меня есть статейка на эту тему.

На этом мой обзор не закончим, идем дальше.

Как пользоваться программой?

К счастью пользоваться программой можно очень просто. Первый шаг, который я не буду описывать это установка программы. Берешь вводишь в поисковике слово скачать и название программы, и получаешь официальную страницу.

Дальше все как обычно.

Заходим в программу видим начальную картинку.

Начальное окно программы Prepros
Начальное окно программы Prepros

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

структура проекта в prepros

Там мы можем увидеть структуру проекта, ну и всякие дополнительные функции.

Когда мы перетащили проект и как я говорил, что он уже заработал, то множество людей (я один из них на начале работы с программой), просто открывают редактор и работают уже в нем. Иногда большего и не нужно. Оно себе транслирует на браузер и обновляет страницу. SCSS компилируется ну и на этом все. Больше и не нужно, но все же я решил исследовать эту программу подробнее и как оказалось там функционал будет намного круче чем себе мог представить.

И сейчас мы его рассмотрим подробнее. По факту, у сайта очень крутая документация, в которой коротко и на английском языке объясняется от и до.

Но не все по правде знают английского, ну по факту лишнее описание в интернете об этой программе кому-то да пригодится, я в этом уверен.

Список файлов в проекте

Список файлов, которые находится в проекте, по факту это всего лишь список, больше ничего. Никакого дополнительного функционала он не дает. Разве что можно открыть какой-то файл конкретно для просмотра в браузере нажав на файл правой кнопкой.  У или загрузить на FTP если решитесь его настроить.

Список файлов в проекте

Меню логов

Это меню логов, очень хорошее меню для того случая, если вдруг была допущена ошибка, то программа высветит где и какая ошибка. В целом все очень просто. Красным выделено ошибку, которая мешает следующей работе, а зеленым успех.
(Картинка 5)

Меню логов

FTP меню

FTP меню, в нем ты будешь видеть какие файлы не синхронизированы с проектом, а какие синхронизированы. Даже немного напоминает Git только вот нет контроля версий, чтобы откатить какие-то из изменений. Я лично этой функций не пользовался, но если что настроить ее не тяжело.

Для  этого заходим в настройки и вводим все данные от FTP, для этого переходим в Settings -> FTP Settings, ну и в этом меню собственно заполняем соответствующие поля.

Алгоритм работы с FTP

Если проект находится на хостинге, то сначала скачиваем его себе на компьютер, если это просто верстка, то локального сервера не нужно, но, а в противном случае ставим и запускаем локальный сервер типа xampp ну отдельно добавляем его в Prepros.

После переходим в настройки и заполняем следующие поля:

Настройка Ftp в программе Prepros часть 1
Настройка Ftp в программе Prepros часть 1
Настройка фтп в програме препрос

Настройки Prepos

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

Каждый пункт я расписывать не буду, но скажут так, можно настроить каждый формат которые будет компилироваться, начиная от SCSS и заканчивая TypeScript.

Кроме того, можно настроить через какой порт открывать в браузере localhost, на какие файлы в этом проекте распространяется файл Watcher (То есть для конкретного проекта, можно отключить компиляцию, что я считаю очень важным моментом).

Работа с LivePreview

Работа с этой функции одно удовольствие. Мало того, что оно отображает все изменения в реальном времени. Так еще можно раздать это дело на телефон и так же работать как в браузере на телефон.

Работа с LivePreview

Кроме того, можно использовать файловый инспектор (Как на Google Chrome), только в телефоне. Причем не эмулировать телефон, а увидеть, как оно отображается на телефоне и исправить ошибки если есть такие.

работа с Лайв превю в Prepros

Что дальше?

А дальше выбирать тебе. Это кстати не рекламный пост, а просто пост гордого пользователя замечательным софтом.

Мне он заменил полностью Gulp, хотя он и более функциональный, но в тот же момент он сложнее чем эта программа. Ее постоянно нужно настраивать под каждый проект индивидуально, иногда даже не очень и сильно мне приходилось редактировать, но все же приходилось по мелочам, а тут добавил и пользуешься.

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

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

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

Оставьте комментарий