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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 1,367 views
Published

 

  • 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,367
On SlideShare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
5
Comments
0
Likes
1

Embeds 0

No embeds

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—|¤