如何使用Gulp中的Webpack將文件輸出到其源目錄的父目錄？

Question

到目前為止，我有這個代碼，我從這里得到：

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: '.' } { base: '.' } ，但沒有任何工程。 但是，如果我刪除了named()和webpack()管道，那么當前代碼實際輸出到正確的目錄。 那么，在這個過程中，似乎Webpack可能丟失了原始目錄信息？

此外，有可能獲得一個也適用於Webpack的“watch：true”選項的解決方案，因此編譯修改后的文件很快，而不是使用Gulp總是迭代每個文件更改的每個文件？

Answer 1

我假設您要為每個僅包含該站點代碼（而不是其他站點）的站點創建app.js

在這種情況下，您可以使用gulp-foreach有效地迭代所有app.js文件，並將每個文件發送到自己的流中。 然后，您可以使用node.js內置path模塊來確定每個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文件再次向下發送它自己的流，但是這次所有流在返回之前被合並 。

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));
  }));
});