Grunt — Advanced Tips

Презентация про умное использование grunt для разработчиков и гостей Choco Family @ ChocoDev Day

Transcript

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. !7 Autoprefixer imgo Borschik banner concurrent
8. !8
9. !9 Autoprefixer grunt.loadNpmTasks(‘grunt-autoprefixer'); Чистка кода Добавление нужны вендорных префиксов Удаление устаревших ненужных вендорных префиксов Используется база данных caniuse.com Умеет работать с препроцессорами и source maps
10. !10 Конфигурация grunt-autoprefixer
11. !11 И это все?
12. !12 Добавим немного опций
13. !13 Добавим немного опций
14. !14 borschik grunt.loadNpmTasks('grunt-borschik'); Сборка статичных файлов “Умная” минификация CSS и JS
15. !15 Конфигурация borschik
16. !16 imgo grunt.loadNpmTasks('grunt-imgo'); Оптимизация изображений
17. !17
18. !18 Создаем задачу imgo
19. !19 grunt.loadNpmTasks('grunt-concurrent'); Асинхронный запуск тасков
20. !20 Конфигурация grunt-concurrent
21. !21 Что еще? grunt-remove-logging — удаление console.log() grunt-dploy — помощь в деплое на дев/продакшн сервера grunt-contrib-imagemin — оптимизация изображений grunt-dev-update — обновление npm-зависимостей И еще много всего на github.com и gruntjs.com
22. !22 Спасибо за внимание twitter.com/Nikita_Bayev | github.com/drugoi