gulpfile.js

var gulp = require("gulp");
var FwdRef = require("undertaker-forward-reference");
gulp.registry(FwdRef());

var path = require("path");
var fs = require("fs");
var del = require("del");

var browserify = require("browserify");
var watchify = require("watchify");
var hmr = require("browserify-hmr");
var { sucrasify } = require("./tools/transforms/sucrasify");
var discify = require("discify");

var gulp_typescript = require("gulp-typescript");
var livereload = require("gulp-livereload");
var concat = require("gulp-concat");
var less = require("./tools/gulp-plugins/gulp-less");
var rename = require("gulp-rename");

var rollup = require("./tools/gulp-plugins/gulp-rollup");

var typescript = gulp_typescript.createProject("tsconfig.json", {
  module: "esnext",
  target: "esnext",
  importHelpers: true,
  removeComments: true,
  allowJs: true,
  jsx: "react",
  experimentalDecorators: true,
  noResolve: true,
  isolatedModules: true,
  skipLibCheck: true,
});

gulp.task("clean", () => del(["dist"]));

gulp.task("html", () => {
  return gulp
    .src(["src/public/index.html"])
    .pipe(rename("index.html"))
    .pipe(gulp.dest("build/public"))
    .pipe(livereload());
});

gulp.task("styles", async () => {
  gulp
    .src(["src/**/*.{css,less}"])
    .pipe(concat("styles.less"))
    .pipe(less())
    //.pipe(postcss())
    .pipe(gulp.dest("build/public"))
    .pipe(livereload());
});

const b = watchify(
  browserify({
    //exposeAll: true,
    entries: ["build/app/main.js"],
    extensions: [".ts", ".tsx", ".js", ".jsx"],
    cache: {},
    packageCache: {},
    debug: false,
    sourceMaps: false,
    fullPaths: true,
    plugin:[
      [discify, { outdir: "build/public/disc" }],
      [hmr]
    ],
    transform: [
      sucrasify
    ]
    //dedupe: true
  })
)

// b.plugin(discify, { outdir: "build/public/disc" });
// b.plugin(hmr);
// b.transform(sucrasify);

// b.transform([
//   envify({
//     NODE_ENV: "development",
//   }),
//   { global: true },
// ]);

b.on("error", console.log);
b.on("syntax", console.log);
b.on("update", bundle);

async function bundle() {
  b.bundle()
    .on("error", console.error)
    .pipe(fs.createWriteStream("build/public/main.js"));
}

gulp.task("roll:app", function () {
  //let closure = require("@ampproject/rollup-plugin-closure-compiler");
  //let { terser } = require("rollup-plugin-terser");

  return gulp
    .src(["./src/**/*{.js,.jsx,.ts,.tsx}"])
    .pipe(typescript())
    //.pipe(babel(BABEL_CONFIG))
    .pipe(
      rollup({
        input: "src/app/main.js",
        output: {
          format: "esm",
        },
        external: Object.keys(require("./package.json").dependencies),
        treeshake: {
          moduleSideEffects: false,
        },
        inlineDynamicImports: true,
        plugins: [
          //terser(),
          //closure()
        ],
        onwarn: function (message) {
          if (/external dependency/.test(message)) {
            return;
          }
          if (message.code === "CIRCULAR_DEPENDENCY") {
            return;
          }
          if (message.code === "INPUT_HOOK_IN_OUTPUT_PLUGIN") {
            return;
          } else console.error(message);
        },
      })
    )
    .pipe(gulp.dest("build"));
});

const serve = () => {
  const { polka, sirv } = require("./tools/devserver");
  const { PORT = 3002 } = process.env;
  const PUBLIC_INDEX_HTML = fs.readFileSync(
    path.resolve(__dirname, "build/public", "index.html")
  );

  const allowAMP = (res) =>
    res.setHeader(
      "AMP-Access-Control-Allow-Source-Origin",
      `http://localhost:${PORT}`
    );

  polka()
    .use(
      sirv(path.resolve(__dirname, "build/public"), {
        dev: true,
        setHeaders: (res) => allowAMP(res),
      })
    )
    .get("*", (req, res) => {
      res.end(PUBLIC_INDEX_HTML);
    })
    .listen(PORT, () => {
      console.log(`> Running on http://localhost:${PORT}`);
      console.log(`> BundleAnalyzer on http://localhost:${PORT}/disc/map`);
    });
};

gulp.task("watch", async () => {
  livereload.listen();
  gulp.watch("src/**/*.{css,less}", gulp.series("styles"));
  gulp.watch("src/**/*.html", gulp.series("html"));
  gulp.watch("src/**/*.{ts,tsx,js,jsx}", gulp.series("roll:app"));
});

gulp.task(
  "start",
  gulp.series(
    "clean",
    gulp.parallel("roll:app", "styles", "html"),
    gulp.parallel(bundle, "watch", serve)
  )
);

gulp.task(
  "bundle",
  gulp.series(
    "clean",
    gulp.parallel("roll:minify", "styles", "html"),
    gulp.parallel([serve])
  )
);

// .pipe(source('main.js'))
// .pipe(buffer())
// .pipe(sourcemaps.init({ loadMaps: true }))
// .pipe(minify())
// .pipe(sourcemaps.write('./'))
// .pipe(gulp.dest('build/js'))

//externalizes stuff so you can use unpkg
//   .transform('browserify-shim', {
//   "lodash": "_",
//   "react": "React",
//   "react-dom": "ReactDOM"
// }, {global: true});

//you can skip writing files and just use 'browserify-middleware' package if you want to do this
//.get('/main.js', browserifyMiddleware(__dirname+'/src/app.tsx'))

//windows users can use this
//const {watchify} = require("./tools/transforms/watchify");

// this is poor mans tsconfig paths / babel root import resolver, its a browserify transform
//var {tspathify} = require('./tools/transforms/tspathify')

//undertaker is ass, this makes it a little less so
//var FwdRef = require("undertaker-forward-reference");

/**
 * this files tsconfig at the top doesnt check types, although a good strategy
 * is to change the config to do type checks and to not emit on errors
 * by setting noEmitOnError: true. The compiled javascript files won't hit the
 * build dir so no pressure on the watcher and it won't run hmr until the code compiles
 */

// wtb pt 96 font
// VIVA LA BROWSERIFY