捗るかもしれないフロントエンド開発環境

LiveReload
connect + proxy + easymock
testem
mocha + expect + sinon
assemble、foreman....
などを試してみた話です

Transcript

1. ḿΔ͔΋͠Εͳ͍ϑϩϯτΤϯυ։ൃ؀ڥ
   @koba04 (2012/10/21)
   13೥10݄23೔ਫ༵೔
   

   View Slide

2. ໨త
   • ͳΔ΂ࣗ͘ಈԽ
   • ςετΛॻ͘
   • αʔόʔͱϑϩϯτͷ։ൃΛૄ݁߹ʹ
   • ָ͘͠։ൃ
   13೥10݄23೔ਫ༵೔
   

   View Slide

3. ૝ఆ
   • Backbone.js + Handlebars΍Angular.jsΛ࢖ͬͯɺΫϥΠΞϯτଆͰDOMΛ૊
   Έཱ͍ͯͯ͘ΞϓϦΛ૝ఆ
   • αʔόʔଆ͸APIΛJSONͳͲͰฦ͚ͩ͢
   13೥10݄23೔ਫ༵೔
   

   View Slide

4. gruntͷpluginΛ࢖͏
   13೥10݄23೔ਫ༵೔
   

   View Slide

5. gruntͷϓϥάΠϯΛ࢖͏
   • Πϯετʔϧ͍ͨ͠ϓϥάΠϯΛnpm install xxx --save-dev ͢Δ
   • Gruntfile.coffee(js) ͷதͰgrunt.loadTasksͯ͠ϓϥάΠϯͷઃఆΛॻ͚ͩ͘
   % npm install grunt-contrib-coffee --save-dev
   % cat Gruntfile.coffee
   module.exports = (grunt) ->
   grunt.loadNpmTasks "grunt-contrib-coffee"
   grunt.initConfig
   coffee:
   compile:
   files: “public/js/app.js”: [
   “coffee/lib.coffee”
   “coffee/app.coffee”
   ]
   % grunt coffee
   13೥10݄23೔ਫ༵೔
   

   View Slide

6. livereload + watch + connectͰF5ΛࣗಈԽ
   13೥10݄23೔ਫ༵೔
   

   View Slide

7. LiveReloadͱ͸
   • ϑΝΠϧΛมߋͨ͠Βϒϥ΢βΛࣗಈతʹ࠶ಡΈࠐΈͯ͘͠ΕΔ
   LiveReload Server
   ϒϥ΢β֦ுΛ࢖͏͔ɺ
   LiveReload༻ͷScriptΛ
   ຒΊࠐΜͰ͓͘
   13೥10݄23೔ਫ༵೔
   

   View Slide

8. LiveReloadͱ͸
   • ϑΝΠϧΛมߋͨ͠Βϒϥ΢βΛࣗಈతʹ࠶ಡΈࠐΈͯ͘͠ΕΔ
   LiveReload Server
   ϒϥ΢β֦ுΛ࢖͏͔ɺ
   LiveReload༻ͷScriptΛ
   ຒΊࠐΜͰ͓͘
   ϑΝΠϧߋ৽
   13೥10݄23೔ਫ༵೔
   

   View Slide

9. LiveReloadͱ͸
   • ϑΝΠϧΛมߋͨ͠Βϒϥ΢βΛࣗಈతʹ࠶ಡΈࠐΈͯ͘͠ΕΔ
   ϑΝΠϧͷ؂ࢹͯ͠
   มߋ͕͋Ε͹௨஌ʂ LiveReload Server
   ϒϥ΢β֦ுΛ࢖͏͔ɺ
   LiveReload༻ͷScriptΛ
   ຒΊࠐΜͰ͓͘
   ϑΝΠϧߋ৽
   13೥10݄23೔ਫ༵೔
   

   View Slide

10. LiveReloadͱ͸
    • ϑΝΠϧΛมߋͨ͠Βϒϥ΢βΛࣗಈతʹ࠶ಡΈࠐΈͯ͘͠ΕΔ
    ϑΝΠϧͷ؂ࢹͯ͠
    มߋ͕͋Ε͹௨஌ʂ LiveReload Server
    ϒϥ΢β֦ுΛ࢖͏͔ɺ
    LiveReload༻ͷScriptΛ
    ຒΊࠐΜͰ͓͘
    ࠶ಡΈࠐΈ͢ΔΑ͏
    ϒϥ΢βʹ௨஌ʂ
    ϑΝΠϧߋ৽
    13೥10݄23೔ਫ༵೔
    

    View Slide

11. LiveReloadͱ͸
    • ϑΝΠϧΛมߋͨ͠Βϒϥ΢βΛࣗಈతʹ࠶ಡΈࠐΈͯ͘͠ΕΔ
    ϑΝΠϧͷ؂ࢹͯ͠
    มߋ͕͋Ε͹௨஌ʂ LiveReload Server
    ϒϥ΢β֦ுΛ࢖͏͔ɺ
    LiveReload༻ͷScriptΛ
    ຒΊࠐΜͰ͓͘
    ࠶ಡΈࠐΈ͢ΔΑ͏
    ϒϥ΢βʹ௨஌ʂ
    ࠶ಡΈࠐΈʂ
    ϑΝΠϧߋ৽
    13೥10݄23೔ਫ༵೔
    

    View Slide

12. ඞཁͳ΋ͷ
    • grunt-contrib-watch
    • ϑΝΠϧͷ؂ࢹͱLiveReload Server (tiny-lr)
    • grunt-contrib-connect
    • LiveReloadͷͨΊͷScriptΛHTMLʹຒΊࠐΜͰ഑৴ͯ͘͠ΕΔ
    13೥10݄23೔ਫ༵೔
    

    View Slide

13. grunt-contrib-watch
    • ؂ࢹ͢ΔϑΝΠϧͷઃఆͱLiveReloadͷ༗ޮԽ
    watch:
    options:
    livereload: true
    coffee:
    files: "coffee/**/*.coffee"
    tasks: ["coffee2js"]
    handlebars:
    files: "template/**/*.hbs"
    tasks: ["handlebars"]
    scss:
    files: "scss/**/*.scss"
    tasks: ["compass"]
    assemble:
    files: "assemble/**/*"
    tasks: ["assemble"]
    13೥10݄23೔ਫ༵೔
    

    View Slide

14. grunt-contrib-connect
    • ੩తϑΝΠϧ഑৴αʔόʔͷઃఆ
    connect:
    server:
    options:
    livereload: true
    port: 9000
    base: "public"
    13೥10݄23೔ਫ༵೔
    

    View Slide

15. connect + proxy + easymock Ͱ
    αʔόʔ͔Β੾Γ཭͢
    13೥10݄23೔ਫ༵೔
    

    View Slide

16. connect + proxy + easymock
    • connectͰαʔόʔΛཱͯͯɺproxyڬΜͰ೚ҙʹAPIΛࢦఆग़དྷΔΑ͏ʹͨ͠
    ΓɺmockͰఆٛͨ͠JSONฦ͢Α͏ʹ͢Δ
    • αʔόʔଆͷ։ൃͷ͜ͱΛؾʹͤͣɺAPIͷ࢓༷ΛܾΊ͓͚ͯ͹ϑϩϯτΤϯ
    υͷ։ൃΛਐΊΔ͜ͱ͕ग़དྷΔ
    • gruntͷΦϓγϣϯͰAPIͷ઀ଓઌΛࢦఆग़དྷΔΑ͏ʹ͓ͯ͘͜͠ͱͰɺAPIͱ
    ͷ݁߹ςετ΋؆୯ʹग़དྷΔ
    13೥10݄23೔ਫ༵೔
    

    View Slide

17. connect + proxy + easymock Ͱͷߏ੒
    HTTP /api/hoge
    proxy server
    A͞Μͷ։ൃ؀ڥ
    ઃఆʹΑͬͯ઀ଓઌΛ
    ม͑Δ
    stage؀ڥ
    easymockʹΑΔ
    mock؀ڥ
    ※Access-Control-Allow-Origin Headerͷઃఆ͕ඞཁ
    13೥10݄23೔ਫ༵೔
    

    View Slide

18. grunt-contrib-connect, grunt-connect-proxy
    • proxyͷઃఆ
    proxyHost = if grunt.option 'proxy_host' ? then grunt.option 'proxy_host' else null
    :
    connect:
    server:
    options:
    livereload: true
    port: 9000
    base: "public"
    middleware: (connect, options) ->
    [
    connect.static(options.base)
    require("grunt-connect-proxy/lib/utils").proxyRequest
    ]
    proxies: [
    context: [
    "/users/"
    "/items/"
    ]
    host: if proxyHost? then proxyHost else "localhost"
    port: if proxyHost? then 80 else 3000
    changeOrigin: true
    ]
    % grunt --proxy_host example.com
    ͷΑ͏ʹ઀ଓઌΛࢦఆग़དྷΔΑ͏ʹ
    13೥10݄23೔ਫ༵೔
    

    View Slide

19. easymock (npm install -g easymock)
    • JSONϑΝΠϧΛஔ͚ͩ͘Ͱ؆୯ʹAPIͷϞοΫΛ࡞Δ͜ͱ͕ग़དྷΔ
    • proxyઌͷαʔόʔ΋ࢦఆͰ͖ΔͷͰɺ࣮૷ग़དྷ͍ͯͳ͍API͚ͩϞοΫ͢Δ
    ͜ͱ΋Մೳ
    • APIͷυΩϡϝϯτϖʔδ΋࡞ͬͯ͘ΕΔͷͰ࢓༷ͱͯ͠΋࢖͑ͦ͏
    13೥10݄23೔ਫ༵೔
    

    View Slide

20. easymock (config.json)
    • config.jsonʹઃఆΛॻ͘
    {
    "proxy": {
    "server": "http://example.com",
    "calls": {
    "/items/": { "get": true }
    }
    },
    "routes": [
    "/users/:id"
    ]
    }
    proxy͍ͤͨ͞αʔόʔ͕͋Ε͹ઃఆ
    callsͰserverʹ౉͢ϦΫΤετΛఆٛ
    /user/1, user/2 ͷΑ͏ͳ
    ύεʹ஋͕෇͍ͯ͘ΔϧʔςΟϯάΛఆٛ
    13೥10݄23೔ਫ༵೔
    

    View Slide

21. easymock (response)
    • APIߏ଄ʹԊͬͨσΟϨΫτϦߏ଄Λ࡞Δ
    % tree
    .
    !"" users
    # $"" _get.json ← GET /users/ ʹର͢ΔϨεϙϯε
    # !"" id_get.json ← GET /users/:id ʹର͢ΔϨεϙϯε
    !"" ...
    % cat users/id_get.json
    {
    "id": #{id}, ← /user/:id ͷidΛม਺ͱͯ͠࢖༻Ͱ͖Δ
    "name": "Sasuke",
    "age": 15,
    "message": "I'm Ninja"
    }
    • ϨεϙϯεͷJSONΛ഑ஔ
    13೥10݄23೔ਫ༵೔
    

    View Slide

22. easymock (document)
    13೥10݄23೔ਫ༵೔
    

    View Slide

23. testem + phantomjs + browser Ͱշదςετ
    13೥10݄23೔ਫ༵೔
    

    View Slide

24. JavaScriptͷςετ
    • ༷ʑͳϨΠϠʔɺϥΠϒϥϦ͕͋ͬͯΑ͘Θ͔Βͳ͍...
    • TestRunner ... testem, karma
    • ࣮ߦ؀ڥ ... browser, phantomjs
    • Testing Framework ... mocha, Jasmine, Qunit
    • assertion library ... chai, expect, power assert
    13೥10݄23೔ਫ༵೔
    

    View Slide

25. JavaScriptͷςετ
    • ༷ʑͳϨΠϠʔɺϥΠϒϥϦ͕͋ͬͯΑ͘Θ͔Βͳ͍...
    • TestRunner ... testem, karma
    • ࣮ߦ؀ڥ ... browser, phantomjs
    • Testing Framework ... mocha, Jasmine, Qunit
    • assertion library ... chai, expect, power assert
    ͱΓ͋͑ͣ࢖ͬͯΈΔͱΘ͔ͬͯ͘ΔͷͰ
    testem + phantonjs & browser + mocha + expect
    Λࢼͯ͠ΈΔ
    13೥10݄23೔ਫ༵೔
    

    View Slide

26. testem
    • JavaScriptͷςετͷ࣮ߦΛ؅ཧͯ͘͠ΕΔ
    • ࣮ߦ͢Δϒϥ΢βͷࢦఆɺมߋΛ؂ࢹͯ͠ͷࣗಈ࣮ߦɺςετϑϨʔϜϫ
    ʔΫͷαϙʔτ
    13೥10݄23೔ਫ༵೔
    

    View Slide

27. grunt-contrib-testem
    • grunt-contrib-testemೖΕͯɺGruntfileॻ͚ͩ͘ͰOK
    testem:
    app:
    src: [
    "bower_components/expect/expect.js"
    "bower_components/sinon/index.js"
    "public/js/vendor.js"
    "public/js/template.js"
    "public/js/app.js"
    "spec/**/*_spec.coffee"
    ]
    options:
    test_page: "spec/runner.mustache"
    #parallel: 4
    launch_in_dev: ["PhantomJS", "Chrome", "Safari"]
    launch_in_ci: ["PhantomJS", "Firefox"]
    ϥΠϒϥϦɺΞϓϦͷίʔυɺςετΛࢦఆ
    ࣮ߦ͢Δϒϥ΢β
    ςετΛ࣮ߦ͢ΔHTML
    mustacheͰ΋OK
    13೥10݄23೔ਫ༵೔
    

    View Slide

28. grunt-contrib-testem(test_page)
    
    
    
    Test'em
    
    
    
    <br/>mocha.setup('bdd')<br/>
    
    
    
    
    
    
    
    
    {{#serve_files}}
    
    {{/serve_files}}
    <br/>mocha.run()<br/>
    
    
    testemʹؚ·Ε͍ͯΔmochaͷϑΝΠϧͱ
    testem.jsΛಡΈࠐΉ
    GruntfileͰsrcʹॻ͍͓͍ͯͨ
    ϑΝΠϧΛsrcࢦఆ
    mochaͰ࣮ߦ
    mochaͷsetup
    DOMͷ४උ
    13೥10݄23೔ਫ༵೔
    

    View Slide

29. mocha + expect + sinon Ͱָ͘͠ςετ
    13೥10݄23೔ਫ༵೔
    

    View Slide

30. mocha + expect + sinon Ͱςετ
    • mocha͸࠷௿ݶͷςετϑϨʔϜϫʔΫͳͷͰɺassertion library΍mockతͳ
    ΋ͷ͸ࣗ෼ͰબͿඞཁ͕͋Δ (Jasmine͸શ෦ೖͬͯΔ)
    • ࠓճassertͷछྨ͕ଟ͔ͬͨͷͰexpect.jsΛ࢖༻ɻpower-assert΋γϯϓϧͰ
    Θ͔Γ΍͍݁͢ՌΛग़ྗͯ͘͠ΕΔͷͰؾʹͳ͍ͬͯΔ
    • stubɺmockϥΠϒϥϦ͸sinon.jsΛ࢖༻
    • HTTP Request΍࣌ؒͷϞοΫɺ͜ͷؔ਺͕Ͳ͏͍͏Ҿ਺ͰԿճݺ͹Εͨͷ
    ͔(spy)ͳͲɺ୯ମςετʹ͸ඞਢ
    13೥10݄23೔ਫ༵೔
    

    View Slide

31. mochaͰͷςετ݁Ռͷग़ྗ (browser)
    • ςετ݁Ռ͕៉ྷʹग़ྗ͞ΕΔ͜ͱ͸ॏཁ
    13೥10݄23೔ਫ༵೔
    

    View Slide

32. mochaͰͷςετ
    describe("model.Base", ->
    describe "override Model.sync", ->
    user = null
    server = null
    User = myapp.model.Base.extend
    urlRoot: "/users/"
    initialize: (attrs) -> @setStorage "model:user:#{attrs.id}"
    before ->
    server = sinon.fakeServer.create()
    server.respondWith "GET", /\/users\//, [
    200, {}, JSON.stringify id: 1, name: "jim", age: 21
    ]
    after ->
    server.restore()
    beforeEach ->
    user = new User id: 1, name: "jim", age: 20
    it "set storage fetched data", ->
    spy = sinon.spy user.storage, 'set'
    user.fetch()
    server.respond()
    expect(spy.calledOnce).to.be.ok()
    expect(spy.args[0]).to.be.eql [
    id:1, name:"jim", age:21
    "read"
    ]
    spy.reset()
    )
    coffeescriptͰॻ͚Δ
    serverͷmock࡞ͬͯ
    GET /users/ʹର͢Δ
    ϨεϙϯεΛఆٛ
    before͸࠷ॳʹ1ճ
    after͸࠷ޙʹ1ճ
    (serverΛ໭ͯ͠Δ)
    beforeEach͸
    ຖճ࠷ॳʹ1ճ
    (afterEach΋͋Δ)
    spyͨؔ͠਺ͷ
    ঢ়ଶΛςετ
    13೥10݄23೔ਫ༵೔
    

    View Slide

33. Travis-CIͰ͞ΒͳΔຬ଍ײΛ
    13೥10݄23೔ਫ༵೔
    

    View Slide

34. Travis-CI
    • GitHubͰެ։ͯ͠ΔͳΒઃఆ͓ͯ͘͠΂͖ʢGreenʹͳΔ͜ͱͷຬ଍ײʣ
    • PhantomJSͱFirefoxͰςετ͕ग़དྷΔ
    13೥10݄23೔ਫ༵೔
    

    View Slide

35. Travis-CI
    • travis.yml
    language: node_js
    node_js:
    - "0.10"
    before_script:
    - npm install -g grunt-cli bower
    - bower install
    - "export DISPLAY=:99.0"
    - "sh -e /etc/init.d/xvfb start"
    FirefoxͰςετΛ͢ΔͨΊʹඞཁ
    • package.json
    • Gruntfile.coffee
    "scripts": {
    "test": "grunt testem:ci:app"
    },
    launch_in_ci: ["PhantomJS", "Firefox"]
    npm test Ͱ࣮ߦͰ͖ΔΑ͏ʹ͢Δ
    PhantomJSͱFIrefoxΛࢦఆ
    13೥10݄23೔ਫ༵೔
    

    View Slide

36. assembleͰޮ཰HTML؅ཧ
    13೥10݄23೔ਫ༵೔
    

    View Slide

37. assembleͱ͸ʁͦͯ͠࢖͏ཧ༝ʁ
    • assembleͱ͸ɺ੩తαΠτΛ࡞ΔͨΊͷgruntϓϥάΠϯɻ(like jekyll)
    • grunt-xxxxͰͳ͍͚ͲGruntͷϓϥάΠϯ
    • YAML(JSON)Λఆٛͨ͠΋ͷΛHandlebarsΛ࢖ͬͯHTMLʹు͖ग़͢͜ͱ͕ग़
    དྷΔ
    • ن໿ͱ͔ϔϧϓͱ͔ΛYAMLͰ؅ཧ͍ͨ͠
    • αʔόʔαΠυͷςϯϓϨʔτΤϯδϯΛ࢖Θͳ͍͚ͲɺimgɺjsɺcssͳͲΛ
    ຊ൪ͱ։ൃͰ෼͚ͨΓόʔδϣϯΛ෇Ճ͍ͨ͠
    13೥10݄23೔ਫ༵೔
    

    View Slide

38. assemble (Gruntfile)
    assemble:
    term:
    options:
    ext: ".hbs"
    data: "assemble/data/term.yaml"
    layout: "assemble/layout/term.hbs"
    files: [
    expand: true
    cwd: "assemble/template/term"
    src: "**/*.hbs"
    dest: "template/term"
    ]
    publicHTMLDevelop:
    options:
    product: false
    jsVersion: 1
    cssVersion: 1
    files: [
    src: "assemble/template/public_html/index.hbs"
    dest: "public/index.html"
    ]
    publicHTMLProduct:
    options:
    product: true
    jsVersion: 1
    cssVersion: 1
    staticHost: staticHost
    files: [
    src: "assemble/template/public_html/index.hbs"
    dest: "public/index.product.html"
    ]
    ن໿ΛYAMLΛݩʹlayout/term.hbsΛݩʹɺ
    term/ҎԼͷhbsϑΝΠϧΛ࢖ͬͯ࡞੒͠ɺ
    ͜͜Ͱ͸͞ΒʹhbsϑΝΠϧͱͯ͠࢖༻
    (BackboneͷςϯϓϨʔτͱͯ͠࢖͍͍ͨͨΊ)
    ຊ൪ͱ։ൃ༻ͷHTMLɻ
    productม਺ʹΑͬͯ
    index.hbs಺Ͱग़͠෼͚Δ
    13೥10݄23೔ਫ༵೔
    

    View Slide

39. assemble (public/index.html)
    
    
    
    
    backbone and handlebars sample
    
    
    
    {{#if product}}
    
    {{/if}}
    {{#unless product}}
    
    {{/unless}}
    
    
    :
    {{#if product}}
    
    
    
    {{/if}}
    {{#unless product}}
    
    
    
    {{/unless}}
    
    
    productม਺ʹΑͬͯ
    index.hbs಺Ͱग़͠෼͚Δ
    13೥10݄23೔ਫ༵೔
    

    View Slide

40. assemble (term)
    assemble/data/term.yaml
    term1:
    title: term1
    content: this is term1 content
    term2:
    title: term2
    content: this is term2 content
    assemble/layout/term.hbs
    
    
    {{> body}}
    
    assemble/template/term/term1.hbs
    {{term.term1.title}}
    {{term.term1.content}}
    assemble/template/term/term2.hbs
    {{term.term2.title}}
    {{term.term2.content}}
    template/term/term1.hbs
    
    
    term1
    this is term1 content
    
    template/term/term2.hbs
    
    
    term2
    this is term2 content
    
    YAMLܗࣜͷ
    σʔλ ϨΠΞ΢τ
    ςϯϓϨʔτ
    ֤ϖʔδͷ
    ςϯϓϨʔτ
    ੜ੒͞Εͨ
    ςϯϓϨʔτ
    13೥10݄23೔ਫ༵೔
    

    View Slide

41. foremanͰ·ͱΊͯϓϩηε؅ཧ
    13೥10݄23೔ਫ༵೔
    

    View Slide

42. foreman
    • ϓϩηε؅ཧͷRubyGems
    • easymockͱgruntΛ·ͱΊͯىಈ͢Δͷʹ࢖༻
    • gruntͷtaskͰ΋ग़དྷΔ͚Ͳɺޙʑ૿͑Δ͜ͱ΋ߟ͑Δͱforemanͷํָ͕
    • Procfileʹ࣮ߦίϚϯυॻ͚ͩ͘
    % cat Procfile
    grunt: grunt
    easymock: sh easymock.sh
    13೥10݄23೔ਫ༵೔
    

    View Slide

43. foreman
    13೥10݄23೔ਫ༵೔
    

    View Slide

44. grunt-notifyͰ௨஌
    13೥10݄23೔ਫ༵೔
    

    View Slide

45. grunt-notify
    • ۭؾͷΑ͏ʹcoffeeͱ͔scssͷίϯύΠϧͯ͘͠ΕΔ͚Ͳɺࣦഊͨ͠ͱ͖͸ڭ
    ͑ͯཉ͍͠
    • grunt-notifyΛ࢖ͬͯgrowl ͔௨஌ηϯλʔͰ௨஌͢Δ
    • Mac OS X 10.7ҎԼͷ৔߹͸ɺGrowl͚ͩͰͳ͘GrowlNotify΋Πϯετʔϧ͢
    Δඞཁ͕͋Δ
    • http://growl.info/downloads#generaldownloads
    • Mac OS X 10.8Ҏ্ͷ৔߹͸ɺ௨஌ηϯλʔͰ௨஌ͯ͘͠ΕΔͷͰԿ΋ඞཁͳ
    ͍
    13೥10݄23೔ਫ༵೔
    

    View Slide

46. ։ൃͷ༷ࢠ
    13೥10݄23೔ਫ༵೔
    

    View Slide

47. ։ൃͷ༷ࢠ
    gruntͱeasymock
    ͷ֬ೝ
    ςετ݁Ռ
    ͷ֬ೝ
    13೥10݄23೔ਫ༵೔
    

    View Slide

48. ։ൃͷ༷ࢠ
    gruntͱeasymock
    ͷ֬ೝ
    ςετ݁Ռ
    ͷ֬ೝ
    ίʔυΛॻ͍ͯΔ
    ͚ͩͰࣗಈ࣮ߦ͞Εͯ
    ݁ՌΛ֬ೝग़དྷΔʂ
    13೥10݄23೔ਫ༵೔
    

    View Slide

49. ͓·͚
    13೥10݄23೔ਫ༵೔
    

    View Slide

50. grunt-remove-logging
    • console.logΛফͯ͘͠ΕΔͷͰσόοά༻ʹΨϯΨϯconsole.logΛೖΕ͓ͯ
    ͚Δ
    • product༻ʹugilify͢Δલʹ࢖ͬͯΔ
    removelogging:
    product:
    src: "public/js/app.js"
    dest: "public/js/app.product.js"
    13೥10݄23೔ਫ༵೔
    

    View Slide

51. matchdep
    • grunt.loadNpmTasksΛશ෦͢Δͷ͕໘౗Ͱ࢖ͬͯΔ
    require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks)
    grunt.loadNpmTasks "assemble" # grunt-*ͳ໊લͰ͸ͳ͍ͷͰ....
    13೥10݄23೔ਫ༵೔
    

    View Slide

52. grunt-contrib-handlebarsͰCDNରԠ
    • processContentΛ࢖͏͜ͱͰɺίϯύΠϧ࣌ʹॲཧΛڬΊΔͷͰsrcଐੑͷ஋
    ΛFQDNʹஔ׵͢Δͱ͔ग़དྷΔ
    staticHost = "http://example.com"
    grunt.initConfig
    :
    :
    handlebars:
    options:
    processContent: (content) ->
    content.replace /src="(.*)?"/gm, "src=\"#{staticHost}$1\""
    13೥10݄23೔ਫ༵೔
    

    View Slide

53. ͓͠·͍
    https://github.com/koba04/backbone-boilerplate
    13೥10݄23೔ਫ༵೔
    

    View Slide