Middleman инструмент для новейшей верстки и создания статичных сайтов

  • написал: MpaK
  • 0
Родилась небольшая идея познакомить и рассказать о таком замечательном инструменте как Middleman, который может быть полезен в особенности верстальщикам, которые бы хотели открыть для себя новые инструменты, frontend разработчикам и просто около веб разработчикам, которым интересны новые инструменты и на слуху такие слова как SCSS, CoffeeScript, Compass и т.д.

По порядку.
Зачем нужен Middleman и что это за инструмент.
Если не вдаваться глубоко в технические подробности, то это Ruby библиотека, которая ставится из gem пакета и включает в себя веб-сервер и генератор статичных страниц (html+css+js) из разного рода структурированных шаблонов ERB, HAML, Slim, покрывать это все стилями таких технологий как SCSS, SASS, LESS и писать JS код на языке CoffeeScript, использовать внутри хранилища данных (yaml, json внутри, но ничто не мешает использовать привычные базы данных, например SQLite), добавлять динамику в виде helper'ов привычных в больших MVC фрэймворках и вообще всячески автоматизировать с помощью большого кол-ва Ruby инструментов.

Т.е. на входе вы имеете структурированные шаблоны (erb,slim,haml) + стили (scss, less) + coffeescript отлаживается все в этой среде, дальше можно использовать готовую верстку уже в своих например Ruby on Rails проектах или же сгенерировать статичные страницы на выходе html + css + javascript которые можно использовать как статичный сайт выдерживающий почти любые «хайлоад» нагрузки ;-) Если не совсем понятно, то можно почитать на сайте инструмента — middlemanapp.com или лучше взять конечно в руки и попробовать, как раз попробую показать вам ряд его возможностей далее.

Как начать.
Конечно нужен интерпретатор языка Ruby, для Linux, MacOS платформ ставится все это если не по умолчанию, то полно инструкций как установить, и даже на этом сайте например, для Windows rubyinstaller.org/downloads/ инсталляторы пока, что текущей 2.0, возможно стоит там же сразу скачать и поставить DevKit под свою версию операционки и Ruby.

Ставим Middleman в консоли набираем
gem install middleman


Теперь в одной из своих папок создаем новый (пустой) проект:
middleman init project_name

project_name — разумеется название вашего проекта символами латинцы.

В текущей папке появится ваш проект, перейдем в него и увидим текущие файлы

cd project_name
ls -al

Названия говорят сами за себя:
Gemfile — знакомый всем рубистам файл, где обычно прописываются зависимости к библиотекам
build — здесь будет ваш готовый, сгенерированный статичный html результат
config.rb — файл конфигурации проекта, в нем можно включать в работу новые библиотеки и опции middlemanapp.com/advanced/configuration/
source — здесь будут лежать как раз ваши шаблоны и структура сайта, потому там внутри и лежат готовые папки:
images — сюда можно складывать все файлы изображений
javascripts — папка для javascript и не только, например и для coffeescript файлов
layouts — группирущие шаблоны страниц, которые как раз оборачивают получаемые результаты
stylesheets — папка для css и не только стилей (scss, less например)
Так же если ознакомиться с мануалами на сайте middlemanapp.com/ то можно узнать, что есть куча готовых шаблонов под Middleman с использованием всевозможных фрэймворков под веб и даже мобильный веб, заготовки под блоги или простые бизнес страницы (лэндинги делать на Middleman просто прелесть). Так что посмотрите сайт, инструментов действительно очень много.

Теперь хорошо бы доставить нужные зависимости:
bundle install


И можно стартовать шаблонное приложение
bundle exec middleman server

после чего в консоли будут видны ошибки или же сообщения о том, что сервер запущен по адресу 0.0.0.0:4567
Теперь можно открыть браузер и набрать в нем 127.0.0.1:4567 и увидеть результат шаблонной страницы.
Теперь можно в папке source создавать свои файлы, стили, подключать и экспериментировать, а livereload поможет сразу видеть ошибки или готовый результат.

По умолчанию шаблоны в Middleman используются ERB, но для тех кто не знаком, то могу порекомендовать шаблоны почище, например Slim — slim-lang.com
Чтобы начать их использовать, достаточно в файле Gemfile добавить строку gem 'slim' в консоли доставить новые зависимости
bundle install

В файл config.rb добавить строку require 'slim'
И теперь можно использовать файлы Slim формата, просто например называя их как index.html.slim именование пришедшее из Sprockets и Rails мира, когда интерпретация идет справа на лево и окончательное расширение файла будет самое левое, последнее, в нашем случае .slim файл преобразуется в index.html, такие же «чудеса» можно тварить если в папке javascript именовать файлы как all.js.coffee и тогда внутри можно использовать CoffeeScript директивы, но ничего не мешает прибавлять еще шаг, например all.js.coffee.erb тогда этот файл будет сперва интерпретировать как ERB шаблон и можно вставлять ruby код, далее coffee и конечный уже будет all.js файл.

Сгенерировать результат, если вам нужны статичные html страницы можно простой командой в консоли
middleman build

после чего структуру сайта можно найти в папке build

В целом стоит поэкспериментировать, возможностей у Middleman огромное множество, как и применений такому простому и мощному инструмету.
Я например побаловался и очень быстро для примера накидал простенький статичный блог по адресу aomegaru.github.io для изучения как например можно хранить локальные данные отдельно от шаблонов в папке data, исходники можно взять тут github.com/ufacode/midman

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

Middleman on aomega.ru blog

2 комментария

avatar
  • c0mx
  • 0
похоже придётся долго разбираться, а перед этим спросить — есть многостраничный html сайт, пытаюсь упростить задачу по его заполнению пока на публикацию 1 страницы уходит около получаса. К страничке прилогаются картинки в отдельной папке, сможет ли Middleman узнать их width и height и автоматически построить галереи, имея только шаблоны. к примеру, картинка с *_head.jpg отправляется в заголовок статьи и получает id=«main», картинки *_[число от 1 до 5].jpg отправляются в галерею над футером и т.д.?
avatar
  • admin
  • 0
без проблем, варианта тут два:
1. найти уже готовый плагин — directory.middlemanapp.com/#/extensions/all
2. написать самому, ничего сложного нет, потому как это обычный Ruby
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.