SourceChord

C#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。

gulpメモ~TypeScriptのコンパイル~

gulpを使ってTypeScriptのコンパイルをやってみました。

gulp-typescriptというライブラリを使ってTypeScriptのコンパイルをしています。
https://www.npmjs.com/package/gulp-typescript


ということで、以下のコマンドでgulpとgulp-typescriptのインストールをします。

npm install gulp gulp-typescript --save-dev

元の.tsファイルと同じディレクトリに出力

まずは、ソースのtsファイルと同じ場所にコンパイル結果のjsファイルを出力してみます。
gulpのタスクは以下のようにします。
configに各種設定をまとめています。

gulpfile.js
var gulp = require('gulp');
var typescript = require('gulp-typescript');

var config = {
    ts : {
        src: [
            './**/*.ts',       // プロジェクトのルート以下すべてのディレクトリの.tsファイルを対象とする
            '!./node_modules/**' // node_modulesは対象外
        ],
        dst: './',
        options: { target: 'ES5', module: 'commonjs' }
    }
};

gulp.task('build', function () {
    return gulp.src(config.ts.src)
               .pipe(typescript(config.ts.options))
               .js
               .pipe(gulp.dest(config.ts.dst));
});

コンパイルするファイルをsrcで定義しています。ここでは、プロジェクトのルートディレクトリ以下のすべての.tsファイルを対象としています。
ここでのポイントは、node_modules以下のディレクトリを対象から外していること。
外部ライブラリ中で.tsファイルが含まれているとコンパイル対象となってしまい、定義が重複してエラーが大量に出たりします。そこで「!」を頭につけて、ソースの対象外として指定します。

指定したディレクトリに、元のtsファイルと同じ階層構造で出力

指定したディレクトリに出力したい場合は、さきほどのgulpfile.jsのconfig.dstを変更します。

gulpfile.js
var config = {
    ts : {
        src: [
            './**/*.ts',       // プロジェクトのルート以下すべてのディレクトリの.tsファイルを対象とする
            '!./node_modules/**/*.ts' // node_modulesは対象外
        ],
        dst: '../build',
        options: { target: 'ES5', module: 'commonjs' }
    }
};

こうすると、プロジェクトの一つ上にbuildというディレクトリを作り、そこの中にコンパイルしたjsファイルを出力します。

sourcemapを出力する

gulp-typescriptでコンパイルするときにsourcemapも出力したい、という場合にはgulp-sourcemapsというライブラリを併用します。
https://www.npmjs.com/package/gulp-sourcemaps

gulpfile.js
var gulp = require('gulp');
var typescript = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');

var config = {
    ts : {
        src: [
            './**/*.ts',       // プロジェクトのルート以下すべてのディレクトリの.tsファイルを対象とする
            '!./node_modules/**' // node_modulesは対象外
        ],
        dst: './',
        options: { target: 'ES5', module: 'commonjs' }
    }
};

gulp.task('build', function () {
    return gulp.src(config.ts.src)
               .pipe(sourcemaps.init())
               .pipe(typescript(config.ts.options))
               .js
               .pipe(sourcemaps.write('./'))
               .pipe(gulp.dest(config.ts.dst));
});