$30 off During Our Annual Pro Sale. View Details »

Yeoman Grunt Bower

Yeoman Grunt Bower

Yeoman Grunt Bower talks in Nodefest 2013

Yosuke Furukawa
PRO

October 26, 2013
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

  1. Yeoman, Grunt, Bower
    13೥10݄26೔౔༵೔

    View Slide

  2. my prof
    @yosuke_furukawa
    Working At : DeNA Follow me!
    Blog : from scratch Github profile is here
    13೥10݄26೔౔༵೔

    View Slide

  3. My WORK
    creating web application framework
    support developers
    research & development
    13೥10݄26೔౔༵೔

    View Slide

  4. 13೥10݄26೔౔༵೔

    View Slide

  5. IS a collection of developer support tools.
    He has
    13೥10݄26೔౔༵೔

    View Slide

  6. ·͊ཁ͸৭ʑ΍ͬͯ͘ΕΔ͓ͬ͞Μɻ
    Ұ൪ඒຯ͍͠ػೳ͸ςϯϓϨΛ࡞ͬͯ͘ΕΔ͜ͱɻ
    13೥10݄26೔౔༵೔

    View Slide

  7. Yeomanͷ࢖͍ํ
    How to Use Yeoman
    13೥10݄26೔౔༵೔

    View Slide

  8. $ npm install yo -g
    $ yo
    DEMO
    13೥10݄26೔౔༵೔

    View Slide

  9. yeomanΛ࢖͏࣌ʹࢀߟʹͳΔࢿྉଟ਺
    13೥10݄26೔౔༵೔

    View Slide

  10. ๻ͷࢿྉ΋݁ߏ͘Θ͍͠ࢿྉ... ͷ͸ͣɻ
    13೥10݄26೔౔༵೔

    View Slide

  11. ͱ͍͏༁Ͱৄࡉ͸ׂѪ
    13೥10݄26೔౔༵೔

    View Slide

  12. Yeomanͷྑ͞͸࢖͏͜ͱʹ͋ΔͷͰ͸ͳ͘ɺ
    ࣗ෼ͰखܰʹgeneratorΛ࡞ΕΔͱ͜Ζʹ͋Δɻ
    13೥10݄26೔౔༵೔

    View Slide

  13. yeoman Ͱͷ generator ͷ࡞Γํ
    ຊ୊Ͱ͢ɻ
    13೥10݄26೔౔༵೔

    View Slide

  14. yo ίϚϯυΛཧղ͠Α͏
    yo ͬͯଧͭͱɺgenerator-.* ϑΥϧμΛ୳࢝͠ΊΔɻ
    DVSSFOU
    EJSFDUPSZ
    HMPCBM
    OPEF@NPEVMFT
    HFOFSBUPS
    QBDLBHFKTPO
    OPEF@NPEVMFT
    HFOFSBUPS
    QBDLBHFKTPO
    DVSSFOUEJSFDUPSZ͔
    HMPCBMͷHFOFSBUPSΛ
    ݕࡧ͢Δɻ
    ݟ͔ͭͬͨΒɺ
    Πϯετʔϧͨ͠
    HFOFSBUPSͱͯ͠
    ϦετΞοϓ͢Δɻ
    13೥10݄26೔౔༵೔

    View Slide

  15. ͳͷͰɺgeneratorΛ࡞Δ࣌͸
    ҎԼͷ༷ͳߏ੒Λ࡞͓ͬͯ͘ͱศརɻ
    global ΛԚ͞ͳ͍͠ɺgeneratorͷ࣮ߦɾ֬ೝ͕༰қ
    DVSSFOU
    EJSFDUPSZ
    HFOFSBUPS
    OPEF@NPEVMFT
    HFOFSBUPS
    QBDLBHFKTPO
    QBDLBHFKTPO
    OPEF@NPEVMFTͷԼʹ
    γϯϘϦοΫϦϯΫͰ
    HFOFSBUPSͷຊମΛ
    ෇͚͓ͯ͘
    13೥10݄26೔౔༵೔

    View Slide

  16. ͳͷͰɺgeneratorΛ࡞Δ࣌͸
    ҎԼͷ༷ͳߏ੒Λ࡞͓ͬͯ͘ͱศརɻ
    global ΛԚ͞ͳ͍͠ɺgeneratorͷ࣮ߦɾ֬ೝ͕༰қ
    DVSSFOU
    EJSFDUPSZ
    HFOFSBUPS
    OPEF@NPEVMFT
    HFOFSBUPS
    QBDLBHFKTPO
    QBDLBHFKTPO
    OPEF@NPEVMFTͷԼʹ
    γϯϘϦοΫϦϯΫͰ
    HFOFSBUPSͷຊମΛ
    ෇͚͓ͯ͘
    ๻ͷ੿࡞ɺ yeomania ͳΒ͜ͷߏ੒Λ
    CLIͰ؆୯ʹ࡞ͬͯ͘ΕΔɻ
    $ npm install yeomania -g
    $ yeomania create
    $ yeomania recreate
    13೥10݄26೔౔༵೔

    View Slide

  17. ࣮ࡍʹ࡞Δ࣌͸ generator-generator ͕ศརʂ
    13೥10݄26೔౔༵೔

    View Slide

  18. $ npm install generator-generator -g
    $ mkdir generator-
    $ cd generator-<_your_fav_name>
    $ yo generator
    13೥10݄26೔౔༵೔

    View Slide

  19. DEMO
    13೥10݄26೔౔༵೔

    View Slide

  20. ᵓᴷᴷ LICENSE
    ᵓᴷᴷ README.md
    ᵓᴷᴷ app
    ᴹ ᵓᴷᴷ index.js
    ᴹ ᵋᴷᴷ templates
    ᴹ ᵓᴷᴷ _bower.json
    ᴹ ᵓᴷᴷ _package.json
    ᴹ ᵓᴷᴷ editorconfig
    ᴹ ᵓᴷᴷ jshintrc
    ᴹ ᵋᴷᴷ travis.yml
    ᵓᴷᴷ node_modules
    ᵓᴷᴷ package.json
    ᵋᴷᴷ test
    ᵓᴷᴷ temp
    ᵓᴷᴷ test-creation.js
    ᵋᴷᴷ test-load.js
    generator-generator Λ࣮ߦ͢Δͱ
    ҎԼͷϑΥϧμߏ੒͕ಘΒΕΔɻ
    13೥10݄26೔౔༵೔

    View Slide

  21. ᵓᴷᴷ LICENSE
    ᵓᴷᴷ README.md
    ᵓᴷᴷ app
    ᴹ ᵓᴷᴷ index.js
    ᴹ ᵋᴷᴷ templates
    ᴹ ᵓᴷᴷ _bower.json
    ᴹ ᵓᴷᴷ _package.json
    ᴹ ᵓᴷᴷ editorconfig
    ᴹ ᵓᴷᴷ jshintrc
    ᴹ ᵋᴷᴷ travis.yml
    ᵓᴷᴷ node_modules
    ᵓᴷᴷ package.json
    ᵋᴷᴷ test
    ᵓᴷᴷ temp
    ᵓᴷᴷ test-creation.js
    ᵋᴷᴷ test-load.js
    generator-generator Λ࣮ߦ͢Δͱ
    ҎԼͷϑΥϧμߏ੒͕ಘΒΕΔɻ
    ͕͜͜ຊମ
    index.js͕generatorͷৼΔ෣͍ΛܾΊΔ෦෼
    templatesҎԼ͕࣮ࡍ഑ஔ͞ΕΔϑΝΠϧ܈ɻ
    13೥10݄26೔౔༵೔

    View Slide

  22. index.js
    generatorͷৼΔ෣͍ΛܾΊΔɺ͍Θ͹mainॲཧ
    ςϯϓϨʔτʹ৘ใΛຒΊࠐΈɺίϐʔ͢Δ
    ର࿩γΣϧ͔Βड͚औͬͨΦϓγϣϯΛॲཧ͢Δ
    ͱ͍ͬͨॲཧΛߦ͏ɻ
    13೥10݄26೔౔༵೔

    View Slide

  23. templates
    ഑෍͢ΔϑΝΠϧ܈
    ผʹ໊લ͸templates͡Όͳͯ͘΋͍͍ɻ
    13೥10݄26೔౔༵೔

    View Slide

  24. yeoman generator API঺հ
    • ͜Ε͚ͩ͸͓͍֮͑ͯͨํ͕͍͍
    generator Λ࡞Δ্Ͱศརͳ API TOP 5
    13೥10݄26೔౔༵೔

    View Slide

  25. actions api
    copy(src, dest) => fileΛsrc͔Βdestʹίϐʔ
    template(src, dest) => fileΛsrc͔Βdest΁ίϐʔͭ͠
    ͭɺςϯϓϨʔτΤϯδϯΛར༻ͯ͠஋ΛຒΊΔɻ
    directory(src, dest) => directoryΛsrc͔Βdestʹίϐʔ
    ※ଞʹ΋৭ʑ(࠷ۙͩͱbulkCopy͕௥Ճ͞Εͨ)
    "author": {
    "name": "<%= yourname %>",
    "email": "<%= email %>",
    "url": "<%= githubUrl %>"
    },
    13೥10݄26೔౔༵೔

    View Slide

  26. prompt api
    ର࿩γΣϧ͔Β஋Λड͚औΔAPI
    // ର࿩γΣϧͷઃఆΛهड़͢Δɻ
    var prompts = [
    {
    //ม਺໊
    name: 'yourname',
    // ϝοηʔδ
    message: 'What is your github name?',
    // σϑΥϧτ஋
    default: 'someuser',
    // ܯࠂϝοηʔδ
    warning: ''
    },
    ];
    // ର࿩γΣϧ͔Βड͚औͬͨ஋͸Լهͷ
    Α͏ʹͯ͠ར༻͢Δɻ
    var cb = this.async();
    this.prompt(prompts, function (props) {
    this.yourname = props.yourname;
    cb();
    }.bind(this));
    13೥10݄26೔౔༵೔

    View Slide

  27. install api
    ґଘϥΠϒϥϦΛΠϯετʔϧ͢ΔͨΊͷAPI
    installDependencies(option); Λར༻͢Δͱɺ
    package.jsonͱbower.jsonͷґଘϥΠϒϥϦΛશͯ
    installl͢Δɻ
    jsonʹهड़͞Ε͍ͯͳ͍΋ͷΛinstall͢Δ৔߹͸runInstall
    // installDependencies͸ԼهͷΑ͏ʹͯ͠ར༻͢Δɻ
    this.installDependencies({
    bower : true, // bower.jsonͷґଘϥΠϒϥϦΛinstall͢Δ͔Ͳ͏͔
    npm : true, // package.jsonͷґଘϥΠϒϥϦΛinstall͢Δ͔Ͳ͏͔
    skipinstall : false, // installΛskip͢Δ͔Ͳ͏͔
    callback : sometask // installޙʹॲཧ͢Δcallbackؔ਺
    });
    13೥10݄26೔౔༵೔

    View Slide

  28. spawn_command api
    ೚ҙͷίϚϯυΛ࣮ߦ͢ΔͨΊͷAPI
    ίϐʔͨ͠ޙʹcoffee => js ͷίϯύΠϧΛ͔͚Δ৔
    ߹΍bowerͷϑΥϧμߏ੒Λมߋ͍ͨ͠৔߹ʹར༻
    ͢Δ͜ͱ͕ଟ͍ɻ
    // spawnCommandͷ࢖͍ํ
    // gruntίϚϯυΛ࣮ߦͯ͠ɺbower:installΛݺͼग़͢ͳͲɻ
    this.spawnCommand('grunt', ['bower:install'])
    .on('exit', function (err) {
    if (err) console.log(err);
    });
    13೥10݄26೔౔༵೔

    View Slide

  29. yeoman api
    this.yeoman ϚδΠϊϕʔςΟϒɻ
    // yeomanͷ࢖͍ํ
    console.log(this.yeoman);
    13೥10݄26೔౔༵೔

    View Slide

  30. yeoman api
    this.yeoman ϚδΠϊϕʔςΟϒɻ
    // yeomanͷ࢖͍ํ
    console.log(this.yeoman);
    ͜ΕΛग़ͨ͢Ί͚ͩͷAPI!!
    13೥10݄26೔౔༵೔

    View Slide

  31. yo ·ͱΊ
    • templateΛग़ྗͯ͘͠ΕΔͨΊͷπʔϧ
    • ศརAPIଟ͠ɻ
    • ؆୯ʹgeneratorΛ࡞ΔͳΒyeomaniaೖ
    ΕΔͱ͍͍Α
    13೥10݄26೔౔༵೔

    View Slide

  32. ஌͓͍ͬͯͨํ͕͍͍Bower࠷৽ࣄ৘
    13೥10݄26೔౔༵೔

    View Slide

  33. ೔ຊͰҰ൪bowerʹৄ͍͠هࣄ
    13೥10݄26೔౔༵೔

    View Slide

  34. Bower 1.0.x ~ 1.2.x
    • bower home Ͱpackageͷ
    home page͕։͘Α͏ʹͳͬͨɻ
    • bower cache-clean ͔Β bower cache cleanʹɻ
    • bower prune ͰґଘϥΠϒϥϦ΋ؚΊͯશͯ
    ͷϥΠϒϥϦ͕uninstall͞ΕΔɻ
    • bower cache listͰcacheͷϦετ͕ݟΕΔɻ
    13೥10݄26೔౔༵೔

    View Slide

  35. Bower 1.0.x ~ 1.2.x
    • release candidateͷҙຯͰ 1.2.0-rc1Έ͍ͨʹ෇
    ͚ΒΕ͍ͯΔ৔߹ɺσϑΥϧτͰ͸ͦͷόʔ
    δϣϯ͸Πϯετʔϧ͞Εͳ͘ͳͬͨɻ
    see issue #782
    • install࣌ʹprogress͕ग़ΔΑ͏ʹͳͬͨɻ
    • more faster!!!!
    13೥10݄26೔౔༵೔

    View Slide

  36. ஌͓͍ͬͯͨํ͕͍͍Grunt Tips
    13೥10݄26೔౔༵೔

    View Slide

  37. Grunt Λ front-end͚ͩͷπʔϧͱͯ͠࢖Θͳ͍
    13೥10݄26೔౔༵೔

    View Slide

  38. Grunt͸λεΫϥϯφʔɻ
    pluginʹଟ͍ͷ͸ϑϩϯτΤϯυλεΫ͹͔Γ͚ͩͲɺ
    αʔόʔαΠυͷλεΫʹ΋࢖͏ͱḿΔɻ
    13೥10݄26೔౔༵೔

    View Slide

  39. ࠓΛͱ͖Ί͘DeNA੡ altJS JSXΛ
    αʔόʔαΠυͰ΋࢖ͬͯΔɻ
    13೥10݄26೔౔༵೔

    View Slide

  40. Ͱ΋ϑΝΠϧॻ͖׵͑ͨΒίϯύΠϧ͠௚͢ͷ໘౗ɻ
    grunt-watch Ͱ watch͠ͳ͕Β jsxϑΝΠϧ͕มߋ͞ΕͨΒ
    JSX ίϯύΠϧ => αʔόʔىಈ
    ͦͯ͠ livereload ·Ͱ΍Γ͍ͨ!!
    13೥10݄26೔౔༵೔

    View Slide

  41. grunt-jsx
    jsxΛίϯύΠϧͯ͘͠ΕΔgruntϥούʔ
    13೥10݄26೔౔༵೔

    View Slide

  42. αʔόʔ࠶ىಈͷλεΫΛ࡞͓ͬͯ͘ͱḿΔ
    server = grunt.util.spawn({
    cmd: "node",
    args: ["main.jsx.js"]
    }, function(){});
    13೥10݄26೔౔༵೔

    View Slide

  43. DEMO
    13೥10݄26೔౔༵೔

    View Slide

  44. DeNAͰͲͷఔ౓࢖͍ͬͯΔ͔
    13೥10݄26೔౔༵೔

    View Slide

  45. Grunt͸݁ߏ࢖ͬͯΔϓϩμΫτଟ
    Bower͸݁ߏ࢖ͬͯΔϓϩμΫτগ
    Yeoman͸݁ߏ࢖ͬͯΔϓϩμΫτແ
    ଟ෼Yeomanͷ࡞Γํ͕ਁಁ͖ͬͯ͠ͳ͍;_;
    13೥10݄26೔౔༵೔

    View Slide

  46. ·ͱΊ
    13೥10݄26೔౔༵೔

    View Slide

  47. yeoman generatorͷ࡞Γํ
    Bower ࠷৽ࣄ৘
    Grunt Tips
    generator Λ࡞ΕΔਓ͕΋ͬͱ૿͑Δͱ
    օָ͕ʹͳͬͯخ͍͠ɻ
    13೥10݄26೔౔༵೔

    View Slide