How to minify webpack output using gulp?

Question

I have this task:

gulp.task('js', function() {
  var webpackConfig = extend({}, require('./webpack.config.dev.js'), {
    devtool: "source-map",
  });
  return gulp.src(config.paths.mainJs)
    //.pipe(beautify({indent: {value: '  '}}))
    .pipe(named())
    .pipe(webpack(webpackConfig))
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(through.obj(function (file, enc, cb) {
      // Dont pipe through any source map files as it will be handled
      // by gulp-sourcemaps
      var isSourceMap = /\.map$/.test(file.path);
      if (!isSourceMap) this.push(file);
      cb();
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./deployment/deployment/js'))
    .pipe(uglify())//JS_Parse_Error

The output of the previous pipe ./deployment/deployment/js/ is two files: bundle.js and bundle.js.map. So I think my pipe to uglify is wrong. How can I minify webpacks output?

Answer 1

All I had to do was modify my './webpack.config.dev.js` file already referenced in gulp to add the UglifyJsPlugin:

  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.UglifyJsPlugin({
    mangle: {
        except: ['$super', '$', 'exports', 'require']
    }
  })
  ],