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

How to output files to the parent of their source directory using Webpack in Gulp?

本文关键字：输出 文件 Gulp Webpack      更新时间：2023-09-26

到目前为止，我有这段代码，我从这里得到：

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 在每次文件更改时始终遍历每个文件？

我假设您想为每个站点创建一个仅包含该站点代码（而不是其他站点）的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));
  }));
});
相关文章：