问题
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?
回答1:
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'));
来源:https://stackoverflow.com/questions/25552509/rename-file-based-on-regex-in-gulp