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)); });