GruntでTypeScriptとSass/Compassの面倒なコンパイルを自動化する

Grunt便利です! 最近のモダンなWeb開発環境はGruntでタスク管理するのがはやってるみたいですね。職場でもGruntの恩恵をがっつり受けています。

ここ1年半くらいはCSSもSass/Compassを導入していて、CSSをそのまま書くってこともすっかりなくなりました。JavaScriptも最近はTypeScriptで書いているのでそのままJavaScriptを書くということも減っていってます。

そんな感じですっかりTypeScriptとSass/Compassにどっぷりになってきたので面倒な手間をGruntで自動化するプロジェクトテンプレ的なものをつくってみました。

typeSC - This is TypeScript & Sass/Compass Project Template.

https://github.com/funnythingz/typeSC

Sass/Compassをインストール

Rubyが入っている前提ですすめていきます。

% gem install sass
% gem install compass

% gem list

*** LOCAL GEMS ***
compass (0.12.2)
sass (3.2.9)

% which sass
/usr/bin/sass

% which compass
/usr/bin/compass

こんな感じでインストール完了。

NodeJSをインストール

まずはNodeJSをインストールする。公式からインストーラーを落としてインストールする。 http://nodejs.org/

インストールできるとこんな感じになる。

% which node
/usr/local/bin/node

% node -v
v0.10.17

TypeScriptをインストール

nodeがインストールできたらTypeScriptをインストールする。

% sudo npm install -g typescript

% which tsc
/usr/local/bin/tsc

% tsc -v
Version 0.9.0.1

grunt-cliをインストール

次にgrunt-cliをインストールします。

% sudo npm install -g grunt-cli

typeSCを使う準備

githubのリポジトリからgit cloneします。 cloneしたらgrunt関連のファイルをインストールします。

% git clone https://github.com/funnythingz/typeSC.git
% cd typeSC
% npm install

エラーが出なければインストール完了です。

typeSCを使ってみる

typeSCのデフォルト設定では、各ソースファイルは下記のように管理します。

.ts ... src/**/*.ts
.scss ... src/sass/**/*.scss

コンパイル後は公開ディレクトリに下記のように書きだされます。 複数のtsファイルはコンパイル後、typesc.jsというひとつのJSファイルになります。さらに圧縮されたtypesc.min.jsも同時に書きだされます。

.js ... public/typesc.js, public/typesc.min.js
.css ... public/css/typesc.css

それではソースを書いてみます。 とりあえずSassはこんな感じで適当に。

sass/typesc.scss

@charset "utf-8";
@import "compass/css3";

@mixin medium {
  font-size: 14px;
}
@mixin small {
  font-size: 12px;
}

.cassette {
  display: block;
}

.item {
  @extend .cassette;
  @include medium;
}
.list {
  @extend .cassette;
  @include small;
}

TypeScriptを書いてみます。 typeSCのデフォルト設定ではsrcディレクトリにある複数のtsファイルはJSコンパイルの際に結合されるので、human.ts, name.ts, age.ts のように複数のtsファイルを書いてみました。

src/human.ts

/// <reference path="name.ts" />
/// <reference path="age.ts" />

 module TYPESC {

 export class Human {
   private name: Name<string>;
   private age: Age;

   constructor(first: string, last: string, age: number) {
     this.name = new Name(first, last);
     this.age = new Age(age);
   }

   public sayName(): Name<string> {
     return this.name;
   }

   public sayAge(): Age {
     return this.age;
   }
 }

 export class M extends Human {}
 export class F extends Human {}

}

src/name.ts

module TYPESC {

  export class Name<T> {
    public first: T;
    public last: T;

    constructor(first: T, last: T) {
      this.first = first;
      this.last = last;
    }
  }

}

src/age.ts

module TYPESC {

  export class Age {
    public count: number;

    constructor(count: number) {
      this.count = count;
    }
  }

}

書き終わったらいよいよコンパイルです。

gruntでコンパイルする

コマンドは下記の通りです。

コンパイル

% grunt

監視しながらリアルタイムでコンパイル

% grunt watch

webサーバーを起動します。http://localhost:8000 にアクセスするとpublicフォルダがみれます

% grunt server

それではコンパイルしてみましょう。

% grunt

Running &quot;typescript:base&quot; (typescript) task
3 files created. js: 3 files, map: 0 files, declaration: 0 files

Running &quot;concat:dist&quot; (concat) task
File &quot;public/typesc.js&quot; created.

Running &quot;uglify:build&quot; (uglify) task
File &quot;public/typesc.min.js&quot; created.

Running &quot;clean:0&quot; (clean) task
Cleaning src/age.js...OK
Cleaning src/human.js...OK
Cleaning src/name.js...OK

Running &quot;compass:dist&quot; (compass) task
directory public/css/
   create public/css/typesc.css (0.117s)
Compilation took 0.117s

Done, without errors.

こんな感じでコンパイルできたら成功です! コンパイルされたファイルはこんな感じであると思います。

public
├── css
│   └── typesc.css
├── index.html
├── typesc.js
└── typesc.min.js

こんな感じでSass/CompassもTypeScriptも面倒なコンパイルから開放されるのでさくさくと開発に集中できます。Gruntいいね!