Gulp + webpack-stream – Как сохранять сгенерированный файл в ту же директорию?

Question

[Марти Макфлай]

Приветствую!
Помогите, пожалуйста, разобраться, что нужно сделать, чтобы js-ка создавалась в той же директории, что и исходник?

Файл генерируется сейчас в корне проекта, а необходимо в той же папке, что и исходный файл (Вообще нужно на два уровня выше, но это сейчас не важно).

Похоже, что webpackStream перезаписывает base и надо в его конфиг в output/path передать путь. Вот только как?

Сейчас таска выглядит так:

const componentsJs = () =>
    gulp
        .src('./**/src/js/App.js')
        .pipe(webpackStream({
            mode: 'development',
            output: {
                filename: 'component.min.js',
            },
            module: {
                rules: [
                    {
                        test: /\.(js|jsx)$/,
                        exclude: /(node_modules)/,
                        loader: 'babel-loader',
                        query: {
                            presets: [
                                ["@babel/preset-env"]
                            ],
                        },
                    },
                ],
            },
        }), webpack)
        .pipe(gulp.dest((file) => file.base));

Answer 1

[Марти Макфлай]

Разобрался! Для этого потребуется плагин vinyl-named-with-path

const named = require('vinyl-named-with-path');
// Принимает объект(file) из плагина rename и обрезает указанное(deep) количество папок с конца строки 
const changeDirToParent = (file, deep = 1) => {
  file.dirname = file.dirname
    .split("/")
    .slice(0, -1 * deep)
    .join("/");
};

const js = () => {
  return gulp
    .src("**/src/js/App.js", { dot: true, ignore: EXCLUDED_PATH })
    .pipe(plumber())
    .pipe(named())
    .pipe(webpackStream({
      mode: "development",
      output: {
        filename: "[name]/script.min.js",
      },
      module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            exclude: /(node_modules)/,
            loader: "babel-loader",
            query: {
              presets: [["@babel/preset-env"]],
            },
          },
        ],
      },
    }))
    .pipe(
      rename((path) => {
        // Мне нужно не в ту же директорию, а на две выше
        changeDirToParent(path, 3);
      })
    )
    .pipe(uglify())
    .pipe(gulp.dest("./"));
};