FrontTalks #1: Алексей Иванов – Немного о grunt.js

Автоматизация сборки и упаковки ресурсов, а также почему в версии 0.4.0 все будет гораздо лучше, чем сейчас.

Transcript

2. Что такое grunt.js • Инструмент для сборки проектов. • Написан на n o d e . j s, устанавливается через n p m. • Запускается из консоли. • Мы сегодня обсуждаем версию 0.4.0, в версии 0.3.x все сильно по- другому.
3. Компоненты 1. g r u n t — основное приложение, может ставиться как локально, так и на system path. Запускает таски. 2. g r u n t - c l i — глобальный враппер выбирающий использовать локальную версию grunt или глобальную. 3. g r u n t - i n i t — утилита занимающаяся разворачиванием новых проектов по шаблонам. 4. Конкретные таски и шаблоны (тысячи их).
4. Какие бывают таски 1. Запуск препроцессоров: less, stylus, coffeescript. 2. Сжатие css и js: yui, csso, uglify.js. 3. Проверка синтаксиса: csslint, jshint. 4. Запуск юнит-тестов: jasmine, qunit. 5. Обработка картинок и сборка спрайтов: imgo. 6. Сохранение скриншотов из html в статику: capser.js. 7. Автозапуск тасков при изменения в файлах и собственный сервер.
5. Настройка 1. В корень проекта добавляется файл G r u n t f i l e . j s с конфигом. 2. Рядом с ним кладем файл p a c k a g e . j s o n для установки grunt.js и тасков (можно генерировать автоматом из шаблонов). 3. Перед первым запускам делаем n p m i n s t a l l 4. Теперь таски и группы тасков можно запускать через консоль в папке проекта.
6. Конфиг m o d u l e . e x p o r t s = f u n c t i o n ( g r u n t ) { g r u n t . i n i t C o n f i g ( { / / т у т ж и в у т к о н ф и г и т а с к о в } ) ; g r u n t . l o a d N p m T a s k s ( ' g r u n t - s a m p l e ' ) ; g r u n t . r e g i s t e r T a s k ( ' d e f a u l t ' , [ ' c o n c a t ' , ' s a m p l e ' ] ) ; } ; 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 .
7. Конфиг таска j s h i n t : { s r c : [ "l i b / * * / * . j s" , "! l i b / j q u e r y . j s" ] , o p t i o n s : { c u r l y : t r u e , g l o b a l s : { j Q u e r y : t r u e } } } 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 . 0 9 .
8. Конфиг мультитаска h a n d l e b a r s : { c o m p i l e : { o p t i o n s : { n a m e s p a c e : " J S T " } , f i l e s : { " r e s u l t . j s " : "p a t h / t o / s o u r c e . h b s" , " a n o t h e r . j s " : [ "p a t h / * . h b s" , "m o r e / * . h b s" ] } } } 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 . 0 9 .
9. Переназначение опций h a n d l e b a r s : { c o m p i l e : { o p t i o n s : { n a m e s p a c e : "J S T" } , f i l e s : { " r e s u l t . j s " : " p a t h / t o / s o u r c e . h b s " , } } , o p t i o n s : { n a m e s p a c e : f a l s e } , } 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 . 0 9 .
10. Автогенерация src/dest s t y l e t t o : { f i l e s : [ { e x p a n d : t r u e , s r c : [ ' i - r e s e t / i - r e s e t . s t y l ' , ' b - * / * * / * . s t y l ' ] , d e s t : ' p u b l i s h / ' , e x t : ' . c s s ' , f l a t t e n : t r u e } ] } 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 . 0 9 .
11. Запуск из папки проекта 1. g r u n t 2. g r u n t l i n t 3. g r u n t c o n c a t : m a i n
12. Ссылки по теме 1. https://github.com/gruntjs/grunt 2. https://github.com/gruntjs/grunt-cli 3. https://github.com/gruntjs/grunt-init