На конференции Google I/O 2012 во второй части своего выступления Paul Irish представил проект yeoman.io. Главной целью которого является собрать для разработчика лучшие библиотеки и фреймворки в одном месте и создать идеальную среду для разработки за кратчайшее время.
Yeoman пока не открыт для публичного доступа, но из видео с конференции можно сделать вывод что это действительно крутая штука.
Вчера вечером набрел на гитхабе исходники сайта yeoman.io. Если внимательно изучить Gruntfile.js (grunt — утилита для сборки javascript проектов от cowboy), то можно заметить такие полезные вещи как:
- Генерация manifest. Этот файл используется для кеширования скриптов, стилей и т.д. клиентом. Отличная вещь для оптимизации загрузки приложения при повторном запуске.
- Компиляция CoffeeScript. Все никак не дойдут руки пощупать, но вещь отличная. Хотя и лишняя для большинства javascript разработчиков.
- Компиляция SCSS. В следующем проекте буду использовать его как замену LESS. SASS дает намного больше возможностей для разработчика по сравнению с LESS. Если до этого вы пользовались CodeKit или CompassApp для компиляции SCSS-файлов — теперь yeoman будет делать это без сторонних приложений. Кроме того, есть возможность включить LiveReload — отличная и незаменимая вещь при корректировке/верстке HTML-страниц и стилей.
Compass + LiveReload можно пощупать прямо сейчас (и уже довольно давно), но для этого нужно стороннее приложение. Есть несколько вариантов, самый простой — собрать CompassApp из исходников на github. Дальше создать проект и в настройках приложения во вкладке Services включить livereload.
Если нужен только LiveReload — вам сюда.По сути это то же самое что делает yeoman, только он компилирует и следит за обновлениями файлов самостоятельно, без каких либо сторонних утилит.
- Конкатенация и минификация файлов — js, css. Оптимизация html. Стоит заметить что для js создается файл с именем, которое соответствует свойству name из файла package.json + версия приложения из этого же файла. Казалось бы это просто лишние движения, но не все так просто. Для браузеров, которые не знают что такое manifest, смена названия скрипта гарантирует что клиент не будет грузить устаревшую версию скрипта.
- Оптимизация картинок. Используя jpegtran и OptiPNG.
С Gruntfile.js разобрались, теперь давайте пройдемся по ключевым моментам из выступления.
Что включено в yeoman?
- Compass. Sass. Coffeescript.
- Поддержка модулей AMD. RequireJS. ES6 Module experiment.
- Twitter Bootstrap. Stripped HTML5 Boilerplate. Modernizr.
- Jasmine. PhantomJS.
- OptiPNG. jpegtran.
Команды поддерживаемые yeoman:
- init — инициализация нового проекта. Вам предлагается ввести информацию о проекте — название, описание и т.д. и выбрать хотите ли вы использовать Twitter Bootstrap и RequireJS.
- build — сборка и оптимизация приложения, готового к проданшину.
- server — запуск сервера, который будет следить за изменениями (coffee, js, scss, css, картинки).
Кстати, увидел замечательную вещь — запуск легковесного HTTP-сервера:
python -m SimpleHTTPServer 8080
- test — запуск тестов Jasmine
- install — инсталляция указанного пакета и его зависимостей. В случае с Backbone это Underscore и jQuery.
- uninstall — деинсталяция пакета.
- update — обновление до последней версии
- list — список доступных пакетов
- search — поиск доступных пакетов
- lookup — просмотр информации о пакете
Если вы хотите узнать о запуске проекта одним из первых — на сайте вы можете оставить имя своего github аккаунта или адрес электронной почты.
Автор: vermilion1
