1

I am trying to get Gulp to compile all my LESS files from a LESS folder and then create a CSS folder within their respective Wordpress theme folders compiled into a directory css/main.css file. This is using Wordpress wp-content/themes/theme-name/less as a file structure. Every time I try to compile it throws it into a /themes/** folder or if I use .pipe(gulp.dest('./css/')); it creates it in the root of the project. I want it to create a new css folder in each of the theme folders and compile main.css into each of those folders according to their respective LESS files.

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

The way I want it to occur is:

When you run gulp it compiles and creates a folder: wp-content/themes/theme-name/css from wp-content/themes/theme-name/less. I want it to look in each theme-name folder and create a respective /css/ folder with the compiled less being main.css.

Right now it seems to be creating a ** folder in the root of wp-content/themes.

dope
  • 113
  • 3
  • 11

1 Answers1

0

gulp.dest is the destination of where your files will be placed, so .pipe(gulp.dest('wp-content/themes/**/css')); will place your compiled files in the folder wp-content/themes/**/css.

So changed that to the destination of where you want your files to be placed, so use it like this: .pipe(gulp.dest('wp-content/themes/theme-name/css'));.

peer
  • 1,001
  • 4
  • 13
  • 29
  • Is there a way to preserve the theme name in the gulp.dest? I have multiple theme folders (parent and child themes) and each of them would need this done in each respective folder. If I use your method it will just use one theme folder and the rest do not have their respective /css/ folders. ex: wp content/themes/theme-name-1/less --> wp-content/themes/theme-name-1/css wp content/themes/theme-name-2/less --> wp-content/themes/theme-name-2/css Is it possible to achieve this? – dope Apr 19 '16 at 15:58
  • @dope I'm not sure if that's possible, you could make different tasks? Because I think you wont be working on different projects at the same moment? – peer Apr 19 '16 at 16:02
  • I could - i was wondering if there was a way to bulk compile the LESS files and then spit into their respective theme folders. I would just add the the var paths in the future if we had to create another child theme. – dope Apr 19 '16 at 16:07