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

时间:2016-04-19 15:42:45

标签: wordpress gulp gulp-less gulp-rename

我正在尝试让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。我想让它查看每个theme-name文件夹并创建一个相应的/ css /文件夹,其中编译的less为main.css。

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

1 个答案:

答案 0 :(得分:0)

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

因此将其更改为您希望放置文件的目标位置,因此请按照以下方式使用它:.pipe(gulp.dest('wp-content/themes/theme-name/css'));