gulpwebpacksource-mapsgulp-typescriptgulp-babel

How to chain in Gulp: Typescript to Babel to Webpack with source map?


I'm trying to create a gulp task that transforms

TS -> (ES6) -> Babel -> (ES5) -> Webpack -> [bundle.js, bundle.js.map]

where the source map maps back to the original TS code.

How can I do this with gulp?

So far, I've managed to get it working from TS -> ES6 -> Babel -> ES5

// Build
gulp.task("build", ["clean"], () => {

    const tsProject = ts.createProject("tsconfig.json", {});
    const sourceMapOptions = {
        sourceRoot: __dirname+"/src"
    };

    return tsProject.src()
    .pipe(sourcemaps.init())

        // Typescript
        .pipe(tsProject())
        .js

        // Babel
        .pipe(babel({
            presets: ["es2015"],
            plugins: ["transform-runtime"]
        }))

        // Webpack <-- ????
        .pipe(webpack({})) // <-- ????

    .pipe(sourcemaps.write(".", sourceMapOptions))
    .pipe(gulp.dest("./dist"));

});

But have no idea how to add webpack to the mix.


Solution

  • Since there are still no answers, here's what I ended up doing.

    I had to do it in two steps (idea from here):

    /** Typescript -> ES6 -> Babel -> ES5 */
    gulp.task("ts-babel", function () {
    
      const tsconfig = {
        target: "es6",
        lib: ["es5", "dom"]
      }
    
      const babelconfig = {
        presets: ["es2015"],
        plugins: ["transform-runtime"]
      }
      const tsProject = ts.createProject(tsconfig);
    
      return gulp
      .src("src/**/*.ts")
      .pipe(sourcemaps.init())
      .pipe(tsProject())
      .js
      .pipe(babel(babelconfig))
      .pipe(sourcemaps.write("."))
      .pipe(gulp.dest("build/es5"));
    })
    
    /** Webpack bundle */
    gulp.task("webpack", ["ts-babel"], function () {
      const config = {
        devtool: "source-map",
        output: {
          filename: "app.bundle.js"
        },
        module: {
          preLoaders: [
            {
              test: /\.js$/,
              loader: "source-map-loader"
            }
          ]
        }
      }
      return gulp
      .src("build/es5/**/*.js")
      .pipe(webpack(config))
      .pipe(gulp.dest("build/bundle"));
    })