Prepros что это за программа

Содержание

Многоязычная предварительная обработка с Prepros

В современной веб-разработке первичная обработка играет значительную роль. Языки предварительной обработки, также известные как препроцессоры, делают написание HTML, CSS и JavaScript быстрее, проще и гибче. Но прежде чем мы сможем их использовать, нам нужно установить и настроить их на наших машинах.

Это не имеет большого значения, когда мы используем только один, например CoffeeScript. Но часто наш проект требует объединения нескольких препроцессоров, и тогда все может стать немного сложнее. Нам нужно установить все необходимые языки и правильно настроить их для компиляции наших файлов. Конечно, это означает дополнительную работу. К счастью, существует гораздо более простое решение – решение «все в одном».

Prepros , созданный Subash Pathak , – это инструмент, который может автоматически обрабатывать все наши потребности в предварительной обработке. Это GUI-компилятор с открытым исходным кодом, похожий на CodeKit, для предварительной обработки языков, таких как LESS, Sass, Compass, Stylus, Markdown, CoffeeScript и так далее. С Prepros многоязыковая предварительная обработка больше не является проблемой. Он работает как на Win, так и на Mac, и с момента его первого выпуска 1 мая 2013 года он активно развивался, регулярно добавляя новые функции.

Prepros — Обзор приложения

Звучит хорошо? OK. Давайте кратко рассмотрим, что Препрос может сделать для нас.

Характеристики и преимущества

Ниже вы можете найти описание всех интересных функций и преимуществ, которые Prepros предлагает на момент написания этой статьи:

Как это устроено

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

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

После добавления проекта у Prepros есть множество опций, которые вы можете настроить в соответствии со своими потребностями.

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

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

варианты проекта

Prepros что это. Как пользоваться prepros // Сборка фронтэнда // Компилятор SASS KIT

Попробуйте это

Теперь давайте сделаем быстрый тест, чтобы увидеть приложение в действии. Для начала загрузите и установите версию Prepros для вашей операционной системы.

Мы будем использовать LESS и CoffeeScript в нашем примере, чтобы продемонстрировать, как работает приложение. Сначала вам нужно создать папку проекта с именем «Prepros Testing». Также добавьте подпапки «css» и «js». Затем создайте файл test.html

html> head> meta charset=»utf-8″ /> title>Prepros Testtitle> link href=»css/test.css» rel=»stylesheet» type=»text/css» /> script src=»js/test.js» type=»text/javascript»>script> head> body> hr /> div class=»round-rect»>div> body> html>

В разделе head Затем в разделе body div round-rect,

структура папок

Затем создайте файл test.less Код выглядит следующим образом:

OK. Теперь создайте файл test.coffee Код выглядит следующим образом:

square = (x) -> x * x cube = (x) -> square(x) * x getCube = -> document.write «The result is: » + cube(4) getCube()

Теперь мы готовы к тестированию. Сначала запустите Prepros и добавьте наш тестовый проект.

приложение Prepros

Затем щелкните правой кнопкой мыши имя проекта и выберите « Скомпилировать все файлы» . Если вы посмотрите на папки «js» и «css», то увидите, что test.js test.css test.html

Теперь нажмите « Открыть реальный URL проекта» (значок глобуса) на панели инструментов проекта и выберите « test.coffee Вы должны увидеть выражение «Результат: 64» и оранжевый прямоугольник с закругленными углами ниже.

Откройте cube() Теперь просто измените аргумент в функции 4 8 test.less Как только вы сохраните файл, вы увидите изменения, отраженные в вашем браузере. Затем откройте 10px 100px Вы должны увидеть оранжевый круг сейчас.

результаты теста

OK. Оно работает. Поздравляем! Ваше новое секретное оружие для веб-разработки успешно протестировано и готово к работе.

Вывод

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

Эта статья – только краткое введение в этот замечательный инструмент предварительной обработки. Для получения более подробной информации, не упомянутой здесь, пожалуйста, проверьте документацию на веб-сайте Prepros .

Источник: coderlessons.com

Prepros: open-source компилятор файлов для front-end разработки

2013-08-04 в 13:58, admin , рубрики: coffeescript, css, haml, html, jade, javascript, less, livereload, livescript, markdown, open source, sass, scss, slim, stylus, web, web-разработка, Веб-разработка, препроцессор, метки: coffeescript, css, haml, html, jade, javascript, less, livereload, livescript, markdown, open source, sass, scss, slim, stylus, web, web-разработка, препроцессор

Prepros: open source компилятор файлов для front end разработки

Здравствуйте, уважаемые читатели.

Данная статья посвящена фантастическому, на мой взгляд, open-source приложению Prepros, которое может облегчить рабочий процесс многим фронт-энд разработчикам.

Prepros умеет компилировать файлы LESS, Sass, SCSS, Stylus, Jade, Slim, Coffeescript, LiveScript, Haml и Markdown, минифицировать и объединять в один JavaScript-файлы и это еще не все.

Под катом — более подробный обзор приложения.

Возможности Prepros

Возможности приложения перечислены в информации о проекте на GitHub:

компиляция файлов less, sass, scss, compass, coffeescript, stylus, jade, slim, markdown, haml и livescript;
приложение не зависит от того, установлены ли в системе соответствующие программы и библиотеки (sass, compass и т.п);
возможность оптимизировать изображения;
обновление страниц в браузере в реальном времени;
минификация и объединение файлов JavaScript;
отслеживание директив import;
гибкие настройки;
система вывода ошибок и оповещений (логов);
встроенный http-сервер.

Обзор интерфейса

Prepros: open source компилятор файлов для front end разработки

Приложение выполнено в современном flat-стиле; приложение можно свернуть в трей, что удобно.

Интерфейс приложения, по сути, прост и интуитивно понятен. Слева в сайдбаре выводится список ваших проектов, центральная часть отведена на список файлов, справа находится меню для работы с отдельным файлом.

Сверху справа — меню глобальных настроек приложения.

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

Prepros: open source компилятор файлов для front end разработки

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

Prepros: open source компилятор файлов для front end разработки

При активированной опции автокомпиляции после каждого сохранения файла программа выводит информацию о проведенной обработке файлов:

Развитие проекта и планы на будущее

Проект Prepros совсем молодой: первый релиз датирован 01 мая 2013 года; и, несмотря на то, что сейчас приложение производит впечатление уже готового продукта, приложение активно развивается, список запланированных фич можно посмотреть на главной странице проекта на GitHub.

Источник: www.pvsm.ru