Wraps together:

• webpack
• typescript
• gulp
• eslint for typescript

in one simple to use build pipeline. Your seperate typescript files are downcompiled and bundled together, leaving you a nice simple bundle to use in your browser

• install node > v4 + npm (note: node v8 is preferred)
• npm init your project in a folder npm init
• install global gulp npm install -g gulp
• add gulp package npm install gulp --save-dev
• add this package npm install gulp-webpack-typescript-pipeline --save-dev
• create a file called gulpfile.js in your projects root folder
• create a tsconfig.json in your projects root folder and fill in your typescript options
• in your gulpfile add the following:

const gulp = require('gulp');
const tsPipeline = require('gulp-webpack-typescript-pipeline');

tsPipeline.registerBuildGulpTasks(
  gulp,
  {
    entryPoints: {
      'BUNDLE_NAME': 'PATH_TO_ENTRY_POINT'
    },
    outputDir: 'PATH_TO_BUNDLE_OUTPUT_DIRECTORY'
  }
);

Your entrypoints are the first javascript files you want to enter. Webpack will follow all the imports and requires to build you a final bundle. Your bundles will be made in the output directory and called [BUNDLE_NAME].

e.g:

given a tsconfig.json in the project root folder that contains:

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "sourceMap": true
  }
}

and a gulp file that contains:

const gulp = require('gulp');
const tsPipeline = require('gulp-webpack-typescript-pipeline');

tsPipeline.registerBuildGulpTasks(
  gulp,
  {
    entryPoints: {
      'myNiceBundle': __dirname + '/scripts/myentrypoint.ts'
    },
    outputDir: __dirname + '/bundles'
  }
);

Then running gulp tsPipeline:build:dev Will result in a bundle called myNiceBundle.js in /bundles under the root of your project

You now have the following commands:

• gulp tsPipeline:build:dev - build all the files in dev mode
• gulp tsPipeline:build:release - build all the files in minified release mode
• gulp tsPipeline:watch - rebuilds whenever a file is changed

• linting (tslint)
• typescript (ts -> es6)
• webpack (bundling)

and then dump out the bundles.

{
  entryPoints, // required,  an array of bundlename to entrypoint location mappings,
  outputDir, // required,  where the resulting bundles get written,
  esLintFile, // optional, full path to your .eslintrc.js file
  isNodeLibrary // if set to true will output code suitable to be consumed by node rather than the browser
  externals, the packages to not include in the compiled output
}

That's cool, feel free to use gulp-webpack-es6-pipeline to do the same thing for normal es6.

If you don't like the built in linting rules you can override them in one of two ways:

• put a .eslintrc.js file in the root of your project
• set the esLintFile setting in the options (see options above)

Also fine, feel free to use this as a reference for setting up your own build pipeline. This project is really for people who want a fast opinionated setup.