如何使用gulp缩小webpack输出?

时间:2016-03-16 22:55:11

标签: gulp webpack minify uglifyjs gulp-uglify

我有这个任务:

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

上一个管道./deployment/deployment/js/的输出是两个文件:bundle.js和bundle.js.map。所以我认为我的管道是错误的。如何缩小webpacks输出?

1 个答案:

答案 0 :(得分:3)

我所要做的就是修改gulp中已经引用的'。/ webpack.config.dev.js`文件来添加UglifyJsPlugin:

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