核心提示：Typescript结合gulp开发：全局安装npm install tsc -g 全局安装npm install -g gulp-cli 创建一个项目里面创建src和dist文件 npm init创...
Typescript结合gulp开发：全局安装npm install tsc -g 全局安装npm install -g gulp-cli 创建一个项目–>里面创建src和dist文件 npm init创建一个package.json package.json文件。
{
"name": "demo01",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browserify": "^14.3.0",
"gulp": "^3.9.1",
"gulp-typescript": "^3.1.6",
"gulp-util": "^3.0.8",
"tsify": "^3.0.1",
"typescript": "^2.2.2",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.9.0"
}
}
在src文件中创建ts文件
src/main.ts
import { sayHello } from "./greet";
function showHello(pName: string, name: string) {
const elt = document.getElementById(pName);
elt.innerText = sayHello(name);
}
showHello("greeting", "TypeScript");
src/greet.ts
export function sayHello(name: string) {
return `Hello from ${name}`;
}
创建一个tsconfig.json文件,就是把自己写的ts文件追加上去
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": true,
"sourceMap": true
},
"exclude": [
"node_modules"
],
"files": [
"src/main.ts",
"src/greet.ts"
]
}
新建一个gulpfile.js文件
'use strict';
var gulp = require("gulp");
var browserify = require("browserify");
var source = require('vinyl-source-stream');
var tsify = require("tsify");
var paths = {
pages: ['src/*.html']
};
gulp.task("copy-html", function () {
return gulp.src(paths.pages)
.pipe(gulp.dest("dist"));
});
gulp.task("default", ["copy-html"], function () {
return browserify({
basedir: '.',
debug: true,
entries: ['src/main.ts'],
cache: {},
packageCache: {}
})
.plugin(tsify)
.bundle()
.pipe(source('bundle.js')) //生产出bundle.js
.pipe(gulp.dest("dist")); //存放在dist文件夹下面
});
在src文件夹里面创建一个index.html文件。<script src="bundle.js"></script> 
