glup + ts 搭建工程

时间 2019-11-09

标签 glup 搭建工程繁體版

原文原文链接

安装

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

建立简单工程咱们首先建立一个新目录。命名为tsDemo，也能够使用任何你喜欢的名字。node

安装依赖

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文件：typescript

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

修改gulpfile.js文件以下：npm

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 以下：json

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

在Node.js下进行测试：gulp

gulp
node dist/main.js
复制代码

如今应该能够打印出 “Hello from TypeScript”。浏览器

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

{
  "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监听编译。

欢迎光临个人博客交流学习