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

!

!1
gruntjs.com
nodejs.org
> grunt
!5
Оптимизация
Автоматизация
Минификация
Генерация

!6
Autoprefixer
imgo
Borschik
banner
concurrent

!7
!8
Autoprefixer
grunt.loadNpmTasks(‘grunt-autoprefixer');
Чистка кода
Добавление нужны вендорных префиксов
Удаление устаревши...
Конфигурация grunt-autoprefixer

!10
И это все?

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

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

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

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

!15
imgo
grunt.loadNpmTasks('grunt-imgo');

Оптимизация изображений

!16
!17
Создаем задачу imgo

!18
grunt.loadNpmTasks('grunt-concurrent');

Асинхронный запуск тасков

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

!20
Что еще?
grunt-remove-logging — удаление console.log()
grunt-dploy — помощь в деплое на дев/продакшн сервера
grunt-contrib...
Спасибо за внимание
twitter.com/Nikita_Bayev | github.com/drugoi

!22
Upcoming SlideShare
Loading in...5
×

ChocoDevDay — Grunt - Advanced Tips (NIkita Bayev)

225

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
225
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

ChocoDevDay — Grunt - Advanced Tips (NIkita Bayev)

  1. 1. GRUNT — ADVANCED TIPS Nikita Bayev Front-end developer @ Chocomart.kz ! !1
  2. 2. gruntjs.com
  3. 3. nodejs.org
  4. 4. > grunt
  5. 5. !5
  6. 6. Оптимизация Автоматизация Минификация Генерация !6
  7. 7. Autoprefixer imgo Borschik banner concurrent !7
  8. 8. !8
  9. 9. Autoprefixer grunt.loadNpmTasks(‘grunt-autoprefixer'); Чистка кода Добавление нужны вендорных префиксов Удаление устаревших ненужных вендорных префиксов Используется база данных caniuse.com Умеет работать с препроцессорами и source maps !9
  10. 10. Конфигурация grunt-autoprefixer !10
  11. 11. И это все? !11
  12. 12. Добавим немного опций !12
  13. 13. Добавим немного опций !13
  14. 14. borschik grunt.loadNpmTasks('grunt-borschik'); Сборка статичных файлов “Умная” минификация CSS и JS !14
  15. 15. Конфигурация borschik !15
  16. 16. imgo grunt.loadNpmTasks('grunt-imgo'); Оптимизация изображений !16
  17. 17. !17
  18. 18. Создаем задачу imgo !18
  19. 19. grunt.loadNpmTasks('grunt-concurrent'); Асинхронный запуск тасков !19
  20. 20. Конфигурация grunt-concurrent !20
  21. 21. Что еще? grunt-remove-logging — удаление console.log() grunt-dploy — помощь в деплое на дев/продакшн сервера grunt-contrib-imagemin — оптимизация изображений grunt-dev-update — обновление npm-зависимостей И еще много всего на github.com и gruntjs.com !21
  22. 22. Спасибо за внимание twitter.com/Nikita_Bayev | github.com/drugoi !22
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×