Typescript结合gulp开发

Posted diuxie

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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/main.ts
import { sayHello } from "./greet";

function showHello(divName: string, name: string) {

const elt = document.getElementById(divName);
elt.innerText = sayHello(name);

}

showHello("greeting", "TypeScript");

src/greet.ts
export function saywww.sangpi.comHello(name: string) {

return `Hello from ${name}`;

"compilerOptions": {

"module": "commonjs",
"target": "es5",
"noImplicitAny": true,
"sourceMap": true

},
"exclude": [

"node_modules"

],
"files": [

"src/main.ts",
"src/greet.ts"

\'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文件夹下面

<!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>

以上是关于Typescript结合gulp开发的主要内容,如果未能解决你的问题,请参考以下文章

我如何结合两个 gulp 任务

Gulp/Typescript/Async/Await 代码不起作用 - 为啥?

Azure可以编译TypeScript并执行Gulp任务吗?

如何使用Gulp构建TypeScript

与你相遇好幸运,使用gulp流程化Typescript后端开发

Webpack 在编译 typescript 代码失败时会导致 gulp watch 崩溃