Sublime Text and Grunt for Titanium Development

grunt-scandium, sublime text2, build tool

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 grunt@0.4.0rc7
    

    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