Webpack和Gulp的多输出路径

Question

我知道这有点棘手，但我正在寻找一种用webpack和gulpfile输出我的文件的方法。

• Gulp将在javascripts/dist/v2和stylesheets/dist/v2
中构建
• Webpack将在javascripts/dist/v3和stylesheets/dist/v3
中构建

图片相同......

这就是我想要的：

- App
  |_ v3
    |_ assets
      |_ js
        |_ *.js
      |_ scss
        |_ *.scss
      |_ images
      |_ index.html
- stylesheets
  |_ dist
    |_ v2
      |_ old.css
    |_ v3
      |_ style.css
- javascripts
  |_ dist
    |_ v2
      |_ old.js
    |_ v3
      |_ bundle.js
- images
  |_ v3
    |_ New images
  old images

这是我对webpack的配置：

const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const CleanWebpackPluginConfig = new CleanWebpackPlugin(['dist'], {
  root: '',
  verbose: true,
  dry: false,
});

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/dev/index.html',
  filename: 'index.html',
  inject: 'body',
});

module.exports = {
  devtool: 'cheap-module-source-map',

  resolve: {
    modules: [path.resolve(__dirname, 'dev/assets/js'), 'node_modules'],
  },

  entry: [
    path.resolve(__dirname, 'dev/assets/js/main.js'),
    path.resolve(__dirname, 'dev/assets/scss/main.scss'),
  ],

  output: {
    filename: '/assets/js/bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },

  devServer: {
    outputPath: path.join(__dirname, 'dist'),
  },

  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        include: path.resolve(__dirname, 'dev'),
        exclude: /node_modules/,
        loaders: ['babel-loader'],
      },
      {
        test: /\.json$/,
        loaders: ['json-loader'],
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({
          notExtractLoader: 'style-loader',
          loader: 'css-loader?minimize!postcss-loader!sass-loader',
        }),
      }
    ]
  },

  postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ],

  plugins: [
    CleanWebpackPluginConfig,
    HtmlWebpackPluginConfig,
    new webpack.optimize.UglifyJsPlugin({ comments: false, sourceMap: true, warnings: false }),
    new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production') } }),
    new ExtractTextPlugin({ filename: '/assets/css/styles.css', allChunks: false }),
    new CopyWebpackPlugin([{ from: 'dev/assets/img', to: 'assets/img' }]),
  ]
};

我的gulpfile：

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
//var runSequence = require('run-sequence');
//var cmq = require('gulp-combine-media-queries');
var wrap = require('gulp-wrap');
var declare = require('gulp-declare');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var watch = require('gulp-watch');
var replace = require('gulp-replace');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var gutil = require('gulp-util');
var mocha = require('gulp-mocha');
var sass = require('gulp-ruby-sass');

gulp.task('styles', function () {
    return sass('public/stylesheets/sass/main.scss', {
        style: 'compact',
        precision: 10,
        sourcemap: true,
        loadPath: ['public/stylesheets/sass/']
      })
      .on('error', sass.logError)
      .pipe(gulp.dest('public/stylesheets'))
      .pipe($.size({title: 'styles'}));
});

var b = browserify({
    entries: 'public/javascripts/src/app/app.js',
    debug: true
});

gulp.task('front', function() {
    return b.bundle()
        .on('error', function(err){
          // print the error (can replace with gulp-util)
          console.error(err.message);
          // end this stream
          this.emit('end');
        })
        .pipe(source('front.js'))
        .pipe(buffer())
        .pipe(gulp.dest('public/javascripts/dist/v2'));
});

gulp.task('vendor', function() {
    gulp.src('public/javascripts/src/vendor/*.js')
        .pipe(sourcemaps.init())
        .pipe(concat('vendor.js'))
        .pipe(uglify())
        .pipe(sourcemaps.write('../maps'))
        .pipe(gulp.dest('public/javascripts/dist/v2'));
});

gulp.task('watch', function () {
    gulp.watch([
        'public/javascripts/src/app/helpers/**/*.js',
        'public/javascripts/src/app/pages/**/*.js',
        'public/javascripts/src/app/ui-components/**/*.js',
        'public/javascripts/src/app/main.js',
        'public/javascripts/src/app/app.js',
    ], ['front']);
    gulp.watch([
        'public/stylesheets/sass/**/*.scss'
    ], ['styles']);
});

gulp.task('test', function () {
    gulp.src(['public/javascripts/src/test/**.js'],{read:false})
        .pipe(mocha());
});


gulp.task('default', [], function () {
    gulp.start(['vendor', 'styles', 'front' ]);
});