Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sublime Text and Grunt for Titanium Development

Koji Ishimoto
January 25, 2013

Sublime Text and Grunt for Titanium Development

grunt-scandium, sublime text2, build tool

Koji Ishimoto

January 25, 2013
Tweet

More Decks by Koji Ishimoto

Other Decks in Design

Transcript

  1. HSVOUTDBOEJVN
    4VCMJNF5FYUBOE(SVOU
    GPS5JUBOJVN%FWFMPQNFOU
    "NFCB)FBERVBSUFST$PNNVOJUZ%JWJTJPO
    8FC%FWFMPQFS,PKJ*TIJNPUP
    !5JUBOJVN.PCJMF6TFS(SPVQ+BQBO

    View full-size slide

  2. agenda
    - Introduction
    - Sublime Text 2
    - Grunt Plugin
    - Conclusion

    View full-size slide

  3. Free $3.99
    tissa
    Nyars
    powered by Titanium Mobile

    View full-size slide

  4. v1.6
    2 years ago...

    View full-size slide

  5. Passed a long time...

    View full-size slide

  6. 2012.06.01
    Joined!

    View full-size slide

  7. I want to be a Web developer!

    View full-size slide

  8. 8PSLPO5JUBOJVN FBSOFTUMZ
    XIFOSFMFBTFEW
    Koji Ishimoto @t32k 5, Dec, 2012

    View full-size slide

  9. 2012.12.14 Released!

    View full-size slide

  10. 0I
    Koji Ishimoto @t32k 16, Dec, 2012

    View full-size slide

  11. Application
    Development
    Environment

    View full-size slide

  12. sass compass less stylus markdown haml
    jade co eescript Ant make rake cake
    bash Image compression tools
    Minification & concat tooling JSHint
    JSLint codekit livereload web-build
    handlebars mustache zen coding
    selenium browserstack mogotest require
    sprockets jQuery Mobile Sencha jQuery
    UI Sproutcore Selenium Jenkins QUnit
    Jasmine jstestdriver
    from: Talk: Tooling & The Webapp Development Stack « Paul Irish

    View full-size slide

  13. Text Editor Build Tool

    View full-size slide

  14. www.sublimetext.com

    View full-size slide

  15. Build Tool
    - Live Reload
    - Local Server
    - Sass + Compass
    - Minify CSS
    - Minify JavaScript
    - Concat
    - Lint
    - Watch
    - Styleguide

    View full-size slide

  16. Sublime Text 2 Grunt

    View full-size slide

  17. No More TiStudio

    View full-size slide

  18. Sublime Text 2

    View full-size slide

  19. Code Completion

    View full-size slide

  20. unbounded.io/post/titanium-mobile-develpoment-with-sublime-text-2-and

    View full-size slide

  21. github.com/Kronuz/SublimeCodeIntel

    View full-size slide

  22. github.com/navinpeiris/jsca2js

    View full-size slide

  23. g
    // your home directory
    // ~/.codeintel/config
    {
    "JavaScript": {
    "javascriptExtraPaths":["add_your_path_here"]
    }
    }

    View full-size slide

  24. Grunt Plugin

    View full-size slide

  25. Build Command

    View full-size slide

  26. Ti Command-Line Interface
    The Titanium Command-Line Interface (CLI) is a
    Node.js-based command-line tool for managing,
    building, and deploying Titanium projects. It is
    designed to replace the legacy Python CLI scripts
    used in previous releases, including titanium.py and
    the platform-specific builder.py scripts.
    Titanium Command-Line Interface Reference - Titanium 3.0

    View full-size slide

  27. grunt-scandium
    is is a "half-baked" grunt plugin
    for titanium command line.

    View full-size slide

  28. Sc
    Atomic No.21

    View full-size slide

  29. Ti
    Atomic No.22

    View full-size slide

  30. This is half-baked plugin.

    View full-size slide

  31. npmjs.org/package/grunt-scandium

    View full-size slide

  32. $ brew install node
    $ npm install -g titanium
    $ npm install -g grunt-cli
    $ cd /your_porject_path
    $ npm install [email protected]

    View full-size slide

  33. $ npm install grunt-scandium

    View full-size slide

  34. docs.appcelerator.com/guide/Titanium_Command-Line_Interface_Reference

    View full-size slide

  35. Many Build Options

    View full-size slide

  36. scandium: {
    iphone: {
    platform : 'ios',
    project_dir : '/path/to/your_project',
    force: true,
    build_only: false,
    options: {
    device_family: 'iphone',
    sim_version: '6.0'
    }
    },
    ipad: {
    platform : 'ios',
    project_dir : '/path/to/your_project',
    force: false,
    build_only: false,
    options: {
    device_family: 'ipad',
    sim_version: '5.1'
    }
    },
    android: {
    platform : 'android',
    project_dir : '/path/to/your_project',
    options: {
    android_sdk: '/path/to/android-sdk',
    target: 'emulator',
    avd_skin: 'HVGA'
    }
    }
    }

    View full-size slide

  37. /PUIJOH4IVUVQUIFGLVQ
    BOETPNFXSJUFDPEF
    Koji Ishimoto @t32k 25, Jan, 2013

    View full-size slide

  38. Thank you!
    t32k
    @kojiISHIMOTO

    View full-size slide

  39. photo credit
    - http://www.flickr.com/photos/expose_switch/4566783151/
    - http://www.flickr.com/photos/andrec/4045953008/
    - http://www.flickr.com/photos/masuidrive/5993855065/
    - http://www.flickr.com/photos/spiderdog/4639124989/
    - http://www.flickr.com/photos/incanusjapan/4356332478/
    - http://en.wikipedia.org/wiki/Scandium
    - http://en.wikipedia.org/wiki/Titanium

    View full-size slide