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

Что такое grunt.js
• Инструмент для сборки проектов.
• Написан на n d . s, устанавливается через n m.
oej p

• Запускается из консоли.
• Мы сегодня обсуждаем версию 0.4.0, в версии 0.3.x все сильно по-
другому.

Компоненты
1. g u t — основное приложение, может ставиться как локально, так
rn
и на system path. Запускает таски.
2. g u t c i — глобальный враппер выбирающий использовать
rn-l
локальную версию grunt или глобальную.
3. g u t i i — утилита занимающаяся разворачиванием новых
rn-nt
проектов по шаблонам.
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. Автозапуск тасков при изменения в файлах и собственный сервер.

Настройка
1. В корень проекта добавляется файл G u t i e j с конфигом.
rnfl.s
2. Рядом с ним кладем файл p c a e j o для установки grunt.js и
akg.sn
тасков (можно генерировать автоматом из шаблонов).
3. Перед первым запускам делаем n m i s a l
p ntl

4. Теперь таски и группы тасков можно запускать через консоль в папке
проекта.

Конфиг
0 .m d l . x o t = f n t o ( g u t ) {
1 oueeprs ucin rn
0.
2 gutiiCni(
rn.ntofg{

0.
3 / ттжвткниитсо
/ у иу офг акв
0.
4 };
)
0.
5 gutlaNmak(gutsml';
rn.odpTss'rn-ape)
0.
6 gutrgseTs(dfut,['oct,'ape ];
rn.eitrak'eal' cna' sml' )
0 .}
7 ;

Конфиг таска
0 .j h n : {
1 sit
0.
2 s c [ "l b * / . s" "! i / q e y j
r: i/**j , l b j u r . s" ],
0.
3 otos {
pin:
0.
4 cry tu,
ul: re
0.
5 goas {
lbl:
0.
6 jur:tu
Qey re
0.
7 }

0.
8 }
0 .}
9

Конфиг мультитаска
0 .h n l b r : {
1 adeas
0.
2 cmie {
opl:

0.
3 otos {nmsae "S"}
pin: aepc: JT ,
0.
4 fls {
ie:

0.
5 " e u t j " "p t / o s u c . b ,
rsl.s: a h t / o r e h s"
0.
6 " n t e . s : [ a h * h s" "m r / . b ]
a o h r j " "p t / . b , o e * h s"
0.
7 }
0.
8 }
0 .}
9

Переназначение опций
0 .h n l b r : {
1 adeas
0.
2 cmie {
opl:
0.
3 o t o s { n m s a e "J T" }
pin: aepc: S ,
0.
4 fls {
ie:

0.
5 "eutj" "aht/orehs,
rsl.s: pt/osuc.b"
0.
6 }
0.
7 },
0.
8 otos {nmsae fle }
pin: aepc: as ,
0 .}
9

Автогенерация src/dest
0 .s y e t : {
1 tlto
0.
2 fls [{
ie:

0.
3 epn:tu,
xad re
0.
4 sc ['-ee/-ee.tl,'-/**sy']
r: irstirstsy' b**/.tl ,
0.
5 ds:'uls/,
et pbih'
0.
6 et 'cs,
x: .s'
0.
7 fatn tu
lte: re
0.
8 }]
0 .}
9

Запуск из папки проекта
1. g u t
rn
2. g u t l n
rn it
3. g u t c n a : a n
rn octmi

Ссылки по теме
1. https://github.com/gruntjs/grunt
2. https://github.com/gruntjs/grunt-cli

3. https://github.com/gruntjs/grunt-init

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

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Алексей Иванов: немного о grunt.js #FrontTalks

Similar to Алексей Иванов: немного о grunt.js #FrontTalks (20)

More from JetStyle

More from JetStyle (20)

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