##node.jsインストール
下記よりv5.10.1をダウンロード、インストール。
https://nodejs.org/
ディレクトリ構造
下記構造を用意。
┌ dist
| └ index.html
├ src
| ├ ts
| | ├ Main.ts
| | └ Test.ts
| └ js
| ├ jquery.js
| └ require.js
├ gulpfile.js
├ package.json
└ typings.json
package.json
必要なモジュールを記載。
ターミナルからプロジェクトフォルダへ移動し、「npm install」でモジュールをインストール。
package.json
{
"name": "typescriptBuild",
"version": "1.0.0",
"description": "",
"author": "a12345",
"url": "http://qiita.com/a12345",
"license": "MIT License",
"keywords": "gulp",
"devDependencies": {
"del": "*",
"gulp": "*",
"gulp-plumber": "*",
"gulp-rename": "*",
"run-sequence": "*",
"gulp-typescript": "*",
"gulp-typings": "*",
"gulp-uglify": "*",
"gulp-util": "*"
}
}
typings.json
必要な型定義を記載。
typings.json
{
"name": "lib typings",
"version": "1.0.0",
"dependencies": {},
"url": "http://qiita.com/a12345",
"author": "a12345",
"ambientDependencies": {
"jquery": "registry:dt/jquery#1.10.0+20160316155526"
}
}
gulpfile.js
gulpタスクを記載。
開発 [gulp]
本番 [gulp --production]
※typescriptはブラウザで使うためamd方式でコンパイル。
gulpfile.js
//"url": "http://qiita.com/a12345"
//"author": "a12345"
"use strict"
let gulp = require('gulp');
let plumber = require('gulp-plumber');
let runSequence = require('run-sequence');
let del = require('del');
let ts = require('gulp-typescript');
let typings = require('gulp-typings');
let uglify = require('gulp-uglify');
let util = require('gulp-util');
// 削除
gulp.task('clean', ()=> {
del(['./dist/**/*.js']);
});
// typescriptのコンパイル
gulp.task('ts', ()=> {
gulp.src(['./src/ts/**/*.ts'])
.pipe(plumber({
handleError: (err)=> {
console.log(err);
this.emit('end');
}
}))
.pipe(ts({
target: 'ES5',
module: 'amd'
}))
.pipe(gulp.dest('./dist/js'));
});
// javascript生成
gulp.task('js', ()=> {
gulp.src(['./src/js/**/*.js'])
.pipe(plumber({
handleError: (err)=> {
console.log(err);
this.emit('end');
}
}))
.pipe(gulp.dest('./dist/js'));
});
//typings生成
gulp.task('typings' ,()=>{
gulp.src("./typings.json")
.pipe(typings());
});
//圧縮
gulp.task('min', ()=> {
gulp.src('./dist/js/**/*.js')
.pipe(plumber({
handleError: (err)=> {
console.log(err);
this.emit('end');
}
}))
.pipe(uglify())
.pipe(gulp.dest('./dist/js'));
});
// 監視
gulp.task('watch', ()=> {
gulp.watch('./src/ts/**/*.ts', ['ts']);
});
// デフォルトタスク
gulp.task('default', ()=> {
if (util.env.production) {
runSequence('clean', 'typings', 'js', 'ts', 'min');
} else {
runSequence('clean', 'typings', 'js', 'ts', 'watch');
}
});
TypeScript
メインスクリプト記載。
クラスごとにファイルを分ける場合、import/exportを使う。
main.ts
/// <reference path="../../typings/main.d.ts"/>
import Test = require('./Test');
let test = new Test();
test.getName();
必要なクラス記載。
Test.ts
/// <reference path="../../typings/main.d.ts"/>
class Test {
private name: string;
constructor() {
this.name = 'name';
}
public getName(): string {
return this.name;
}
}
export = Test;
HTML
※ブラウザで「require」が使えないのでrequire.jsを読み込む。
http://requirejs.org
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width" />
<link type="text/css" href="/css/style.css" rel="stylesheet" />
<script src="/js/jquery.js"></script>
<script data-main="/js/main.js" src="/js/require.js"></script>
</head>
<body>
</body>
</html>