How to Pass a Relative Destination Path With gulp-watch and gulp-less

Question

So I want to watch for changes made to less files and have the destination path for the CSS be the same folder where the changed less file.

Here's the general file structure:

    root
    |
    site1
    |   |
    |   includes
    |   |   |
    |   |   site1-styles.less
    |   |   site1-style.css
    site2
    |   |
    |   includes
    |   |   |
    |   |   site2-style.less
    |   |   site2-style.css

Here's what I thought might work, but Im realizing that the pathing probably doesn't make sense, and I'm not sure the best way to pass the right destination.

    // Require
    //////////////////////
    var gulp = require('gulp'),
    less = require('gulp-less'),
    minifyCSS = require('gulp-minify-css'),
    prefix = require('gulp-autoprefixer'),


    // Styles
    //////////////////////
    gulp.task('less', function () {
    gulp.src(['*/includes/*.less'])
    .pipe(less())
    .pipe(minifyCSS())
    .pipe(prefix("last 2 version", "> 1%", "ie 8", "ie 7"))
    .pipe(gulp.dest('*/includes/'))
    });

    //Default
    //////////////////////
    gulp.task('default', function() {
    gulp.watch(['*/includes/*.less'], ['less']);
    });

Thanks

Answer 1

I guess that your gulp.dest shuld just be a '.' so the gulp.src folders will be preserved.

Remember also to return a stream or to use a callback otherwise gulp will not be notified when the task is completed and you may have tasks dependency issues. It's not your case but it's a good practice anyway.

// Styles
//////////////////////
gulp.task('less', function () {
    return gulp.src(['*/includes/*.less'])
        .pipe(less())
        .pipe(minifyCSS())
        .pipe(prefix("last 2 version", "> 1%", "ie 8", "ie 7"))
        .pipe(gulp.dest('.'));
});

By the way, when you have those path issues, I found very useful the gulp-debug plugin so you can make experiments and verify what's happening.