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

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

on

  • 1,684 views

 

Statistics

Views

Total Views
1,684
Views on SlideShare
1,148
Embed Views
536

Actions

Likes
1
Downloads
5
Comments
0

4 Embeds 536

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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