Sass gulp:从输出目标路径中删除目录

Sass gulp:从输出目标路径中删除目录,sass,gulp,gulp-sass,Sass,Gulp,Gulp Sass,请帮我大口喝 我有两个srcscss文件夹: 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(

请帮我大口喝

我有两个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
样式1
添加回的原因。因此,您删除了src/scss/styles1/front_page,并将其发送到“`./frontend/css/temp/styles1”


我认为这是一种更好的操作系统使用插件的方式。它允许您根据自己的选择剥离或展平目录。在您的情况下:

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'))

 });
展平({subPath[0,-1]})
将剥离最后一个文件夹,即“首页”


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'))

});