Gulp 在多个 Wordpress 主题文件夹中编译 LESS 并创建各自的 CSS 文件夹

Question

我试图让 Gulp 从 LESS 文件夹中编译我所有的 LESS 文件，然后在它们各自的 Wordpress 主题文件夹中创建一个 CSS 文件夹，这些文件夹编译到一个目录 css/main.css 文件中。这是使用 Wordpress wp-content/themes/theme-name/less 作为文件结构。每次我尝试编译时，它都会将它扔到 /themes/** 文件夹中，或者如果我使用 .pipe(gulp.dest('./css/'));它在项目的根目录中创建它。我希望它在每个主题文件夹中创建一个新的 css 文件夹，并根据它们各自的 LESS 文件将 main.css 编译到每个文件夹中。

gulp.task('less', ['clean'], function () {

var paths = [
    "wp-content/themes/theme-name-1/less/_compile.less",
    "wp-content/themes/theme-name-2/less/_compile.less",
    "wp-content/themes/theme-name-3/less/_compile.less"
];

var compile = gulp.src(paths, { base: './'})
    .pipe(rename({
        basename: "main",
        extname: ".css"
    }))
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(autoprefixer())
    .pipe(sourcemaps.write('./css'))
    .pipe(gulp.dest('wp-content/themes/**/css'));

return (compile);
  });

我希望它发生的方式是：

当你运行 gulp 时，它会编译并创建一个文件夹：wp-content/themes/theme-name/css from wp-content/themes/theme-name/less。我希望它查看每个主题名称文件夹并创建一个相应的 /css/ 文件夹，编译后的 less 为 main.css。

现在它似乎在 wp-content/themes 的根目录下创建一个 ** 文件夹。

Answer 1

gulp.dest 是放置文件的目的地，因此.pipe(gulp.dest('wp-content/themes/**/css')); 会将编译后的文件放在文件夹wp-content/themes/**/css 中。

因此将其更改为您希望放置文件的目的地，因此请像这样使用它：.pipe(gulp.dest('wp-content/themes/theme-name/css'));。