なんかできたよー。

Web系Tipsを適当につづるBlog.

Titanium Mobile 開発環境サンプル TiShadow / Grunt

 

さいしょに

TiShadow / Grunt用の「package.json」と「Gruntfile.coffee」です。
※ 他にサンプル見たこと無いのでこれでいいのか不明。 ( ºΔº ) 誰かオシエテクダサイ

  1. TiShadowの導入
  2. Gruntの導入

を事前に済ませておく必要有り。

なにが出来る?

  1. 「coffee」フォルダ内の「*.coffee」ファイルを監視して変更があれば ↓
    1. 「Resources」フォルダ内に「*.js」でコンパイル
    2. 「Resources/spec」内に「*_spec.js」があれば → テストを実行
  2. 任意のタイミング(tishadow run)で接続しているすべての実機にコードを反映する

 

ファイルの準備

  • package.json の作成
{
  "name": "tishadowjasmine",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-watch": "~0.4.4",
    "grunt-contrib-coffee": "~0.7.0",
    "grunt-tishadow": "~1.0.1"
  }
}

 

  • Gruntfile.coffee の作成
module.exports = (grunt)->
  grunt.initConfig
    pkg: grunt.file.readJSON 'package.json'
    watch:
      files: ['coffee/**/*.coffee']
      tasks: ['coffee', 'tishadow:test']
    coffee:
      compile:
        files: [
          expand: true
          cwd: 'coffee/'
          src: ['**/*.coffee']
          dest: 'Resources/'
          ext: '.js'
        ]
    tishadow:
      test:
        command: 'spec'


  grunt.loadNpmTasks 'grunt-contrib-coffee'
  grunt.loadNpmTasks 'grunt-contrib-watch'
  grunt.loadNpmTasks 'grunt-tishadow'
  grunt.registerTask 'default', ['watch']
  return

 

モジュールのインストール

  • 「package.json」で指定しているモジュールをインストール
$ sudo npm install

 

フォルダを作成

  • 先にフォルダを作っておかないと「watch」に引っかからなかった…。
$ mkdir coffee
$ mkdir coffee/spec
$ mkdir coffee/module

 

実行してみる(随時起動)

  • ターミナル1)サーバーを立てる

※ 実機からもサーバーに接続しておく。

$ tishadow server

 

  • ターミナル2)「coffee」フォルダを監視する
$ grunt

 

実機に反映する(任意のタイミング)

  • ターミナル3)接続している端末にコードを反映する
$ tishadow run

 

サンプルファイル

  • 「coffee/app.coffee」の作成
$ =
  xxx: require '/module/sample_win'

SampleWin = new $.xxx.SampleWin 'title1', '#c00'
SampleWin.win.open()

 

  • 「coffee/module/sample_win.coffee」の作成
class SampleWin
  constructor: (@title = null, @bgcolor = '#fff')->
    @win = Ti.UI.createWindow()
    @win.title = @title
    @win.backgroundColor = @bgcolor

module.exports.SampleWin = SampleWin

 

テストファイル

  • 「coffee/spec/xxx_spec.coffee」の作成
$ =
  xxx: require '/module/sample_win'

describe "XXX", ->
  win = null
  beforeEach ->
    SampleWin = new $.xxx.SampleWin 'title1', '#c00'
    win = SampleWin.win
    return

  it "title", ->
    title = win.title
    expect(title).toEqual 'title1'
    return
  it "backgroundColor", ->
    bgcolor = win.backgroundColor
    expect(bgcolor).toEqual '#c00'
    return
  return

 

さいごに

とりあえず実装は出来たけど、TiShadowで開発中は常に実機を接続しておかないと上手く動作しないのでネット接続が必須になりそう。