gulp.jsでtypescript+webpackをビルドする

先日のエントリーで、gulp.jsを使ってwebpackビルドを行うことができるようにしました。
しかし、生のJavaScriptを使うのではなく、typescriptを使ってビルドしたいと思い、やってみました。

1 tsdをインストールする
2 gulp.jsのタスクを作る
3 試してみる
4 watchタスクの調整

tsdをインストールする

typescriptからjQueryなどのライブラリを使う場合、型定義ファイルを読み込む必要があります。
これを便利に扱えるのがtsdコマンドです。npmを使ってインストールします。

$ npm install -g tsd

tsdを入れたら、まずtsd.jsonを作成します。

$ tsd init

試しに、node.d.tsとjquery.d.tsを入れてみます。

$ tsd query node --action install --resolve --save
$ tsd query jquery --action install --resolve --save

typingsというディレクトリが作成され、そこにtsd.d.tsとnode,jqueryのディレクトリが生成されていると思います。

これらの型定義ファイルは、typescriptのソースからは

/// <reference path="../typings/tsd.d.ts" />

を１行目に書いておくだけでOK！

gulp.jsのタスクを作る

まず、gulp-typescriptをインストールします。

$ npm install -D gulp-typescript

次にgulp/tasks/typescript.jsを作ります。

var gulp = require('gulp');
var typescript = require('gulp-typescript');
var config = require('../config');

gulp.task('typescript', function(){
  // 対象となるファイルを全部指定
  gulp.src(config.ts.src)
    .pipe(typescript(config.ts.options))
    .js
    .pipe(gulp.dest(config.ts.dest));
});

config.jsに以下を追記します。

  // typescript
  ts: {
    src: [
      src + '/ts/**/!(_)*.ts'
    ],
    dest: src + '/js',
    options: { target: "ES5", removeComments: true, module: "commonjs" }
  },

src/jsにtypescriptのコンパイル後のソースを出力し、その後webpackビルドの対象とできるようにします。

試してみる

今回は試しに、typescriptからjqueryも読み込み、webpackでビルドまでできるかどうか試したいと思います。

準備として、jqueryをnpmでインストールします。

$ npm install -D jquery

typescriptのコードを書きます（src/ts/main.ts）。

/// <reference path="../../typings/tsd.d.ts" />

var $: JQueryStatic = require('jquery');

$(() => {
  $('body').prepend("Hello!");
});

gulpからtypescriptタスクを実行します。

$ gulp typescript

うまくいったと思いますが、もし最初にtsdでnodeをインストールしていなければ、Cannot find name 'require'.というエラーが出てしまい失敗します。

成功していれば、src/js/main.jsが以下のような内容で作成されているはずです。

var $ = require('jquery');
$(function () {
    $('body').prepend("Hello!");
});

次に、requireがちゃんと解消されるかどうか、webpackタスクを実行してみます。

$ gulp webpack

dest/js/bundle.jsが生成されていれば、ひとまずOKです。

JSがきちんと動くかどうかも確認してみます。

$ gulp browser-sync

ブラウザが起動し、画面一番上に Hello! と出ていれば正常に動作できています。

watchタスクの調整

typescriptのコードが変更されたタイミングでコンパイルさせるようにします。gulp/tasks/watch.jsを修正します。

var gulp = require('gulp');
var watch = require('gulp-watch');
var config = require('../config').watch;

gulp.task('watch', function () {
    // typescriptを監視 ←これを追加
    watch(config.ts, function() {
        gulp.start(['typescript']);
    });

    // js
    watch(config.js, function () {
        gulp.start(['webpack']);
    });

    // styl
    watch(config.styl, function () {
        gulp.start(['stylus']);
    });

    // jade
    watch(config.jade, function(){
        gulp.start(['jade']);
    });

    // www
    watch(config.www, function () {
        gulp.start(['copy']);
    });
});

次に、config.jsを修正します。

  // watch
  watch: {
    ts: relativeSrcPath + '/ts/**',  // 追加
    js: relativeSrcPath + '/js/main.js', // main.jsのみに変更
    styl: relativeSrcPath + '/styl/**',
    jade: relativeSrcPath + '/jade/**',
    www: relativeSrcPath + '/www/**'
  }

typescriptのソースのファイル数分だけwebpackが走ってしまうのを防ぐため、監視対象をmain.jsのみにしました。

これで、typescriptのコードを編集・保存すると自動的にjsに変換後webpackでビルドを行い、自動的にブラウザをリロードして反映、という流れで開発できるようになりました！！