Grunt - Advanced Tips (NIkita Bayev) www.chocomart.kz

1. GRUNT — ADVANCED TIPS
Nikita Bayev
Front-end developer @ Chocomart.kz
!
!1

2. gruntjs.com

3. nodejs.org

4. > grunt

5. !5

6. Оптимизация
Автоматизация
Минификация
Генерация
!6

7. Autoprefixer
imgo
Borschik
banner
concurrent
!7

8. !8

9. Autoprefixer
grunt.loadNpmTasks(‘grunt-autoprefixer');
Чистка кода
Добавление нужны вендорных префиксов
Удаление устаревших ненужных вендорных префиксов
Используется база данных caniuse.com
Умеет работать с препроцессорами и source maps
!9

10. Конфигурация grunt-autoprefixer
!10

11. И это все?
!11

12. Добавим немного опций
!12

13. Добавим немного опций
!13

14. borschik
grunt.loadNpmTasks('grunt-borschik');
Сборка статичных файлов
“Умная” минификация CSS и JS
!14

15. Конфигурация borschik
!15

16. imgo
grunt.loadNpmTasks('grunt-imgo');
Оптимизация изображений
!16

17. !17

18. Создаем задачу imgo
!18

19. grunt.loadNpmTasks('grunt-concurrent');
Асинхронный запуск тасков
!19

20. Конфигурация grunt-concurrent
!20

21. Что еще?
grunt-remove-logging — удаление console.log()
grunt-dploy — помощь в деплое на дев/продакшн сервера
grunt-contrib-imagemin — оптимизация изображений
grunt-dev-update — обновление npm-зависимостей
И еще много всего на github.com и gruntjs.com
!21

22. Спасибо за внимание
twitter.com/Nikita_Bayev | github.com/drugoi
!22