yaakaito.org

最近TypeScript書くときに使うGrunt+Testem+αのテンプレ

Grunt, Testem, Testing, TypeScript

こんにちは!うきょーです! TypeScript0.9のpreviewがリリースされましたね!最近はもうJavaScriptもCoffeeScriptも自発的には書ていないです。 仕事とかでも結構TypeScriptでプロト作っては捨て、みたいなことをやってるんですが、 そうしてるうちにプロジェクトのテンプレ大体決まってきたなーという感じがしたのでまとめた。

typescript-proj

搭載しているもの

  • Gruntのカスタムタスク
  • Testem Mocha+chai でのテスト環境
  • jQuery.d.ts 1.9
  • .gitignoreとか.gitattributes
  • package.jsonとcomponents.json入り

中核はGrunt+Testem+Bowerな感じ。yoでよくね感すごい。

使い方

完全に個人用にまとめてるだけなので、cloneして.git消して使ってる。

1
2
$ git clone https://github.com/yaakaito/typescript-proj.git proj
$ rm -rf proj/.git

npmとbowerを使ってるので、とりあえずテンプレ分を取ってくる

1
2
$ npm install
$ bower install

プロジェクト構成

セットアップしてから、とりあえず grunt generate するとこんな感じになる。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
tree -L 2 --dirsfirst
.
├── build
│   ├── index.js
│   └── index.min.js
├── compiled
│   ├── src
│   └── test
├── components
│   └── jquery
├── d.ts
│   ├── chai.d.ts
│   ├── jquery.d.ts
│   └── mocha.d.ts
├── node_modules
│   ├── grunt
│   ├── grunt-contrib-clean
│   ├── grunt-contrib-concat
│   ├── grunt-contrib-connect
│   ├── grunt-contrib-copy
│   ├── grunt-contrib-uglify
│   ├── grunt-regarde
│   └── grunt-typescript
├── public
│   ├── javascript
│   └── index.html
├── res
│   └── index.html
├── src
│   └── index.ts
├── test
│   └── index.ts
├── Gruntfile.coffee
├── README.md
├── component.json
├── package.json
└── testem.json

上から説明していくと

build

連結済み + minify済みのJSが置かれるところ。 これはリリースの配布にも使うことを前提にしているので、gitignoreはされてない。

compiled

単純にコンパイルした状態のJSが置かれるところ。 中間ファイルみたいなものなので、gitignoreの対象。

components

bowerで入るモジュール。gitginore。

d.ts

TypeScript用のd.tsを置くところ。コードとほぼ同じ扱い。 微妙に違うけど、vendorみたいなもの。ドットは好みだと思うのでご自由に。

デフォルトでは jQueryと mocha、chaiを入れてある。 jQueryはまあなんだかんだで使う(使わされる)のでデフォで入れてある感じ。 mochaとchaiはテスト用、testemはそこまでは面倒みてくれないので自分で置く。

d.tsの追加は僕はtsdpmから探してtsdで取ってきて適当に配置してる。

node_modules

npm。主にgrunt系がインストールされる。特に書く事ない。

public

プレビューモードでルートにするところ。gh-pagesとか作りたいときはここに入るように作るんだけど、index.htmlの元ファイルとかはresにある。

res

TypeScript以外のものを置くところ。上のindex.htmlとか、cssとか置いたりする。 compassとかをデフォルトで入れてないんだけど、作るならここに入れる事になると思う。

src

TypeScript、特に言う事ない。

test

テスト、特に言う事ない。

Gruntfile.coffee

Gruntの設定ファイル。詳しくは後で。

README.md

とりあえずデフォルトでテンプレートのREADME入れてる。

component.json package.json

bowerとnpm。特に言う事ない。

testem.json

Testemの設定ファイル。詳しくは後で。

Gruntのタスク

ビルド系は微妙に分かり難いんだけど、基本的にcompile build generateの3種類を定義して使ってる。 それにプラスしてpreviewというのを作っていて、配信サーバーを立てて、ファイル更新されたらビルドしなおす感じ。 LiveReloadとかはなくともよいかなーと思ってるので作ってない。

compile

単純にTypeScriptをコンパイルするだけ。src test 共にコンパイルして compiled へ。 TypeScriptだとindex.tsだけコンパイルするようにして、index.tsで全部referenceでもいいと思うので使い分ける。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
typescript:
    compile:
        src: ['src/**/*.ts']
        dest: 'compiled'
        # src: ['src/index.ts']
        # dest: 'compiled/src/index.ts'
        options:
            module: 'commonjs'
            target: 'es5'
            # sourcemap: true
            # declaration: true
    test:
        src: ['test/**/*.ts']
        dest: 'compiled'
        options:
            module: 'commonjs'
            target: 'es5'


grunt.registerTask 'compile', ['typescript']

build

concat + uglifyでminify作ったりする。作ったのは build に入る。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
concat:
    dist:
        src: ['compiled/src/**/*.js']
        dest: 'build/index.js'
    options:
        separator: ';'

uglify:
    min:
        files:
            'build/index.min.js': ['build/index.js']
    ###
    options:
        mangle:
            expect: ['jQuery']
        sourceMap: 'build/source-map.js'
    ###

grunt.registerTask 'build', ['concat', 'uglify']

generete

publicを作る為のコマンド、用途に合わせて書き足していく。(インデントきもい)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
copy:
    public:
        files: [
                expand: true
                cwd: 'build'
                src: '**'
                dest: 'public/javascript'
            ,
                expand: true
                cwd: 'res'
                src: '**'
                dest: 'public/'
        ]

grunt.registerTask 'generate', ['compile', 'build', 'copy:public']

preview

connect + regarde。regardeでgenerateするようにしてる。

1
2
3
4
5
6
7
8
9
10
11
12
connect:
    preview:
        options:
            port: 9000
            base: 'public'

regarde:
    src:
        files: ['src/**/*.*']
        tasks: ['generate']

grunt.registerTask 'preview', ['generate', 'connect:preview', 'regarde']

Gruntfileは状況に合わせて柔軟に変えていく感じにしたいので、デフォルトは*指定が多め。

Testem

テストは最近は全部Testemでやってる。BusterJS派だったけど、BusterJSはちょっとトロい感じがする・・・。

1
2
3
4
5
6
7
8
9
10
11
12
{
    "framework" : "mocha+chai",
    "before_tests" : "grunt compile",
    "src_files" : [
        "src/**/*.ts",
        "test/**/*.ts"
    ],
    "serve_files" : [
        "compiled/src/**/*.js",
        "compiled/test/**/*.js"
    ]
}

基本は src test を監視して、あとはGruntに任せてる。

その他

適当にindex.tssrc test 共に吐いているので、忘れかけたら参考にするなどして書く。 .jsは最初からバイナリ扱いしているので安心してください!!!

まとめ

CoffeeScriptとかも大体同じ感じで出来ると思うので、それなりに汎用性ある感じだと思う。(やろうとしたけど書かない事に気づいてやってない) Gruntfileだけ個別にまとめたりもしてるので、適当に組み合わせるとよいのでは。