使用gulp-sass,除了直接父目录外,如何保留我的sass文件的文件夹结构? [英] Using gulp-sass, how do I preserve the folder structure of my sass files except for the immediate parent directory?
问题描述
I have a project with multiple folders that contain sass files:
脚本
└──app1
└──sass
└──base.scss
└──app2
└──sass
└── base.scss
我也有一个编译这些 .scss
文件使用 gulp-sass
和 gulp-concat-css
:
I also have a gulp task that compiles those .scss
files using gulp-sass
and gulp-concat-css
:
gulp.task('build:sass', () =>
gulp.src([
'scripts/**/*.scss'
])
.pipe(plugins.sass().on('error', plugins.sass.logError))
.pipe(plugins.concatCss('bundle.css'))
.pipe(gulp.dest('dist'))
);
现在,上面的任务只是创建 bundle.css
dist 文件夹:
Right now, the above task just creates bundle.css
into the dist
folder:
|── dist
└── bundle.css
我想要发生的是这种情况,其中除了 sass
文件夹现在
What I'd like to have happen is this, where the initial folder structure is preserved, except for the sass
folder is now css
.
|── dist
└── scripts
└── app1
└── css
└── bundle.css
└── app2
└── css
└── bundle.css
推荐答案
您可以使用 gulp-flatmap
插件解决此问题:
You can use the gulp-flatmap
plugin to solve this:
var path = require('path');
gulp.task('build:sass', () =>
gulp.src('scripts/app*/')
.pipe(plugins.flatmap((stream, dir) =>
gulp.src(dir.path + '/**/*.scss')
.pipe(plugins.sass().on('error', sass.logError))
.pipe(plugins.concatCss('css/bundle.css'))
.pipe(gulp.dest('dist/' + path.basename(dir.path)))
))
);
这会选择所有的应用程序
目录和然后将这些目录中的每一个映射到一个新的流中,在该流中该特定目录中的所有 .scss
文件被连接成一个 bundle.css
file。
This selects all of your app
directories and then maps each of those directories to a new stream in which all .scss
files in that particular directory are concatenated into a single bundle.css
file.
这篇关于使用gulp-sass,除了直接父目录外,如何保留我的sass文件的文件夹结构?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!