gumistudy#15 How to Automate Tasks grunt.jsを使ったタスク自動化
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 1,790 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,790
On Slideshare
1,241
From Embeds
549
Number of Embeds
4

Actions

Shares
Downloads
5
Comments
0
Likes
1

Embeds 549

http://d.hatena.ne.jp 520
http://cloud.feedly.com 27
http://rss.ameba.jp 1
http://feedly.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. u—s‚øtKtÑ @_kenichirow ÷™¶&gumi ô çà èà Ôê¼ °ì: HTML,SCSS,CoffeeScript °ì? : ¤—•«ł› “¦Python EÛ? : ^ŠClojure Oµ − vim , git
  • 2. :Ÿ ¡̃^Š”ô çà èØoìŽ grunt » gumi »grunt³ t∙q³›–−v ^Š”gruntRRìŽ̋v
  • 3. ox¶ß ¡w^Š”ôçà èØo»fiœo
  • 4. )åa qk aweb¼ö ÍßÓ ” áÞawÒ—œ¶o Backbone.js¶∙JS”MVCô ߊ ßË SMACSS¶∙&|oCSSŁSÊ 
  • 5. ŸÜ»Ã³o—zßÎv•Ufl“¦∙ Ðs−̃ Ø)s¤ ÞߊØo“ ^‘̃”ÈowìáË•
  • 6. .o«åÒ¾éß•Šo< ØÏþ è ¾ ³ −̀¶w)s¤ ÿÕØIo
  • 7. Šøa|—|łq1;a x−̃ »Šøa|–²žvœ o|¡ Ø› !”© O¶ )•ÓÂ
  • 8. GRUNT.JS
  • 9. GRUNT.JS Node.js ¢œ©¤¤ÜÕËŠøaâß Ruby”RakeºJava”Ant œ∼øq¶Ø” Ïþ è ¾ $ grunt + u ©¤ÜÕËù grunt.js $ grunt sass
  • 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. WHO USES GRUNT
  • 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. ¶þ”§Í̆›«Œ¦̃©compass³Ÿ •§z” N°œ ¶o... Î
  • 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. ¶þ”§Í ƒ©H”»Ã Ø Ø› »s shell Øoo oµ∼Œ... Î
  • 16. |zo 2013 •Ó ÕË öç̈x¤z¶o N¶DSL̈x¤z¶o XML»<7”̈z'∼Œ¶o
  • 17. GRUNTooø©5|µ“JS ÜÕËŠøa! ö ̾ n Vz1000ıö coffee+Ô !©”lodash 9c;»Ã›̌z Õç ¢ x−! ô¹¾ Nò³ç Èß•|– ²”ÜÕ˳̄́|¡” w–Øq ©¶o
  • 18. GUMI ”GRUNT
  • 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. ^Š¢›¤ÜÕË
  • 21. GRUNT-LIGHTPNG compass Šø¢{©−sprite«(»32bit”png ̃¡−âß »m−¦∙ À‚> ºß¤z¶o
  • 22. «(”ò&º g³{−|–Šø ̃¡© ...
  • 23. git ls-tree ýÔç 唫(”îáә߳<À gp³}=|–json•|–ZB $ git ls-tree -r HEAD { 'foobar1.png':{ 'hash' : 'e1456604d111dd4' }, 'foobar2.png':{ 'hash' : 'u12358fffgs84jc' } }
  • 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. o«o«>ø Ïþ è§v¶z–Ø ßÕô•«( ̃¡−øq•¶ß—|¤ Ł ¤|Ł ¤|
  • 26. t” ̃¬³›–o−ö ÔÂËç»o—” ̃¬2fi íÁîÁØ—“—“Ä́|–−^ÌÜÕËØ g|–o ›–o− Šøa»q<c”Þߊ•¶© •¶−̋∙xo–z−Û î
  • 27. GRUNTRR”o¬o¬
  • 28. GRUNT-CONTRIB Й”ö ̾ j ̃©ıł•Ønpm•u ©¤ÜÕËw1000ıö https://github.com/gruntjs/grunt-contrib
  • 29. GRUNT-INIT grunt³³›¤ö ÔÂË甿¶=³ä ö ßçvœ¢ {¡−âß ÑvœŠ) ÁŁ−þ »̃©³³q Û https://github.com/gruntjs/grunt-init
  • 30. YEOMAN grunt bower¶∙³ áö|¤ô ߊ ßË Ïþ èÑo ŽÝ ¶JS¼ö ”ö{w|öw− Ufl“¦∙YEOMAN way•pqÈowm− ZZö{•| ¤oþ »q‘oþ wIovØ http://yeoman.io/
  • 31. — Ł
  • 32. ß<»»o—|¤ÍÓ ÕË öç»|ÄÎ Š) ÑvœC ̈z” »¶z ìÚ•H”<ẅo¤Ï ßè³Ó ÕË öçvœ̄́|¡̃ Ñ Øc− )”C”Ïßè³ |¤” œ∼앶−
  • 33. GRUNT = ô çà èåùáð• ›–”|Ä
  • 34. u°ß’∼÷mßw q’‘o—|¤