CODEWITHSUNDEEP
javascriptnode.jsgulpfrontend
Soon
Soon

Reputation: 151

How to locate the path of parent directory in gulp.dest()?

I'm new comer in Gulp, and i got stock when i try to output my files to their parent's path.

My directories like this:

app/page_a/less/a.less
app/page_a/css

My goal is:

app/page_a/less/a.less
app/page_a/css/a.css

Here's what i'm doing:

I use ** because i want to match all of my page_* module.

gulp.task('test', function () {
    var files = ['./app/**/*.less'];
    return gulp.src(files, {
            base: '.' // Now the base url becomes where the *.less is.
        })
        .pipe(less())
        .pipe(gulp.dest('.'));
});

My result:( which is obviously wrong :( )

app/page_a/less/a.less
app/page_a/less/a.css
app/page_a/css

So how can i output *.css into the corresponding app/page_*/css path?

Upvotes: 2

Views: 2064

Answers (2)

Sven Schoenung
Sven Schoenung

Reputation: 30574

The path you specify in the base option to gulp.src() isn't relative to each respective .less file, but rather the current working directory. This is usually the directory your Gulpfile.js resides in.

What you actually want to do is alter the path for each resulting .css file after your less() plugin has run, so when the .css files are written to the directory specified by gulp.dest() the /less/ part of the path has been replaced with /css/.

This is exactly what the gulp-rename plugin is for:

var gulp = require('gulp');
var less = require('gulp-less');
var rename = require('gulp-rename');

gulp.task('default', function () {
  return gulp.src( './app/**/*.less') 
    .pipe(less())
    .pipe(rename(function(file) {
       file.dirname = file.dirname.replace(/less$/, "css");
    }))
   .pipe(gulp.dest('./app/'));
});

Upvotes: 2

Carmelo Catalfamo
Carmelo Catalfamo

Reputation: 93

With gulp.dest('.') you say 'here' Try with:

.pipe(gulp.dest('./app/page_a/css/'));

This should be work

Upvotes: 0

Related Questions