gumistudy#15 How to Automate Tasks grunt.jsを使ったタスク自動化

1,697 views
1,617 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,697
On SlideShare
0
From Embeds
0
Number of Embeds
627
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

gumistudy#15 How to Automate Tasks grunt.jsを使ったタスク自動化

  1. 1. u—s‚øtKtÑ @_kenichirow ÷™¶&gumi ô çà èà Ôê¼ °ì: HTML,SCSS,CoffeeScript °ì? : ¤—•«ł› “¦Python EÛ? : ^ŠClojure Oµ − vim , git
  2. 2. :Ÿ ¡̃^Š”ô çà èØoìŽ grunt » gumi »grunt³ t∙q³›–−v ^Š”gruntRRìŽ̋v
  3. 3. ox¶ß ¡w^Š”ôçà èØo»fiœo
  4. 4. )åa qk aweb¼ö ÍßÓ ” áÞawÒ—œ¶o Backbone.js¶∙JS”MVCô ߊ ßË SMACSS¶∙&|oCSSŁSÊ 
  5. 5. ŸÜ»Ã³o—zßÎv•Ufl“¦∙ Ðs−̃ Ø)s¤ ÞߊØo“ ^‘̃”ÈowìáË•
  6. 6. .o«åÒ¾éß•Šo< ØÏþ è ¾ ³ −̀¶w)s¤ ÿÕØIo
  7. 7. Šøa|—|łq1;a x−̃ »Šøa|–²žvœ o|¡ Ø› !”© O¶ )•ÓÂ
  8. 8. GRUNT.JS
  9. 9. GRUNT.JS Node.js ¢œ©¤¤ÜÕËŠøaâß Ruby”RakeºJava”Ant œ∼øq¶Ø” Ïþ è ¾ $ grunt + u ©¤ÜÕËù grunt.js $ grunt sass
  10. 10. GRUNT”ïßÔ •fio–gumi »2013 7j‚v”^&⁄v0.4.1 ³³i 0.3Kvœ0.4K v¶ßNòw‾›–o−” Ÿ ä ©–¶oö ̾ »³s¶v›¤ß|—¡ ìáçö” ̂oÏßè»Ó² ̨ : grunt/grunt Upgrading from 0.3 to 0.4
  11. 11. WHO USES GRUNT
  12. 12. cw x−”̇ ÜÕËÀ°ì)³Ł1ô¹¾ Gruntfile.(js/coffee)•̈o– Ïþ è ×s sass(compass)”Ï ð¾ “›¤œ» #Gruntfile.coffee module.exports = (grunt) -> config = compass: debug: options: environment: 'development' release: options: environment: 'production' grunt.loadNpmTasks 'grunt-contrib-compass' grunt.registerTask 'compile', 'compassコンパイルをするよ (DEBUG)', [ 'compass' ] $ grunt compass:release
  13. 13. ¶þ”§Í̆›«Œ¦̃©compass³Ÿ •§z” N°œ ¶o... Î
  14. 14. ² » c”ÜÕ˳— Ł–Ñ̃• ¡− Zî”ô¹¾ ”Nò³{−|–Šø ÜÕË #release task grunt.registerTask 'release-compile', 'sassのコンパイルをするよ (RELEASE)', [ 'checkConflict' //コンパイルするファイルに未解消のコンフリクトがないかチェック 'clean:sass' //sassの一時ファイルを削除 'compass:release' //コンパイル 'clean:css' //古いcssを削除 'lightpng' //リポジトリに追加された画像を圧縮 'copy:sass' //アプリケーションのフォルダにcssをコピー 'csso' //cssoで最適化 'resizeImage' //画像のリサイズ 'cssImage1x' //android用のcss生成 'growl:sass' //おわったらgrowlで通知 ] $ grunt release-compile
  15. 15. ¶þ”§Í ƒ©H”»Ã Ø Ø› »s shell Øoo oµ∼Œ... Î
  16. 16. |zo 2013 •Ó ÕË öç̈x¤z¶o N¶DSL̈x¤z¶o XML»<7”̈z'∼Œ¶o
  17. 17. GRUNTooø©5|µ“JS ÜÕËŠøa! ö ̾ n Vz1000ıö coffee+Ô !©”lodash 9c;»Ã›̌z Õç ¢ x−! ô¹¾ Nò³ç Èß•|– ²”ÜÕ˳̄́|¡” w–Øq ©¶o
  18. 18. GUMI ”GRUNT
  19. 19. qxz)¦– coffee/scss”Ï ð¾ iÜÕË öl•ô^¡−pł |¤ÜÕË •)v©− ×s ß̋∙Øu¢£|¤ ßÕi•scss³Ï ð¾ ¡ −ÜÕË #release task grunt.registerTask 'release-compile', 'sassのコンパイルをするよ (RELEASE)', [ 'checkConflict' //コンパイルするファイルに未解消のコンフリクトがないかチェック 'clean:sass' //sassの一時ファイルを削除 'compass:release' //コンパイル 'clean:css' //古いcssを削除 'lightpng' //リポジトリに追加された画像を圧縮 'copy:sass' //アプリケーションのフォルダにcssをコピー 'csso' //cssoで最適化 'resizeImage' //画像のリサイズ 'cssImage1x' //android用のcss生成 'growl:sass' //おわったらgrowlで通知 ]
  20. 20. ^Š¢›¤ÜÕË
  21. 21. GRUNT-LIGHTPNG compass Šø¢{©−sprite«(»32bit”png ̃¡−âß »m−¦∙ À‚> ºß¤z¶o
  22. 22. «(”ò&º g³{−|–Šø ̃¡© ...
  23. 23. git ls-tree ýÔç 唫(”îáә߳<À gp³}=|–json•|–ZB $ git ls-tree -r HEAD { 'foobar1.png':{ 'hash' : 'e1456604d111dd4' }, 'foobar2.png':{ 'hash' : 'u12358fffgs84jc' } }
  24. 24. json ‚v”îáә߳̋Ó¡− ò&©¤ô¹¾ w°v−” əߕ‾©– ̃ oqÜÕ˳¢ß—|¤ #画像をミニファイするメソッド minify = -> file = queue.shift() unless file _end() return steps = [ -> _exec "./tools/bin/lightpng #{file} -32i #{file}",()-> _next steps.shift() ,-> _next minify ] _next steps.shift()
  25. 25. o«o«>ø Ïþ è§v¶z–Ø ßÕô•«( ̃¡−øq•¶ß—|¤ Ł ¤|Ł ¤|
  26. 26. t” ̃¬³›–o−ö ÔÂËç»o—” ̃¬2fi íÁîÁØ—“—“Ä́|–−^ÌÜÕËØ g|–o ›–o− Šøa»q<c”Þߊ•¶© •¶−̋∙xo–z−Û î
  27. 27. GRUNTRR”o¬o¬
  28. 28. GRUNT-CONTRIB Й”ö ̾ j ̃©ıł•Ønpm•u ©¤ÜÕËw1000ıö https://github.com/gruntjs/grunt-contrib
  29. 29. GRUNT-INIT grunt³³›¤ö ÔÂË甿¶=³ä ö ßçvœ¢ {¡−âß ÑvœŠ) ÁŁ−þ »̃©³³q Û https://github.com/gruntjs/grunt-init
  30. 30. YEOMAN grunt bower¶∙³ áö|¤ô ߊ ßË Ïþ èÑo ŽÝ ¶JS¼ö ”ö{w|öw− Ufl“¦∙YEOMAN way•pqÈowm− ZZö{•| ¤oþ »q‘oþ wIovØ http://yeoman.io/
  31. 31. — Ł
  32. 32. ß<»»o—|¤ÍÓ ÕË öç»|ÄÎ Š) ÑvœC ̈z” »¶z ìÚ•H”<ẅo¤Ï ßè³Ó ÕË öçvœ̄́|¡̃ Ñ Øc− )”C”Ïßè³ |¤” œ∼앶−
  33. 33. GRUNT = ô çà èåùáð• ›–”|Ä
  34. 34. u°ß’∼÷mßw q’‘o—|¤

×