Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Grunt — Advanced Tips

Avatar for Nikita Bayev Nikita Bayev
January 09, 2014
Technology
1
110

Grunt — Advanced Tips

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

Avatar for Nikita Bayev

Nikita Bayev

January 09, 2014
Tweet

More Decks by Nikita Bayev

See All by Nikita Bayev
Web Performance в Казнете
Avatar for Nikita Bayev drugoi
0
53

Other Decks in Technology

See All in Technology
Cosmos World Foundation Model Platform for Physical AI
Avatar for Takuya MINAGAWA takmin
0
880
仕様書駆動AI開発の実践： Issue→Skill→PRテンプレで 再現性を作る
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
2
650
ブロックテーマ、WordPress でウェブサイトをつくるということ / 2026.02.07 Gifu WordPress Meetup
Avatar for Toro_Unit (Hiroshi Urabe) torounit
0
180
超初心者からでも大丈夫！オープンソース半導体の楽しみ方〜今こそ！オレオレチップをつくろう〜
Avatar for Yamada3 keropiyo
0
110
レガシー共有バッチ基盤への挑戦 - SREドリブンなリアーキテクチャリングの取り組み
Avatar for Konishi tatsuhiro tatsukoni
0
210
【Oracle Cloud ウェビナー】[Oracle AI Database + AWS] Oracle Database@AWSで広がるクラウドの新たな選択肢とAI時代のデータ戦略
Avatar for oracle4engineer oracle4engineer
PRO
2
140
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
10k
顧客の言葉を、そのまま信じない勇気
Avatar for yamatai12 yamatai1212
1
350
量子クラウドサービスの裏側　〜Deep Dive into OQTOPUS〜
Avatar for OQTOPUS oqtopus
0
110
CDKで始めるTypeScript開発のススメ
Avatar for つくぼし tsukuboshi
1
410
プロポーザルに込める段取り八分
Avatar for ShoheiMitani shoheimitani
1
240
生成AI時代にこそ求められるSRE / SRE for Gen AI era
Avatar for ymotongpoo ymotongpoo
5
3.2k

Featured

See All Featured
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
680
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
180
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.1k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
130
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
310
New Earth Scene 8
Avatar for Sydney Stone popppiees
1
1.5k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.2k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.7k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
2
2.4k

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