glup + ts 搭建工程

安装

假设您已经安装了 Node.js，创建目录以保存应用程序，并将其设置为工作目录。

创建简单工程我们首先创建一个新目录。命名为tsDemo，也可以使用任何你喜欢的名字。

安装依赖

    npm init //初始化 项目
    npm install --save-dev typescript gulp gulp-typescript //安装必要依赖

然后，考虑拥有如下的目录结构...

    ts.json
    gulpfile.js
    src/
        greet.ts
        main.ts
        index.html

写一个简单的例子让我们写一个Hello World程序。在src目录下修改main.ts文件：

import { sayHello } from "./greet";
console.log(sayHello("TypeScript"));
{% endcodeblock %}
修改src/greet.ts文件如下：
{% codeblock %}
export function sayHello(name: string) {
    return `Hello from ${name}`;
}

修改gulpfile.js文件如下：

var gulp = require("gulp");
var ts = require("gulp-typescript");
var tsProject = ts.createProject("tsconfig.json");

gulp.task("default", function () {
    return tsProject.src()
        .pipe(tsProject())
        .js.pipe(gulp.dest("dist"));
});

最后，将 src/greet.ts 添加到 tsconfig.json 如下：

{
    "files": [
        "src/main.ts",
        "src/greet.ts"
    ],
    "compilerOptions": {
        "noImplicitAny": true,
        "target": "es5"
    }
}

在Node.js下进行测试：

gulp
node dist/main.js

现在应该可以打印出 “Hello from TypeScript”。

现在，让我们把这个工程由Node.js环境移到浏览器环境里，修改目录下package.json。

{
  "name": "ts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1",
    "babelify": "^7.0.0",
    "browserify": "^16.2.3",
    "gulp": "^3.9.1",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-typescript": "^5.0.1",
    "gulp-uglify": "^3.0.2",
    "gulp-util": "^3.0.8",
    "tsify": "^4.0.1",
    "typescript": "^3.4.5",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0",
    "watchify": "^3.11.1"
  },
  "dependencies": {}
}

npm i   // 安装依赖

新建一个页面在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>

修改main.ts文件：

import { sayHello } from "./greet";
// console.log(sayHello("TypeScript"));
function showHello(divName: string, name: string) {
    const elt = document.getElementById(divName);
    elt.innerText = sayHello(name);
}

showHello("greeting", "TypeScript");

修改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 watchify = require("watchify");
var gutil = require("gulp-util");
var uglify = require('gulp-uglify');
var paths = {
    pages: ['src/*.html']
};

var watchedBrowserify = watchify(browserify({
    basedir: '.',
    debug: true,
    entries: ['src/main.ts'],
    cache: {},
    packageCache: {}
}).plugin(tsify));
function bundle() {
    return watchedBrowserify
      .transform('babelify', {
          presets: ['es2015'],
          extensions: ['.ts']
      })
      .bundle()
      .pipe(source('bundle.js'))
      .pipe(buffer())
      .pipe(sourcemaps.init({loadMaps: true}))
      .pipe(uglify())
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest('dist'));
}
gulp.task('copyHtml', function () {
    return gulp.src(paths.pages)
        .pipe(gulp.dest('dist'));
});
gulp.task("default", ["copyHtml"], bundle);
watchedBrowserify.on("update", bundle);
watchedBrowserify.on("log", gutil.log);

这里运用了CommonJs export定义模块，ES2015引入模块语法。Browserify把所有模块捆绑成一个JavaScript文件。Babel编译ES2015。使用 vinyl-source-stream 把输出文件命名为bundle.js。Uglify压缩代码。Watchify监听编译。

欢迎光临我的博客交流学习