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

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

1 个答案: