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 Slide

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

    View Slide

  3. @t32k

    View Slide

  4. Free $3.99
    tissa
    Nyars
    powered by Titanium Mobile

    View Slide

  5. v1.6
    2 years ago...

    View Slide

  6. Passed a long time...

    View Slide

  7. 2012.06.01
    Joined!

    View Slide

  8. I want to be a Web developer!

    View Slide

  9. View Slide

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

    View Slide

  11. 2012.12.14 Released!

    View Slide

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

    View Slide

  13. Application
    Development
    Environment

    View Slide

  14. 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 Slide

  15. Text Editor Build Tool

    View Slide

  16. www.sublimetext.com

    View Slide

  17. gruntjs.com

    View Slide

  18. View Slide

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

    View Slide

  20. Sublime Text 2 Grunt

    View Slide

  21. No More TiStudio

    View Slide

  22. Sublime Text 2

    View Slide

  23. Code Completion

    View Slide

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

    View Slide

  25. github.com/Kronuz/SublimeCodeIntel

    View Slide

  26. github.com/navinpeiris/jsca2js

    View Slide

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

    View Slide

  28. Demo

    View Slide

  29. Grunt Plugin

    View Slide

  30. Build Command

    View Slide

  31. 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 Slide

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

    View Slide

  33. Say What?

    View Slide

  34. Sc
    Atomic No.21

    View Slide

  35. Ti
    Atomic No.22

    View Slide

  36. This is half-baked plugin.

    View Slide

  37. npmjs.org/package/grunt-scandium

    View Slide

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

    View Slide

  39. $ npm install grunt-scandium

    View Slide

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

    View Slide

  41. Many Build Options

    View Slide

  42. 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 Slide

  43. Demo

    View Slide

  44. Conclusion

    View Slide

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

    View Slide

  46. Thank you!
    t32k
    @kojiISHIMOTO

    View Slide

  47. 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 Slide