初始化工程
針對(duì)使用npm的用戶(hù)：
npm install -g typescript
安裝依賴(lài)項(xiàng)
npm install -g gulp-cli
全局安裝TypeScript和Gulp文捶。 （如果你正在使用Unix系統(tǒng)，你可能需要使用 sudo命令來(lái)啟動(dòng)npm install命令行概疆。）
npm install --save-dev typescript gulp gulp-typescript
安裝typescript，gulp和gulp-typescript到開(kāi)發(fā)依賴(lài)項(xiàng)。
npm install --save-dev browserify tsify vinyl-source-stream
tsify是Browserify的一個(gè)插件能夠訪(fǎng)問(wèn)TypeScript編譯器。
vinyl-source-stream會(huì)將Browserify的輸出文件適配成gulp能夠解析的格式惜论，它叫做 vinyl。
npm install --save-dev watchify gulp-util
Watchify啟動(dòng)Gulp并保持運(yùn)行狀態(tài)止喷，當(dāng)你保存文件時(shí)自動(dòng)編譯馆类。 幫你進(jìn)入到編輯-保存-刷新瀏覽器的循環(huán)中。
npm install --save-dev gulp-uglify vinyl-buffer gulp-sourcemaps
Uglify幫你壓縮代碼弹谁，將花費(fèi)更少的時(shí)間去下載它們乾巧。
npm install --save-dev babelify babel-core babel-preset-es2015 vinyl-buffer gulp-sourcemaps
安裝Babelify和ES2015的Babel預(yù)置程序。 和Uglify一樣预愤，Babelify也會(huì)混淆代碼沟于，因此我們也需要vinyl-buffer和gulp-sourcemaps。
簡(jiǎn)單的例子
新建一個(gè)tsconfig.json文件：
{
"files": [
"src/main.ts"
],
"compilerOptions": {
"noImplicitAny": true,
"target": "es2015"
}
}
將ES2015及以上版本的代碼轉(zhuǎn)換成ES5和ES3鳖粟。
新建gulpfile.js文件
var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var tsify = require('tsify');
var sourcemaps = require('gulp-sourcemaps');
var buffer = require('vinyl-buffer');
var paths = {
pages: ['src/*.html']
};
gulp.task('copyHtml', function () {
return gulp.src(paths.pages)
.pipe(gulp.dest('dist'));
});
gulp.task('default', ['copyHtml'], function () {
return browserify({
basedir: '.',
debug: true,
// 讓 tsify在輸出文件里生成source maps社裆。
entries: ['src/main.ts'],
cache: {},
packageCache: {}
})
.plugin(tsify)
.transform('babelify', {
presets: ['es2015'],
extensions: ['.ts']
})
.bundle()
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('dist'));
});
當(dāng)
default執(zhí)行時(shí)，copy-html會(huì)被首先執(zhí)行向图。將src下所有的HTMLcopy到dist目錄下
source maps允許我們?cè)跒g覽器中直接調(diào)試TypeScript源碼泳秀，而不是在合并后的JavaScript文件上調(diào)試。點(diǎn)擊查看瀏覽器調(diào)試TypeScript
Watchify啟動(dòng)Gulp并保持運(yùn)行狀態(tài)榄攀，當(dāng)你保存文件時(shí)自動(dòng)編譯嗜傅。 幫你進(jìn)入到編輯-保存-刷新瀏覽器的循環(huán)中。
Uglify幫你混淆壓縮代碼
在src目錄下新建一個(gè)index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
</head>
<body>
<p id="greeting">Loading ...</p>
<script src="bundle.js"></script>
</body>
</html>
在src目錄下新建一個(gè)greet.ts文件
export function sayHello(name: string) {
return `Hello from ${name}`;
}
在src目錄下新建一個(gè)main.ts文件
import { sayHello } from "./greet";
function showHello(divName: string, name: string) {
const elt = document.getElementById(divName);
elt.innerText = sayHello(name);
}
showHello("greeting", "TypeScript");
最后我們運(yùn)行
gulp
然后在瀏覽器里打開(kāi)dist/index.html
