Cannot keep source file sub-directories

I try to use webpack with vinyl-name to compile my scripts like the demo:

var gulp = require('gulp');
var webpack = require('webpack-stream');
var named = require('vinyl-named');
gulp.task('default', function() {
  return gulp.src(['src/*.js', 'src/**/*.js'])
    .pipe(named())
    .pipe(webpack())
    .pipe(gulp.dest('dist/'));
});

But js files in src/** are compiled to the root directory in dist/ like this:

• src/base.js --> dist/base.js // This is right
• src/user/login.js --> dist/login.js // This should be in dist/user/login.js

How can I make it right?

[cmtt]

According to reported issues, webpack does not support multiple output paths yet.

Nevertheless, there are some workarounds:

• use webpack’s output filename templates (this does not create the described directory structure)

gulp.task('default', function() {
  return gulp.src(['src/*.js', 'src/**/*.js'])
    .pipe(named())
    .pipe(webpack({
      output : {
        filename : '[name]/[name].js'    
      }
    }))
    .pipe(gulp.dest('dist/'));
});

• hook into the stream with Gulp plugins and change the file’s paths.

Apparently, you can use a combination of vinyl-named and gulp-rename in order to recreate the directory structure. You have to pipe your sources twice through gulp-rename, once for caching the original directory of your input, once for restoring the cached attribute.

It is an ugly and questionable solution, but it should do the job as long as the webpack module isn’t fixed.

var gulp = require('gulp');
var webpack = require('webpack-stream');
var named = require('vinyl-named');
var rename = require('gulp-rename');

gulp.task('default', function() {
  var tmp = {};
  return gulp.src(['src/*.js', 'src/**/*.js'])
    .pipe(named())
    .pipe(rename(function (path) {
      tmp[path.basename] = path;
    }))    
    .pipe(webpack({
      output : {
        filename : '[name].js'    
      }
    }))
    .pipe(rename(function (path) {
      path.dirname = tmp[path.basename].dirname;
    }))    
    .pipe(gulp.dest('dist/'));
});

Note that this example works solely when you supply globs which match across directories (e.g. a gulp.src-pattern like [‘src/1.js’, ‘src/sub/3.js’] would not work correctly).

You should write your own gulp-rename callback functions and have a look at the base option of gulp.src, too.

[asika32764]

vinyl-named-with-path can solve my issue.

var gulp = require('gulp');
var webpack = require('webpack-stream');
var named = require('vinyl-named-with-path');
gulp.task('default', function() {
  return gulp.src(['src/**/*.js'])
    .pipe(named())
    .pipe(webpack())
    .pipe(gulp.dest('dist/'));
});