Question

在此问题中，Gulp和Webpack由Webpack-stream整合，因此Webpack中包含gulpfile.js的说明。目前，我使用webpack 3.4.1和webpack-stream 4.0.0。

const   gulp = require('gulp'),
        gulpIf = require('gulp-if'),
        webpackStream = require('webpack-stream'),
        webpack = webpackStream.webpack,
        named = require('vinyl-named');

我需要定义条件输出，然后在gulp.dest()内创建函数。感谢vynil-named，我们不需要定义入口点，但是为了定义输出条件，我们需要知道文件的来源（可能是public或admin路径，例如）。

在gulp.dest()内，它表示该文件来自C:\MyIde\projects\testProj\someEntryPoint.js，但实际上此文件位于C:\MyIde\projects\testProj\source\public\js\someEntryPoint.js：

gulp.task('webpack', function(){

    /*  Entry points locations:
        C:\MyIde\projects\testProj\source\public\js
        C:\MyIde\projects\testProj\source\admin\js  */

    return gulp.src('source')
        .pipe(named())
        .pipe(webpackStream())
        .pipe(gulp.dest( file => {

            console.log('path: '+ file.path);
            // Output to console: "path: C:\MyIde\projects\testProj\someEntryPoint.js"
            // Real file path:          C:\MyIde\projects\testProj\source\public\js\someEntryPoint.js

在我问“如何定义所需的输出路径？”之前，我需要了解发生了什么。我以同样的方式定义了pug和sass的输出路径：没有发生这种情况。

更新

答案应该在这里，最后webpack-stream的{{1}} ...

index.js

Answer 1

不幸的是， webpack 与 vynil-fs 流的集成是有限的，我们无法对.pipe(webpackStream())之后的文件做任何事情。但是，“gulp和webpack集成”并不意味着“gulp和vynil-js集成”，我们可以为 webpack 编写自己的包装器，使其与gulp兼容：

const gulplog = require('gulplog'),
      path = require('path'),
      notifier = require('node-notifier'),
      webpack = require('webpack');

gulp.task('webpack', callback => {

    let WebpackOptions = {

      entry: // define your entry points...

      output: {
          path: // define your output path...
          filename: '[name].js'
      }

      watch: // define watch mode depenend on build...
    };

    webpack(WebpackOptions, (error, statistics) => {

      if (!error) {
        error = statistics.toJson().errors[0];
      }

      if (error) {

        notifier.notify({
          title: 'webpack',
          message: error
        });

        gulplog.error(error);

      } else {

        gulplog.info(statistics.toString({
            colors: true
        }));
      }


      if (!WebpackOptions.watch && error) {
        // for production build
        callback(error);
      }
      else {
        callback();
      }
    });
});

Gulp＆amp; Webpack：webpack-stream使用不存在的文件

更新

1 个答案: