Gulp

本快速入门指南将教您如何使用 gulp 构建 TypeScript，然后将 Browserify、terser 或 Watchify 添加到 gulp 管道中。本指南还介绍了如何使用 Babelify 添加 Babel 功能。

我们假设您已经在使用 Node.js 和 npm。

最小项目

让我们从一个新目录开始。我们暂时将其命名为 proj，但您可以将其更改为您想要的任何名称。

mkdir proj
cd proj

首先，我们将按以下方式构建我们的项目：

proj/
   ├─ src/
   └─ dist/

TypeScript 文件将在您的 src 文件夹中开始，通过 TypeScript 编译器运行并在 dist 中结束。

7ON4tMnSmc1hw27+HnGtfnGV+MdM+TPc2/eyPjauJg0=

mkdir src
mkdir dist

初始化项目

d10mJXoMka24gyorUBkAiaS85a5QaJpcohcNQjcxPf942lxvLg7Fd3YX0Qq0lqhUfVeSK2KzkVyEqTwUxzclVw==

npm init

3fe7XqtbwL2lwl0XbOAGs9FDX2fXgUVJbozxzswsMj7apZ5MJ656YaBBirEL7xdKbm3WWDrsFc8ZGeqU+XVcBAmAdhiQWWPHKin61Q3nn34Fk9mALDIb8StmFpvrA4tnypO2dVhZFpkfUnRD9/L9X5p+KZ8B2oBBCagYNKlwkU7oy/ERhkJOawQxDBmekwPeBLnXRZKPL8Uh/2xzzVK8w8hdai64AfwsGxuWw9qubE9bamSpLFQPD5JMO8FYA4YCrNx+uinH4mhN8Jq7pHW7lU5H1DhZ8Nfr+uXpm67a4zZnhJ5MU6sgr4kB2CFF/nmW8jxpNbcoVCBFtD2+j/SNjg==

安装我们的依赖

fytANQ+VGa+Yuc09Q15RPL6Rp814qc0kCrSW2pKqRTygqw5wElVXLGDB2jtDpexW3aqjK9gIOXt+DUb5G4eioSDWTQclN2SL9Hfi2bts4P0+33u9Rr23c+xJgEEB1ugXqGTbhAIxguoJz3jgU+UaZ5RTLpAWW+qXUHFTddAX0GierMi9s1s+rdYIva0lIJ0YALs35KtdUIV5U/23w+T+BZnyEj+UMLFRxIhtkU2KZqP22q9Qffg5IRWrSZYA8m5pXScsU5xLm640xaVVPgvfUXzI0CvJRExWM1ins6S9s+C7Gg5hFklnonM0lxaqIXzP

npm install -g gulp-cli

5IecY3sKOFv9qbRRtMD91TFrdw7XMg7Y257rA1R3jlYi2DSinv2RdvvnszSBlSWvMMqb2wGfZq1mJak/e3OSPfqzMTjMoXVpg5Jcm0rZhXTZh8vxz8b2u4VDrRuv8W5Sw3RHVj1XL/kP8XGLkKN0cjC1a1GX8/VnVfCEu1sJl3wgvq3Bdhh/e8Zz95MDOETJHYDYV5NcVK98phW8qWKw8dfilJKv4V43iUkUK5n9G4mwN9Jf7zv5b6cCRD3uzVJiBeqnb0MaFcuj6MAJ0ByXYM2CzT5691O80YXSaZ4JQfg=

npm install --save-dev typescript gulp@4.0.0 gulp-typescript

写一个简单的例子

hUAzD6AFVUP40lBN/UCgQGR0wjU6i8iqNpTMEcSUfK5OfarScEA2lC8P0ELyqWVR8n9AidyPE7paUBURZNanne31KL9cWdPdMVCugrEf6PtCtXhY1s7x1VP6s0RfrP6eWbC62v0RXTpFdN040DXuiQ==

function hello(compiler: string) {
  console.log(`Hello from ${compiler}`);
}
hello("TypeScript");

R7N8J9b8yfONWkSJOxZr8BxqlYi/nvqtz9h42BGuIkdaHslHfYk6vtFc3kHd8yHYBxbPBWRKCEZnoGtArNWcVuQ34u/aFov5PMncKy5dYX1F1TCyGEh5ojhZLh0n9fkm

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

创建一个 gulpfile.js

R7N8J9b8yfONWkSJOxZr8IcljZg9si3hIMC/JVN37s590qlrW0ZBEIzmn3KZt8t+0dy6/gwT/LjbQlz20GLyQ39+pVhGq7H6sE705RKw3LM=

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"));
});

测试生成的应用程序

gulp
node dist/main.js

G/c1bp2fG7omMyTGWVLm7jWNFDEgc9LSukPz9nNLmwNRzqcHDrU1l5WgO2R1TDWL

在代码中添加模块

Y2tbOQjDxpd4G4oXFII3w8DDjLiavgKr/q35Uc32AEBl3ARXmv8TfK3rxvuAh6SqhQ+1RJVCvdbfCXIuFdSvsl/nNplCvpmiqUa8b4zy67buc51o5kQ0F5M1YnEkSqShGDT2Yu/iYiQXwD+qpwTVsZ54Ov2ICQar679DuH+JwOwm6ieq7ynMYjsjcxvEfOtd

VJUvu7pXQj/YT5IaEpJ9P6b6bwGhJAXF1KR0O4OB1CeIc/KO+opUNWLrfYiKLcYHJxkF+uQoXYPwBpdMoXFM7Q==

export function sayHello(name: string) {
  return `Hello from ${name}`;
}

RxYQ2B0P3mO27nvvS3jt52utPCCsXhXZ8UbuOBEX+7fE9QAlvblUJWvUMlFBRbB8j3kxImDz0Sb82Y4ro7HNtQNgQmV0/ykrLBma9Lv4s6XVzddTO2jc5o+JF+PRPLz82JSKI8hQZZzJTAPgiWEwbA==

import { sayHello } from "./greet";

console.log(sayHello("TypeScript"));

MMdN8N3ogHvauCw0MaoTPQx4OrsYeNYzsKGwxAbEDui5cWgEZSFKLSdOftgciYDgC1ePfTt7SycsWa9CmcP2z/j4FJXjthiR5Ex/ngSBUPg=

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

zVANXHbQW4E2yZje/stbVXce+j+yAAMOq7ZAK0+15Y9ZkonaLdzzFaqzL+W67FW9oHKbr5Wff+p+ihf5DMEgRbDUy7Cur2gJtdElvDEL3FE=

gulp
node dist/main.js

dIHdlqQZxtwuWDO6pl5kgj+9QgVOYyt1AXQbNDVhMoYPsnvtgZlDTDwTSuXNNXSD/s2fhELAxRgRj+2leQ0HOIItBTLrTL0s1h8EvPvBfuh6lO5zMKln78KrH3gXCB4dV6ZpAvuMzUdku1IqLN4bNJNVK8vn2PtVA+0Uq7IKdF1TOJ6hHtOd2CRUD4jjbGMbNNQAUrXXv+ayuOXIvWFGau1Wy7tDGuMIcZLtMirMa5cYxOM7Ez/5P8XiaTM0HATTuhAaXSeEmgH7MMSQygXQieyWgVzYT/cB2Gl2jld9tEN8mcrfBimjpyYql7p+k8kl

Browserify

IY3fNxo/YiBbr28soG5b04dVpFzyz7e7L+rCFzwG4aTsjbLqHVPEKZo0WBTwpL+fhgaXvdeWrw6CT7DuV7lcdwoxqOIeParR0/uCLhlwWKTDbsiLA3N4R5XAy0hNzxndiCqX2KeLT3bKLoNd98Qtbzo7TH9PJACAFXbeW9MfVhTxb+Q9HwyTY8Xezal10PKkKPTJoKl7cc8WCqz5usl6+KWluQ+VEyJf9Uj54eD9AhXBdAYaBm+NtqYI79RVerBUE19DErldyhx0AVK8yBLRvcoORSnUo7Pqq2zfX2CPCH58yQhbtStLwvGrBQ+0lQNMMCaLEQ53KEGfUEMLBC/RDjTwaNIwvOhl/CCpXe7FoBuOYdb+WGY5/uHCKdUrYOuU+ci4QCn1BlW11FfQG3jvMyJMMTamlKBc6IHCfktyDNVKquvn/V1EZA4I+o1QYVQOkB6VWPA2DPX8SOzGiCpGVxEpjWwPUq0Tz2Jckxvd7Cp2mpK+UkCC8QmpnVKjRMNtIqzBzR1oqSq3BaIuLtwf3Q==

CDotVhakQzcA2PnFsTbpiYTktq5gvS7xFECtTLV+TRV/N3sGi5RNDH5Ji0mpSNHXC8cmV2r1ZOKAe7j467uYxVRc3wkjgFYMlOFbf60Z9UjcNTa7kCc4ucyFwToMgQNdnvsjGmaqTpvcpef9GQE+FXkVgM/KUYkm43GivhExxEvCpnirUgkeSay2mUQAPue57dDEpVpbjlBbulHpC6FZ66GxgyGTZmXSqnuD+6Vady/BrWpX0QANy9AqqYqgQzcVEm/uayWY8/WQNBjSDDOb57nLSu+Wa3wDw20cKZurdXeerWTPsrCHuNMoTvzFQad1jl6pz7cUYELbCs2z22/fzkrnYqAwioJdnEb+bj30+KzoHFA4XbvAvLfo2e1KrLHBeH+7kkK9u0MW0ZMm/RQwmlRlM4sHvKDE/tVz3PaOnICZ+TCn8Q3krlYZ5fP2KdkTZOseAzhaXGJyGjxtj2y1lcrrCgy5t6VCVO7zm4bIxJI=

npm install --save-dev browserify tsify vinyl-source-stream

创建一个页面

osyhODVmNbKzMGBzwhvEzgAy9JPQwJIPz7mEDaSZ0zuof9+IdFECTOLWVFC2z7BR8NikAD8rTt6IkQqxOx8nHdy9y2UGAJoU1TjHWiRZXvw=

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

RxYQ2B0P3mO27nvvS3jt5xrz6hnbuF4ELUZ8jaTLvv92jwwNL15uc4LasaSxs/8JhhgSMCehMMD3j+0d8xEoCQ==

import { sayHello } from "./greet";

function showHello(divName: string, name: string) {
  const elt = document.getElementById(divName);
  elt.innerText = sayHello(name);
}

showHello("greeting", "TypeScript");

bAhVkrydkEpWjOiZBgjab9JQF4diYZe02m8HMozkN3cAQV/TzHmQmuw3aj5+d0Zg+dCUYOcTvT6IX/tnMs/1DL22a73qYhybx36cgzPKv5MgmI69cg8xqVcwLk+ujv+8XB6okOCNquZyfL9bwS0IKOtdrfvczy9uIwAa8AMx708h8HopJmn6mcD1TWJzyN7M

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",
  gulp.series(gulp.parallel("copy-html"), function () {
    return browserify({
      basedir: ".",
      debug: true,
      entries: ["src/main.ts"],
      cache: {},
      packageCache: {},
    })
      .plugin(tsify)
      .bundle()
      .pipe(source("bundle.js"))
      .pipe(gulp.dest("dist"));
  })
);

TdwzPyLeqdAIpLvch5ilBxLimnt2xIceQS4PrYAD2HAi2mrom6kL0ltrJ81Z2X/ffkixg55qV93RrzCNSF/B9uijOziEVqgG2MG5mTi+b8tAct18yk9Eq4TeP0q6lHoWoXcy/sBxAdzcMDIGJ7T4MwRd1dKYqSdislnVxpiQgML0KXPlDHcBweyXYrWHxt23xwyGcYgMCUph+7CZlvWFRN3b7UuUzb+Uvh5n3N3uRsxq7bowfBbxmM6mGGaMXWsHsoM9tMNeTkYusCG+B/6DQ1ywp5dmUKLcNehgCTv3Ym2tYMnzQmQN2/iX4ReAqJALJcoV6CLz+3Vy6weGZ9mEQhpn0UNHKVS9y/CxVkPxhyqlc7sRh7dUQzz1cRwOVTCr5oLf3fVTzgA6vzoJJO/qcuJ2Is0UIh+deaOpAY1lIZL9C+H8UdX0orou8JoE7vTvCrzqcRVNMgaqHnd6uexpiLOjKuOs9lKKFqzK+U5uZ+cnXspubNyLyBN+nOOtIPsB24LCdP/izqTVImAVQhTysW7zxA9pgPgmCGxur2Bmjg4=

D9kqL7AHbKnVQYXRxRHIggWkmMu5EtlTcf2yPBVE9GdWaEiWKXNF5Qm8xQE/oZk8IWs5dDsn8CCEP/tZ8w4FQa9JpUj+VjyZI+j+3cZIXpV82Jy8mfVZujauJppl+QljSnzokPrSpqlhmwH3GfBgHEyS1u+OBb1Waiwg9YXrCNG2G9IE3CBqpB6iYS36vQSx+LXaE0isutw8jwGspUGXZaN4156BadbxAdCAcUIP408=

lx5kQC3IkC9A11r3wSFSc4YOi8kX2bPpLlGn0f7u9/k3csPmVHiI2OyPeggV37Oh7We7aRakjewfU6mzmczN9fJOvfS5zBAbS9qet7ZME/J6jVWk28O1wju47LvSbSTxaj1i94LEQI9luRhJefMiVKzEKK/scEdE4sNqsNqZyCzsh3U+Rj1uBkn30wsR2UjuR0ZDZaDkFm1Qpqx1+Bz83g==

FtuePspkapdd2HhFIVVaUEcEuFjcViXqYAitRlE7oNzIKPsvk1BBQzyEv3DX1AXNAdc+0e4pAXvxIrkCogqzxwINbt/DSRDhJVyXzMtFwYzoZJR/Hqw1n7v4DpnQ6tTspUhUKyKH5rjs9RE4pMk1iO5ggoznRp4O0ZaxpUdxnGG96+tNI9bKx8nvBx+t4PVSby27IGvY3y8PKail0gZ6Zm5Ny4Aqrirg7Wmjxg1sXCQU4ZqzJRECa718OwOUdT8egTTGGeMOxXYZ49bgDN8xr8LDlqkhtFh+RD0i2BdDPjPSv0ENuext+/lJf5PvntDMIrXfyo8Mw8QdBlDaQ1GjwhksVP/2x7Md/dErOSImVlnP7P1ZNiSe/3XaHu5LGbhdAkDKLCNEYPKXIPWTwyLU1pg14z5W4pcA0brYHWsiE1IlWLCDCpMEtWUAxEh8njzrr7MXD6kyaGw4bCJjvKkoZNBy35H00BX7d6pgRewmvx3CLro9E+fjFRzzsN0A2wdu65XzpBuBfvJVXvZshc5wdWCNTeYOiFx56vg52N0DT+UN8YfwqCoxZfypjTX4IKCFS5cEN2AZ3/vQpQR/PDmkIADJDfZUop1sjgBROqHG27o=

Watchify、Babel 和 Terser

d10mJXoMka24gyorUBkAiR7M7MWRob0BcMl0Y83A3SaBDBX0NdbjC5zP22unE24z3UE1Uu4JJGmlrEbzGCWzJH6EWrML5ttpJfMdMTPfiy7PMiqqQA8M7MXYAPBpq7cpdoslTSVa9RGIQg0wbinnoNBV5so9buSZGDP64mzyIs2N0D2q/RVeQ0UbPJGC9wz3d++ItKsIJdWbPEjjmaarlg==

    xvXVga+YpwJvu2IUzenz8uZU3pfd44ahsCcwp6J2hdwbgSmwkwDHaJCbZfrWu2HewFTYr1hZ/A4ew87F6rKQdqrZU1iPC7TqAnTxCPaqdNiOS35awv60v/pw+YCb19eE+LK6f4k5m6eLWpM9AIJ3faL9bdDsK4VwjiOJP/I0/FxZ4Z+DJXfVg5JHjmUBDGOoYULGgLwlckGhv1xhIl1FZzYwRgeHmXtg7UuGpht/Ez/VcrJH+yZL6bqUC6WUqFX3tpCMQ7N4qVV/9efEH0XadqMS0JopMDHCPeqX2sKcqY2XJV2lECQkiur7Mh4389e5dTRb2byBe1B4/5psiulXC2EwgR/n4bo1zdnbr7axPca8oyrwwVN7Pyxrmn+faaTC2umkcGEmvILchR70a5nuvz3LfZwzUHAP6xOTzVbrqednZLMdUmIe2bDiEOLU7lyHtFbNxadXf/a/SJENCBvxDywXIMOXI720MKauIXWFmfALotRNS8zvCGBoliBLBy679zY9fBq7zF53iKuzC7kgyZj8LYUouV1SgHZR16IpaslSWbrZYH8DOIkrNBD7BKhu

Watchify

NXnH8Lctwz7+xWhgdMsC6qrXfErf2+QLdpJ+TjAge3eY9EXrJ0RVuyWufH5gnD3EazmvHc7k1rLEztFpqe/nGA==

npm install --save-dev watchify fancy-log

p4Tld2dOvosTpMif6PCWPA8d5N6l8uAu9J18O0g23aMXt/ZftyZDvgsB9RB7ZqjmsHKef2aHd2qEAePXC7kHPw==

var gulp = require("gulp");
var browserify = require("browserify");
var source = require("vinyl-source-stream");
var watchify = require("watchify");
var tsify = require("tsify");
var fancy_log = require("fancy-log");
var paths = {
  pages: ["src/*.html"],
};

var watchedBrowserify = watchify(
  browserify({
    basedir: ".",
    debug: true,
    entries: ["src/main.ts"],
    cache: {},
    packageCache: {},
  }).plugin(tsify)
);

gulp.task("copy-html", function () {
  return gulp.src(paths.pages).pipe(gulp.dest("dist"));
});

function bundle() {
  return watchedBrowserify
    .bundle()
    .on("error", fancy_log)
    .pipe(source("bundle.js"))
    .pipe(gulp.dest("dist"));
}

gulp.task("default", gulp.series(gulp.parallel("copy-html"), bundle));
watchedBrowserify.on("update", bundle);
watchedBrowserify.on("log", fancy_log);

0B4GIh0D0BlH9nSfhghH8ioRg9Ar297mdKNwX64Y1P3/xmyFbej0iLt/lMJSMJoJhDJrmB/I1s7NFc20HCkx7hNauEczDBTPAXuDqMBQ1FY=

  1. 我们将 browserify 实例包装在对 watchify 的调用中，然后保留结果。
  2. 我们调用了 watchedBrowserify.on('update', bundle);，这样 Browserify 就会在每次你的 TypeScript 文件发生变化时运行 bundle 函数。
  3. 我们调用 watchedBrowserify.on('log', fancy_log); 登录到控制台。

unq9qsrrllDusV9mh43B1KZsPixqRD2cdWopeUuRgtBkE/oqJo7tqRrAsNHkkVaXhPvuROJUURDaM+Tk3oIQoAZHSAoVv0a3lnvCAggwk1XM3VGrl5QrJSg6S+f24ZKvh5BVmITSU/A+aJztN1/Sr4YmyK0oBWjLp2G5d7SxisoVJKfXIoCRljUluzkDdXqCHJXcZCUhUEugUtmBl1SXJInwJZ7wXKWl1UQtN3ZPe5N8oQWFw4mWPfo2kdU5Dw+FkCRjtFtKGzYLlrQlxsGid8HwPQFvWojLAx9dxIXcVT8hwD0K/EwogRdEh2AdkYf0RXzkzfGEO4gAJjME7WeV2aV+u98yimnT41OABkop4RWXBvkrltrWfjV7OKh7hI2m1EwRJ0WJi8NT6hcD4PNTog==

iEFP24izVsGG09Xs6Dwl2XqVQ9zr2pLYKX3AGpiWYJsG86q7qrxEnKO1Ud4ChqS3zXyB7KOS9essoka6e8By6kidWeuhlXO6uIuYpWh33WSiBCoSboodPikryCx88GKCZUCmCSDgwkRgoteS/48zQ/mcuontKQnCmyFGquBhAj0lQ/cJuCgiC1Ql25SjtQ6jOPNSsyQurOByHJOnPyE/AuG5y2Zi6hqNEqlaMloYZ7aq7GOVbsrCs+LOuBMg2r3a

proj$ gulp
[10:34:20] Using gulpfile ~/src/proj/gulpfile.js
[10:34:20] Starting 'copy-html'...
[10:34:20] Finished 'copy-html' after 26 ms
[10:34:20] Starting 'default'...
[10:34:21] 2824 bytes written (0.13 seconds)
[10:34:21] Finished 'default' after 1.36 s
[10:35:22] 2261 bytes written (0.02 seconds)
[10:35:24] 2808 bytes written (0.05 seconds)

Terser

fWblyOGnnWSq9B/lTLbROiWwlb/srV4rrHcWdsNSmF/MtYRRU/wu8c0BdIWnYEilwPqXXi/9aeEKeUPg2bxlodk7/f0gH0uNeDdvMJ4HaCVZOP/hrlD99GFW+ufSCGcABtylBQBhDR1zw60FJ60KA4rBf1UuIoeTHzcYeAJhpk1N3OeLKvyWaWVJPHeU+Op8k6Bo/Kz8fYQKIa61ou3Z9A==

npm install --save-dev gulp-terser vinyl-buffer gulp-sourcemaps

p4Tld2dOvosTpMif6PCWPA8d5N6l8uAu9J18O0g23aMXt/ZftyZDvgsB9RB7ZqjmsHKef2aHd2qEAePXC7kHPw==

var gulp = require("gulp");
var browserify = require("browserify");
var source = require("vinyl-source-stream");
var terser = require("gulp-terser");
var tsify = require("tsify");
var sourcemaps = require("gulp-sourcemaps");
var buffer = require("vinyl-buffer");
var paths = {
  pages: ["src/*.html"],
};

gulp.task("copy-html", function () {
  return gulp.src(paths.pages).pipe(gulp.dest("dist"));
});

gulp.task(
  "default",
  gulp.series(gulp.parallel("copy-html"), function () {
    return browserify({
      basedir: ".",
      debug: true,
      entries: ["src/main.ts"],
      cache: {},
      packageCache: {},
    })
      .plugin(tsify)
      .bundle()
      .pipe(source("bundle.js"))
      .pipe(buffer())
      .pipe(sourcemaps.init({ loadMaps: true }))
      .pipe(terser())
      .pipe(sourcemaps.write("./"))
      .pipe(gulp.dest("dist"));
  })
);

HX98z65sMkJQvrxufuEYVO2uBO4F7b6o/Z33S/fePrm+pjLyTS4maQ58lmKvD6ApKmfQssOgSk6DuUmA5mH+bKJvNVgOyxLDQzQjVCfCzR0hrSs4+MpcGbPX0FmGe2LZD7ga//aYatZ8fg30gad77MQuskLmGdKmabhsxxHTDF5I3Clhn2v5MzQlwWBmmvBibwY/kMgwRx8pWQUOGfNLtwITrfe9yA3WwQ+Yh9l01m7kYB/fA+pzgch/wYWi+bc5IpIBorWjJEhuAsbUpu/D5ER+KqZXZESgMdkAvpi6OMY0gsdABcrrHFXFVESxduJGeEAlYrS2rEmF18YZowFDjZlydBGXlWQKR9YUfYTiN3+FVcptOcitVYkS432aPNoCFPFoTlwjP+zGQUUzFH0UhbuUq74wTPZKjqujn3LF+oqsFcXyaZ/GmGLC9dkQmMZZc8u4JWDIgmrKpd+/i+59aHWmIxK0hEorR+4Rj4wJFUQ9fXE4iTvXsCehW3+KqcEU

gulp
cat dist/bundle.js

Babel

7Ca7z14uHswGLZnTBfbWSBOR7AdXSJNGagV73Sr5CzCXlNndN0+UKRJtXuFliESYXNQ84uoZ21hq6QlfP4N4NRNogWLQKYbNnCExYfJOkGr8E7wkpB3n7ysWChcrzfq8zEcMShOIQpVRFSkkedIZ8vLFrXWWOl/aMQ7R9F00Mg7xHADRzkn4i7NUbo4tzlss91bkZ7c7rEEr0ku7Gqq/1kRhqGl5cUkbMpLlSRUbwOTZx50ACZOjkJJsDQnD0D7qCqK+H3hpkawxqypL/klyqE//xIMflHRgiOxlWIrW3ZdynJrqjH56B9BU3ViIx6fxkiM7OVlJNtvVHfsuBHjYTXfktMTGx97VnEADOQomz3JpJPn3rKVgKa4NSpUv7nVklzbtrxnO72JvULrC6XLNM3Iq6DMt+TAIZbdr26/7j2JVFHxxW5xj0U+3okRcj3ynkONM8Kqby10jPtxuvmx9vaF7eKerbANN3Ioue4O4Iw6Z0d6+I6RSSXQCY8Gn1gzi

npm install --save-dev babelify@8 babel-core babel-preset-es2015 vinyl-buffer gulp-sourcemaps

p4Tld2dOvosTpMif6PCWPA8d5N6l8uAu9J18O0g23aMXt/ZftyZDvgsB9RB7ZqjmsHKef2aHd2qEAePXC7kHPw==

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 paths = {
  pages: ["src/*.html"],
};

gulp.task("copy-html", function () {
  return gulp.src(paths.pages).pipe(gulp.dest("dist"));
});

gulp.task(
  "default",
  gulp.series(gulp.parallel("copy-html"), function () {
    return browserify({
      basedir: ".",
      debug: true,
      entries: ["src/main.ts"],
      cache: {},
      packageCache: {},
    })
      .plugin(tsify)
      .transform("babelify", {
        presets: ["es2015"],
        extensions: [".ts"],
      })
      .bundle()
      .pipe(source("bundle.js"))
      .pipe(buffer())
      .pipe(sourcemaps.init({ loadMaps: true }))
      .pipe(sourcemaps.write("./"))
      .pipe(gulp.dest("dist"));
  })
);

uAPeday3da/NgtbNXmNq0EC+TjZB/4vrCuKDPSwkQi0sFtpycn1/h7gj/6NiboP5n7FoKIe0JcLWkr+3uTyfLYXYn/l+AJB+Lo2uzJuHdieJaZI9XA3UiOE6k233PpwmmkDaPsGEE7GiL8E7KfGe+ss8dyQY1iLWT0mCiLh7T73IMWyzn5Er72iWCdWmnRRsDsmkuizdV3NI8/3Lbboz4AQzVqbvS4VxqbtovP4X7tY=

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

Klu+DjnfxcbOrpP0OBmWp5PbpvzpoYVFpAlsbJk6ExqhL3bviRaTc0jJp8V29ZKP+gyUU9f3PCjPZCmTAq1i9pQde9cMTctVZSYFbTnlTMqQYqXdUK+wckNFGCFefw8xqMpAjOlsAJtaeUt73c5Vfg==