请帮助我进行Gulp配置
我有两个src scss
文件夹:
styles1/
styles2/
在每个文件夹中,我具有用于各个站点页面的下一个结构:
styles1/front_page/front.page.scss - root file for front page
styles1/front_page/sections/ - front page sections that are impoted in root file(front.page.scss)
我的吞噬任务看起来像这样:
gulp.task('sass-dev', function(done) {
return gulp.src(['src/scss/**/*.page.scss'])
.pipe(sass({outputStyle:'expanded'}).on('error',sass.logError))
.pipe(gulp.dest('./frontend/css/temp/'))
});
以这种方式,我得到带有下一个路径的输出文件:
./frontend/css/temp/styles1/front_page/front.page.css
但是我需要
./frontend/css/temp/styles1/front.page.css
更多预期结果示例:
./frontend/css/temp/styles1/about.page.css
./frontend/css/temp/styles1/contact.page.css
./frontend/css/temp/styles2/front.page.css
./frontend/css/temp/styles2/profile.page.css
是否可以这样配置输出?
谢谢!
有多种方法可以完成此操作。这是三个:
gulp.task('sass-dev', function (done) {
return gulp.src(['src/scss/**/*.page.scss'], {base: 'src/scss/styles1/front_page' })
.pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
.pipe(gulp.dest('./frontend/css/temp/styles1')) // use with base option, works
});
使用base
选项-这基本上是在最终目的地中设置您不需要的原因,这就是gulp.dest
重新添加styles1
的原因。因此,您消除了"src/scss/styles1/front_page
并发送到`'./frontend/css/temp/styles1'。
我认为使用gulp-flatten插件的更好方法。它允许您根据需要剥离或展平目录。您的情况:
const flatten = require("gulp-flatten");
gulp.task('sass-dev', function (done) {
return gulp.src(['src/scss/**/*.page.scss'])
.pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError)
.pipe(flatten({ subPath: [0, -1] }))
.pipe(gulp.dest('./frontend/css/temp'))
});
[flatten({ subPath[0, -1] })
将删除最后一个文件夹,即'front_page'。
const rename = require("gulp-rename");
const path = require("path");
gulp.task('sass-dev', function (done) {
return gulp.src(['src/scss/**/*.page.scss'])
.pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
.pipe(rename(function (file) {
let temp = path.dirname(file.dirname);
file.dirname = temp;
}))
.pipe(gulp.dest('./frontend/css/temp'))
});