Introduction to Grunt

Introduction to Grunt

勤務先のデザイナー向けに Grunt の紹介をした時の資料です。設定のオブジェクトのことをいろいろ書いてるけど、それどころじゃない雰囲気だったので全部スルーしてしまった・・・。

Ca0ab6e450f894e06652ee257df9d647?s=128

Shuhei Kagawa

July 31, 2014
Tweet

Transcript

  1. 2.

    I was surprised to find that 80-90% of the time

    spent by users waiting for pages to load is spent on the frontend, all the work that needs to be done after the HTML document has arrived. ! —Steve Souders (2007). High Performance Web Sites
  2. 3.

    +4 $44ך 穠さ٥剑㼭⻉ 歗⫷ 47(ך ؟؎ؤ⵴幾 4BTT  $PFF4DSJQUך ؝ٝػ؎ٕ

    +4 $44 )5.- ךثؑحؙ Ꟛ涪欽؟٦غ٦ ך饯⹛ +BWB4DSJQUך 荈⹛ذأز أة؎ٕؖ؎س ך⡲䧭 זוזו ؿٗٝزؒٝسדװ׶׋ְֿהכ 㟓ִ׷♧倯٥٥٥
  3. 4.

    $ python -m SimpleHTTPServer $ uglify foo.js bar.js -o out.js

    $ cssmin foo.css > foo.min.css $ imagemin foo.png > foo.min.png $ svgmin foo.svg > foo.min.svg $ jshint foo.js $ jscs foo.js $ csslint foo.css $ compass …
  4. 5.
  5. 8.

    Ⱅ䒭فؚٓ؎ٝgrunt-contrib-* ؿ؋؎ٕ乼⡲   DMFBO DPQZ DPODBU TZNMJOL ؝٦سثؑحؙ 

    KTIJOU DTTMJOU Ꟛ涪佄䴂    XBUDI DPOOFDU MJWFSFMPBE 㖇簭      VHMJGZ DTTNJO JNBHFNJO IUNMNJO         SFRVJSFKT DPNQSFTT "MU999     MFTT DPFF DPNQBTT TBTT TUZMVT ذٝفٖ٦ز   KBEF IBOEMFCBST KTU +4⽃⡤ذأز   RVOJU OPEFVOJU KBTNJOF سًُؗٝز欰䧭 ZVJEPD
  6. 9.
  7. 10.
  8. 13.

    ˖ /PEFךٌآُ٦ٕ盖椚ءأذيկ ˖ /PEFד⢪ֲفؚٗٓيך鿇ㅷٌآُ٦ٕ׾؎ٝأز٦ ٕׅ׷ֿהָדֹ׷կ ˖ (SVOU劤⡤׮ぐ珏(SVOUفؚٓ؎ٝ׮OQNٌآُ٦ٕה׃ ג盖椚ׁ׸גְ׷կ ˖ (SVOUفؚٓ؎ָٝⵃ欽ׅ׷خ٦ٕ荈⡤׮OQNךٌآُ٦

    ٕד֮׷ֿהָ㢳ְկKTIJOUװDTTMJOUזוկ ˖ ֿך㜥さכծخ٦ٕ荈⡤׮(SVOUفؚٓ؎ٝה♧筰ח؎ ٝأز٦ٕדֹ׷կ ˖ $PNQBTTכ3VCZ醡זךדծOQNٌآُ٦ٕדכזְկ
  9. 14.

    Installation on Windows ˖ ✲⵸ח؎ٝأز٦ٕ ˖ /PEFY ˖ ِ٦ؠ橆㞮㢌侧ך1"5)ח %USERPROFILE%\AppData\Roaming\npm׾鷄

    ⸇ׅ׷ֿה ˖ 3VCZY $PNQBTT⢪ֲ㜥さ  ˖ ؎ٝأز٦ٕ儗ח1"5)鷄⸇ׅ׷ؔفءّٝ׾ ثؑحؙׅ׷ֿה
  10. 15.

    Installation on Mac • $ brew update • $ brew

    install node ˖ ⡭酔ָ֮׸לOWNֶָׅׅ׭ $ curl https://raw.githubusercontent.com/creationix/nvm/ v0.12.2/install.sh | bash $ nvm install v0.10.29 $ nvm alias default 0.10.29 • $ brew install ruby ˖ ⡭酔ָ֮׸לSCFOWֶָׅׅ׭ $ brew install rbenv ruby-build $ rbenv install 2.1.2 $ rbenv global 2.1.2 $ rbenv rehash
  11. 16.

    grunt ίϚϯυͷΠϯετʔϧ $ npm install -g grunt-cli ! ⟃♴ך״ֲחז׸ל䧭⸆կ !

    $ grunt grunt-cli: The grunt command line interface. (v0.1.13) ! Fatal error: Unable to find local grunt.
  12. 18.

    package.json ͷ࡞੒ ת׆QBDLBHFKTPO׾⡲䧭կ $ npm init ! ٌآُ٦ٕ׾؎ٝأز٦ٕ׃אאծQBDLBHFKTPOך EFW%FQFOEFODJFTח鎸ꐮׅ׷կ荈ⴓד剅ֻ״׶嚂կ $

    npm install -save-dev grunt $ npm install -D grunt-contrib-connect ! فٗآؙؑزח鷿⚥ַ׵⿫⸇ׅ׷זוծQBDLBHFKTPOָׅדח דֹגְ׷㜥さכծ剅ַ׸גְ׷ٌآُ٦ٕ׾؎ٝأز٦ٕկ $ npm install
  13. 20.

    module.exports = function(grunt) { // Task, Target ͷઃఆ grunt.initConfig({ //

    Config Object }); ! // ϓϥάΠϯͷಡΈࠐΈʢϓϥάΠϯʹ͸ Task ͕ೖ͍ͬͯΔʣ grunt.loadNpmTasks(‘plugin1’); grunt.loadNpmTasks(‘plugin2’); ! // ಠࣗλεΫͷొ࿥ʢϓϥάΠϯʹೖ͍ͬͯΔλεΫΛ૊Έ߹Θͤ Δʣ grunt.registerTask(‘sometask’, [‘task1:target1’, task2:target2’]); grunt.registerTask(‘default’, [‘sometask’]); };
  14. 21.

    珏겲ך5BTL "MJBT5BTL 醱侧ך5BTL׾♧אחתה׭׷ךח⢪ֲկ HSVOUSFHJTUFS5BTL ˎCVJMEˏ <ˎDPODBUˏ ˎVHMJGZˏ ˎDTTNJOˏ>  HSVOUCVJMECVJME5BTL׾㹋遤

    ! .VMUJ5BTL 醱侧ך5BSHFU׾䭯אկ 㣐⼱ךفؚٓ؎ָٝ欽䠐ׅ׷5BTLכֿ׸կ HSVOUGPPCBSGPP5BTLךCBS5BSHFU׾㹋遤 HSVOUGPPGPP5BTLךⰋ5BSHFU׾㹋遤 ! #BTJD5BTL #BTJDזךחծ֮ת׶⢪׻׸זְկ 荈ⴓד⟣䠐ךةأؙ׾鷄⸇ׅ׷ꥷח⢪ֲה葺ְַ׮կ
  15. 22.

    Config Multi Task Target options options files Target options files

    Multi Task Target options options files Target options files Target ڞ௨ Target ݻ༗
  16. 23.

    grunt.initConfig({ concat: { options: { separator: ';' }, js: {

    src: ['src/**/*.js'], dest: ‘dist/grunt-helloworld.js’ } } }); Task Target
  17. 24.

    ؿ؋؎ٕػأ 5BSHFUחכⳢ椚׃׋ְؿ؋؎ٕךؿ؋؎ٕػأ׾䭷㹀կ TSD EFTU MFT MUFS瘝ծ剅ֹ倯כְ׹ְ׹֮׷կ ת׆כTSD EFTUך剅ֹ倯ָ׻ַ׶װְׅךדֶׅׅ׭կ ؿ؋؎ٕ׾⳿⸂׃זְ5BTLחכEFTUכ䗳銲זְկ KTIJOUזוկ

    ! PQUJPOT ؿ؋؎ٕػأך➭ծPQUJPOTח׉ך5BTL㔿剣ךؔفءّ ٝ׾䭷㹀կ 5BSHFUח䭷㹀ׅ׷הծ׉ך5BSHFU׌ֽկ 5BTLח䭷㹀ׅ׷הծ5BSHFUⰟ鸐ד黝欽ׁ׸׷կ ⚕倯דずׄ갪湡ָ䭷㹀ׁ׸גְ׋׵5BSHFUך倯ָ⮚⯓կ
  18. 25.

    grunt.initConfig({ concat: { options: { separator: ';' }, js: {

    src: ['src/**/*.js'], dest: ‘dist/grunt-helloworld.js’ } } }); Options Files
  19. 35.

    grunt-spritesmith 歗⫷ַ׵$444QSJUF欽$44׾欰䧭կ鏣㹀ָ暴婊דPQUJPOT׾ ⢪׻זְկ$PNQBTTה嫰ץג歗⫷ך⚛ץ倯׾厫鮾ח寸׭׵׸ ׷׵׃ְկ ! spritesmith: { all: { src:

    ‘src/img/sprites/*.png’, destImg: ‘dist/img/spritesheet.png’, destCSS: ‘dist/css/sprites.css’, algorithm: ‘alt-diagonal’ } }
  20. 37.