TypeScriptを使ってgulpでブックマークレット開発(BoW)

[gulp\-uglifyでJavaScriptを圧縮する \(CentOS 7\) \- Qiita](http://qiita.com/suzuki_sh/items/8db4bc91b9a46274c250) の応用です。

## 環境

せっかくMicrosoft TypeScriptを使うので、今回はBash on Ubuntu on Windows上で開発します。

```
$ cat /etc/lsb-release
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=14.04
DISTRIB_CODENAME=trusty
DISTRIB_DESCRIPTION="Ubuntu 14.04.4 LTS"
```

### Node.jsのインストール

Node.js公式の [パッケージマネージャを利用した Node\.js のインストール \| Node\.js](https://nodejs.org/ja/download/package-manager/#debian-and-ubuntu-based-linux-distributions-debian-ubuntu-linux) に沿って、Bash on Ubuntu on WindowsにNode.jsをインストールします。

```
$ curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
$ sudo apt-get install nodejs
$ sudo npm install -g typings
$ sudo npm install -g gulp-cli
```

```
$ node -v
v4.7.0
$ npm -v
2.15.11
```

## プロジェクト初期化

```
$ mkdir ts-test
$ cd ts-test
$ mkdir source
$ mkdir destination
```

各種npmパッケージ、gulpプラグイン、型定義情報ファイルをそれぞれ用意します。

```
$ echo '{}' > package.json
$ npm install gulp jquery typescript typings --save-dev
$ npm install gulp-typescript gulp-uglify gulp-replace --save-dev
$ typings install dt~jquery --name jquery --save --global
```

### 設定ファイル記述

1. `source/` 配下に配置したTypeScriptファイルをJavaScriptにコンパイル
1. uglifyで圧縮
1. 頭に `javascript:` を付ける
1. `destination/` 配下にブックマークレットとして配置

以上を実行するgulpfileを作成します。

```gulpfile.js
var gulp = require('gulp');
var ts = require('gulp-typescript');
var uglify = require('gulp-uglify');
var replace = require('gulp-replace');

var tsProject = ts.createProject({});

var src = './source';
var dst = './destination';

gulp.task('default', function(){
  gulp.src(src+'/*.ts')
    .pipe(tsProject())
    .pipe(uglify())
    .pipe(replace(/^(.*)/, 'javascript:$1'))
    .pipe(gulp.dest(dst));
});
```

### TypeScriptファイル作成

[TypeScript公式のサンプルコード](https://www.typescriptlang.org/docs/tutorial.html)をそのまま使ってみます。

```ts:source/index.ts
/// <reference path="../typings/globals/jquery/index.d.ts"/>

// 以下TypeScript公式チュートリアル(https://www.typescriptlang.org/docs/tutorial.html)から引用
class Student {
  fullName: string;
  constructor(public firstName, public middleInitial, public lastName) {
    this.fullName = firstName + " " + middleInitial + " " + lastName;
  }
}

interface Person {
  firstName: string;
  lastName: string;
}

function greeter(person : Person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}

var user = new Student("Jane", "M.", "User");

 (<any>$('body')).html(greeter(user));
```

### 実行

```
$ gulp
```

ソースコードが `destination/index.js` に配置されました。

```destination/index.js
javascript:function greeter(e){return"Hello, "+e.firstName+" "+e.lastName}var Student=function(){function e(e,t,r){this.firstName=e,this.middleInitial=t,this.lastName=r,this.fullName=e+" "+t+" "+r}return e}(),user=new Student("Jane","M.","User");$("body").html(greeter(user));
```

## 参考

- [これからTypeScriptを始める人のための開発環境入門](http://toach.click/typescript-environment/)
- [TypeScriptでのフロントエンド開発環境作成総まとめ \- $shibayu36\->blog;](http://blog.shibayu36.org/entry/2016/04/26/110000)
- [Typescriptのtypingsでとまどったのでメモ \- へっぽこITパパのブログ](http://earu.hatenablog.com/entry/2016/07/24/154541)
- [Windows 10 の Bash on Ubuntu on Windows で Node\.js/gulp/Sass を実行する \- Psycho Frame](http://docs.hatenablog.jp/entry/buw-node)
- [ivogabe/gulp\-typescript: A TypeScript compiler for gulp with incremental compilation support\.](https://github.com/ivogabe/gulp-typescript)