Updated.

gulpfile.js

@@ -1,28 +1,40 @@
+// https://stackoverflow.com/questions/40823462/how-to-bundle-typescript-files-for-the-browser-user-gulp-and-tsproject
 var gulp = require('gulp');
+var clean = require('gulp-clean');
+var sourcemaps = require('gulp-sourcemaps');
 var ts = require('gulp-typescript');
 
-var tsProject = ts.createProject('tsconfig.json');
+gulp.task('clean', () => {
-
+    return gulp
-let paths = {
+        .src([
-    pages: ["src/*.html"]
+            './dist/'
-};
+        ], { read: false, allowEmpty: true })
-
+        .pipe(clean());
-gulp.task("copy-html", ()=>{
-    return gulp.src(paths.pages)
-        .pipe(gulp.dest("dist"))
 });
 
-gulp.task('tsc', () => {
+gulp.task("transpile-ts", () => {
-    return gulp.src('src/*.ts')
+    var tsProject = ts.createProject('tsconfig.json',{
-                          .pipe(tsProject())
+        outFile: "app.js"
-                          .pipe(gulp.dest('dist'));
+    });
+    return tsProject
+        .src()
+        .pipe(sourcemaps.init())
+        .pipe(tsProject()).js
+        .pipe(sourcemaps.write('./sourcemaps'))
+        .pipe(gulp.dest('./dist/js'));
+});
+
+gulp.task("copy-html", () => {
+    return gulp
+        .src(['./src/*.html'])
+        .pipe(gulp.dest("./dist/"));
 });
 
 // 这里 watch 里必须使用 gulp.series
 gulp.task('watch', () => {
-    gulp.watch('src/*.ts', gulp.series('tsc'));
+    gulp.watch('./src/namespace/*.ts', gulp.series('clean', 'transpile-ts'));
 });
 
 
 // 这里必须要有一个 default 任务
-gulp.task('default', gulp.series('copy-html', 'tsc', 'watch'));
+gulp.task('default', gulp.series('clean', 'copy-html', 'transpile-ts', 'watch'));

package.json

@@ -4,7 +4,7 @@
     "description": "TypeScript Learning stuffs.",
     "main": "/dist/main.js",
     "scripts": {
-        "gulp": "gulp &",
+        "gulp": "gulp",
         "start": "live-server dist/",
         "test": "echo \"Error: no test specified\" && exit 1"
     },

src/Circle.ts

@@ -1,4 +1,5 @@
 /// <reference path="IShape.ts" />
+
 namespace Drawing {
     export class Circle implements IShape {
         public draw(): void {

src/namespace/Circle.ts

@@ -0,0 +1,8 @@
+/// <reference path="IShape.ts" />
+namespace Drawing {
+    export class Circle implements IShape {
+        public draw(): void {
+            console.log("Circle is drawn.");
+        }
+    }
+}

src/namespace/TestShape.ts

@@ -1,6 +1,6 @@
 /// <reference path="IShape.ts" />
-/// <reference path="Circle.ts" />
 /// <reference path="Triangle.ts" />
+/// <reference path="Circle.ts" />
 
 function drawAllShapes(shape: Drawing.IShape) {
     shape.draw();

src/namespace/Triangle.ts

@@ -1,4 +1,5 @@
 /// <reference path="IShape.ts" />
+
 namespace Drawing {
     export class Triangle implements IShape {
         public draw(): void{

tsconfig.json

@@ -1,11 +1,10 @@
 {
     "include": [
-        "src/*.ts"
+        "src/namespace/*.ts"
     ],
     "compilerOptions": {
         "noImplicitAny": true,
         "target": "es2015",
-        "outDir": "dist/",
         "experimentalDecorators": true,
         "emitDecoratorMetadata": true,
         "types": [