gulpfile.js

const gulp = require('gulp');

// for rollup
const rollup = require('rollup');

// for stylus and postcss
const rename = require('gulp-rename');
const plumber = require('gulp-plumber');
const stylus = require('gulp-stylus');
const postcss = require('gulp-postcss');
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('autoprefixer');
const csswring = require('csswring');

// config
const rollupconfig = require('./rollup.config.js');

gulp.task('js', () =>
  rollup.rollup(rollupconfig)
    .then(bundle => bundle.write(rollupconfig))
);

gulp.task('css', () =>
  gulp.src('./source/app.styl')
    .pipe(plumber({
      errorHandler: function(err) {
        console.error(err.message);
        this.emit('end');
      },
    }))
    .pipe(sourcemaps.init())
    .pipe(stylus())
    .pipe(postcss([
      autoprefixer,
      csswring,
    ]))
    .pipe(rename('bundle.css'))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./public'))
);

gulp.task('build', ['js', 'css']);
gulp.task('build-watch', ['build'], () => {
  gulp.watch(['./source/**/*.ts', './source/**/*.tsx'], ['js']);
  gulp.watch('./source/**/*.styl', ['css']);
});

rollup.config.js

const typescript = require('typescript');
const typescriptPlugin = require('rollup-plugin-typescript');

const tsconfig = require('./tsconfig.json');

module.exports = {
  entry: './source/app.tsx',
  format: 'iife',
  globals: {
    react: 'React',
    'react-dom': 'ReactDOM',
    'react-router': 'ReactRouter',
  },
  dest: './public/bundle.js',
  sourceMap: true,
  plugins: [
    typescriptPlugin({
      typescript,
      tsconfig: tsconfig,
    }),
  ],
};

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "jsx": "react",
    "module": "commonjs",
    "strictNullChecks": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}