Typescript结合gulp开发

来源：互联网发布：windows我的电脑图标编辑：程序博客网时间：2024/06/05 17:16

全局安装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.tsimport { sayHello } from "./greet";function showHello(divName: string, name: string) {    const elt = document.getElementById(divName);    elt.innerText = sayHello(name);}showHello("greeting", "TypeScript");

src/greet.tsexport 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文件

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

1 0