Say I have a LESS CSS directory structure like this:
less/
core/
_main.less
header.less
body.less
footer.less
contact/
_main.less
form.less
details.less
I want to write a Gulp task that will look for the _main.less
files in each subdirectory of the less/
dir, pass this to gulp-less and write the output to the css/
dir like this:
css/
core.css
contact.css
Because _main.less
includes the other files in it's directory, only the _main.less
files will have to be parsed, but I want the output file to have the name of the directory it's in.
So far I have this:
gulp.src('less/*/*/_main.less')
.pipe(less())
.pipe(gulp.dest('css'));
But this will create a directory structure like this:
css/
core/
_main.css
contact/
_main.css
But that's not what I want. I was thinking to use a regex to match the directory name, get this back in a matches
var, and rename the file accordingly. Something like this:
gulp.src(/less\/[^\/]+\/([^\/]+)\/_main.less/)
.pipe(less())
.pipe(rename(function(context) {
context.src.matches[1] + '.css'
}))
.pipe(gulp.dest('css'));
This code is just an example. I can't figure out how to do something like this, or if it's even possible.
Is this possible? If so, how?
You look like you already have this, but maybe didn't see the gulp-rename
plugin?
I don't even think you'll need to use a RegExp
, something like this should work:
var rename = require('gulp-rename'),
path = require('path'); // node Path
//...
gulp.src('less/**/_main.less')
.pipe(less())
.pipe(rename(function(filepath) {
// replace file name to that of the parent directory
filepath.basename = path.basename(filepath.dirname);
// remove parent directory from relative path
filepath.dirname = path.dirname(filepath.dirname);
// leave extension as-is
}))
.pipe(gulp.dest('css'));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With