Сегодня хотелось бы рассказать про очень удобную связку для фронтенд разработки.

А именно:

  • бесплатный текстовый редактор Sublime Text 2
  • бесплатный препроцессор PrePros App

prepros

PrePros App — это просто великолепные препроцессор, который работает с less, sass, scss, compass, coffeescript, stylus, jade, slim, markdown, haml и livescript. А самое главное — делает это из коробки, без необходимости установки пакетов. PrePros App идет со встроенным nodeJS и всеми необходимыми пакетами. Одним словом, ставим и готовы к работе.

В то время как приложение открыто, оно будет компилировать ваши «сахарные пописульки» при каждом сохранении. Т.е. приложение работает абсолютно автоматически. Обладает функциями LiveReload и возможностями деплоя по FTP. Так же хотелось бы отметить отличный чистый интерфейс приложения, который делает «порог вхождения» в работу с ним минимально возможным, а саму работу — приятной и комфортной.

Sublime-Text2

Про Sublime Text 2 — думаю многие наслышаны, и если вы не пользуетесь IDE в любых ситуациях(до маразма) и любите темную цветовую схему, то вы пользователь Sublime Text 2 =)

Из преимуществ, хотелось бы отметить:

  • Богатый репозиторий пакетов
  • молниеносная скорость работы
  • zen coding (emmet)
  • гибкая функция поиска и замены (даже с использованием regExp)
  • Мультивыделение кода
  • удобная карта кода
  • приятная подсветка синтаксиса
  • настраиваемость всего
  • кроссплатформенность

 

Пример использования Sublime Text и PrePros App

1. Устанавливаем Sublime Text 2 и PrePros App

2. Настройка Sublime Text 2

Первым делом нам нужно установить Package Manager для того, чтобы иметь доступ к репозиториям с пакетами.
Простая инструкция по установке

После этого, если в верхнем меню View -> Syntax отсутствует подсветка нужного нам языка — устанавливаем пакет подсветки. В нашем случае coffeescript.

Для этого в верхней панели Sublime Text заходим в Preferences -> Package Control и выбираем Install Package. В появившейся строке вводим coffeescript и выбираем пакет отвечающий за подсветку синтаксиса coffeescript.

3. Настройка PrePros App

Настраиваем компилятор как душе угодно, указываем папку проекта с нашими фаилами и готово)

4. Работаем

Разделим Sublime Text на 2 окна комбинацией клавиш:  Alt + Sift + 2

Создаем фаил script.coffee. Напишем в нем функцию, сохраняем (ctrl+s) и видим окошко PrePros App, которое нам сообщает об успешной компиляции. Закидываем скомпилированный script.js в правое окно Sublime Text 2. Теперь мы можем наблюдать изменения в script.js при каждом сохранении script.coffee

prepros