如何在 Gulp 中使用 Webpack 将文件输出到其源目录的父目录？

Question

到目前为止，我有这个代码，我得到了from here：

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

gulp.task('default', function() {
  return gulp.src('*/lib/app.js', { base: '.' })
    .pipe(named())
    .pipe(webpack())
    .pipe(gulp.dest('.'));
});

我的文件夹结构是这样的：

site1/lib/app.js
site2/lib/app.js

我想创建如下所示的输出文件，每个文件只包含它们各自的 lib/app.js 文件的代码（以及其中制作的任何 require()）：

site1/app.js
site2/app.js

但是，我现在的代码只是输出到项目的根目录。我尝试了几种组合，例如删除{ base: '.' }，但没有任何效果。但是，如果我删除 named() 和 webpack() 管道，那么当前代码实际上会输出到正确的目录。那么，在这个过程中，Webpack 似乎丢失了原始目录信息？

另外，是否有可能获得一个也适用于 Webpack 的“watch: true”选项的解决方案，以便快速编译修改后的文件，而不是使用 Gulp 在每次文件更改时始终遍历每个文件？

Answer 1

我假设您想为每个站点创建一个app.js，该站点仅包含该站点（而不是其他站点）的代码。

在这种情况下，您可以使用gulp-foreach 有效地迭代所有app.js 文件并将每个文件发送到自己的流中。然后你可以使用node.js内置的path module找出每个app.js文件的父目录在哪里，并用gulp.dest()写在那里。

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

gulp.task('default', function() {
  return gulp.src('*/lib/app.js')
    .pipe(foreach(function(stream, file) {
      var parentDir = path.dirname(path.dirname(file.path));
      return stream
        .pipe(named())
        .pipe(webpack())
        .pipe(gulp.dest(parentDir));
    }));
});

如果您想使用webpack({watch:true})，您将不得不使用不同的方法。下面使用glob 遍历所有app.js 文件。每个app.js 文件再次向下发送自己的流，但是这次所有流在返回之前都是merged。

var gulp = require('gulp');
var webpack = require('webpack-stream');
var named = require('vinyl-named');
var path = require('path');
var merge = require('merge-stream');
var glob = require('glob');

gulp.task('default', function() {
  return merge.apply(null, glob.sync('*/lib/app.js').map(function(file) {
    var parentDir = path.dirname(path.dirname(file));
    return gulp.src(file)
      .pipe(named())
      .pipe(webpack({watch:true}))
      .pipe(gulp.dest(parentDir));
  }));
});