javascript - 如何在 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));
  }));
});