如何让gulp-rename重命名一个具体的单个文件?
How to make gulp-rename rename a concrete single file?
我从 LESS 文件生成 CSS,并希望为所有生成的 Bootstrap CSS 文件提供一个前缀 "bootsrtap",但不给 bootstrap.css
.所以,我在编译后直接设置了前缀,但是我所有的重命名尝试都失败了。
var gulp = require('gulp'),
less = require('gulp-less'),
watch = require('gulp-watch'),
prefix = require('gulp-autoprefixer'),
plumber = require('gulp-plumber'),
filter = require('gulp-filter'),
rename = require('gulp-rename'),
path = require('path')
;
// ...
gulp.task('build-vendors', function() {
gulp.src(['./public/components/bootstrap/less/theme.less', './public/components/bootstrap/less/bootstrap.less']) // path to less file
.pipe(plumber())
.pipe(less())
.pipe(rename({prefix: 'bootstrap-'}))
.pipe(gulp.dest('./public/css')) // path to css directory
;
});
gulp.task('clean-up', function() {
// const bootstrapFileRenameFilter = filter(['*', 'bootstrap-bootstrap.css']);
gulp.src('./public/css/bootstrap-bootstrap.css')
.pipe(plumber())
// .pipe(bootstrapFileRenameFilter)
.pipe(rename({basename: 'bootstrap.css'}))
.pipe(gulp.dest('./public/css'))
;
});
gulp.task('watch', function() {
gulp.watch('public/less/*.less', ['build-less', 'build-vendors'])
});
// gulp.task('default', ['watch', 'build-less', 'build-vendors']);
gulp.task('default', ['build-less', 'build-vendors', 'clean-up']);
我的期望:
./public/css/bootstrap-theme.css
./public/css/bootstrap.css
我目前得到的:
./public/css/bootstrap-theme.css
./public/css/bootstrap-bootstrap.css
如何将单个文件从 a.foo
重命名为 b.bar
?
gulp-rename
接受一个函数作为重命名的参数。这允许您使用您喜欢的任何标准来定位特定文件以进行重命名。在你的情况下:
gulp.task('build-vendors', function() {
gulp.src(['./public/components/bootstrap/less/theme.less',
'./public/components/bootstrap/less/bootstrap.less'])
.pipe(plumber())
.pipe(less())
.pipe(rename(function(path) {
//rename all files except 'bootstrap.css'
if (path.basename + path.extname !== 'bootstrap.css') {
path.basename = 'bootstrap-' + path.basename;
}
}))
.pipe(gulp.dest('./public/css'));
});
因为你现在只重命名那些你真正想要有 bootstrap-
前缀的文件,你不必事后清理你的烂摊子,可以直接放弃整个 clean
任务一共
我从 LESS 文件生成 CSS,并希望为所有生成的 Bootstrap CSS 文件提供一个前缀 "bootsrtap",但不给 bootstrap.css
.所以,我在编译后直接设置了前缀,但是我所有的重命名尝试都失败了。
var gulp = require('gulp'),
less = require('gulp-less'),
watch = require('gulp-watch'),
prefix = require('gulp-autoprefixer'),
plumber = require('gulp-plumber'),
filter = require('gulp-filter'),
rename = require('gulp-rename'),
path = require('path')
;
// ...
gulp.task('build-vendors', function() {
gulp.src(['./public/components/bootstrap/less/theme.less', './public/components/bootstrap/less/bootstrap.less']) // path to less file
.pipe(plumber())
.pipe(less())
.pipe(rename({prefix: 'bootstrap-'}))
.pipe(gulp.dest('./public/css')) // path to css directory
;
});
gulp.task('clean-up', function() {
// const bootstrapFileRenameFilter = filter(['*', 'bootstrap-bootstrap.css']);
gulp.src('./public/css/bootstrap-bootstrap.css')
.pipe(plumber())
// .pipe(bootstrapFileRenameFilter)
.pipe(rename({basename: 'bootstrap.css'}))
.pipe(gulp.dest('./public/css'))
;
});
gulp.task('watch', function() {
gulp.watch('public/less/*.less', ['build-less', 'build-vendors'])
});
// gulp.task('default', ['watch', 'build-less', 'build-vendors']);
gulp.task('default', ['build-less', 'build-vendors', 'clean-up']);
我的期望:
./public/css/bootstrap-theme.css
./public/css/bootstrap.css
我目前得到的:
./public/css/bootstrap-theme.css
./public/css/bootstrap-bootstrap.css
如何将单个文件从 a.foo
重命名为 b.bar
?
gulp-rename
接受一个函数作为重命名的参数。这允许您使用您喜欢的任何标准来定位特定文件以进行重命名。在你的情况下:
gulp.task('build-vendors', function() {
gulp.src(['./public/components/bootstrap/less/theme.less',
'./public/components/bootstrap/less/bootstrap.less'])
.pipe(plumber())
.pipe(less())
.pipe(rename(function(path) {
//rename all files except 'bootstrap.css'
if (path.basename + path.extname !== 'bootstrap.css') {
path.basename = 'bootstrap-' + path.basename;
}
}))
.pipe(gulp.dest('./public/css'));
});
因为你现在只重命名那些你真正想要有 bootstrap-
前缀的文件,你不必事后清理你的烂摊子,可以直接放弃整个 clean
任务一共