はじめに
今まではtscコマンドでコンパイルしていましたが、gulpの勉強も兼ねてgulpでコンパイルしてみます。
準備
gulp-typescriptを使います。
npm install gulp gulp-typescript --save-dev
ファイル構成
├── bower.json
├── bower_components
├── gulp
├── gulpfile.js
├── node_modules
├── package.json
└── www
├── common
│ ├── js
│ │ └── ts
│ │ └── main.ts
├── dest
└── index.html
使い方
gulpfile.jsにtaskを定義していきます。
var gulp = require('gulp');
var typescript = require('gulp-typescript');
gulp.task('ts', function() {
//出力オプション
var options = {
out: 'main.js'
};
gulp.src([
'./**/*.ts',
'!./node_modules/**'//node_modules配下は除外する
])
.pipe(typescript(options))
.pipe(gulp.dest('./www/dest'));
});
下記を実行。
gulp ts
www/dest配下にmain.jsが書き出される。
※outオプションを使用する場合はモジュールシステムが使用できなくなる。
出力オプションのoutオプションを使用しない場合、
dest配下に、tsファイルと、同じ階層構造でmain.jsが出力される
├── dest
│ └── www
│ └── common
│ └── js
│ └── ts
│ └── main.js
tsファイルと同階層に書き出す場合はgulp.dest('./')
とする。
└── www
├── common
│ ├── js
│ │ └── ts
│ │ ├── main.js
│ │ └── main.ts
├── dest
└── index.html
差分コンパイルをする
下記の記事より引用
gulp-tscとgulp-typescriptの利用方法の違いについて
差分コンパイルを行う場合は、typescript.createProject()を事前に呼び出してプロジェクトと呼ばれるオブジェクトを生成しておきます。
そして、このプロジェクトをコンパイル時に渡す事で、コンパイル済みのファイルがプロジェクトにキャッシュされて、更新のあったファイルのみがコンパイルされる仕組みになるようです。
速度面の比較などはまだ出来てないのですが、ファイル数が膨大になってくるほど恩恵が大きくなると思っています。
var gulp = require('gulp');
var typescript = require('gulp-typescript');
gulp.task('ts', function() {
//出力オプション
var typescriptProject = typescript.createProject({
sortOutput: true,
out: 'main.js'
});
gulp.src([
'./**/*.ts',
'!./node_modules/**'//node_modules配下は除外する
])
.pipe(typescript(typescriptProject))
.pipe(gulp.dest('./www/dest'));
});
sorcemapを使う
var gulp = require('gulp');
var typescript = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('ts', function() {
//出力オプション
var typescriptProject = typescript.createProject({
sortOutput: true,
out: 'main.js'
});
gulp.src([
'./**/*.ts',
'!./node_modules/**'//node_modules配下は除外する
])
.pipe(sourcemaps.init())
.pipe(typescript(typescriptProject))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./www/dest'));
});
sourcemapが書き出される。
.
├── dest
│ ├── main.js
│ └── main.js.map
└── index.html
options
module
モジュールシステムを選択することができる。
commonjs, amd, umdを選択できる。
var options = {
module: 'commonjs'
}
target
ECMAScriptの利用する構文を指定できる。デフォルトはES3になる。
ES5とES6を設定することができる。
var options = {
target: 'ES6'
}
removeComments
コンパイル時にコメントを削除するかを設定できる。
var options = {
removeComments: true
}
sortOutput
複数のファイルを連結する際に、依存関係保って並び替えてくれる。
var options = {
removeComments: true
}
noImplicitAny
暗黙的にany型を使っている部分でエラーを発生してくれる。
var options = {
noImplicitAny: true
}
その他オプション
その他
使っていくと色々設定したいことが増えてくると思うので、追記していこうと思います。