Gulp가 동적 파일 이름을 생성합니다.

Question

일주일에 문제를 해결하려고합니다. 달성하고 싶다, 그 꿀꺽 꿀꺽 거리는 scss의 부모 폴더 이름과 CSS로 scss 파일을 생성합니다. 구조는 다음과 같습니다

assets 
|____css 
| | example1.css 
| | example2.css 
| | example3.css 
| |____components 
|   | test.css 
|____sass 
| |____folder 
| |____components 
| | | test.scss 
| |____layout 
| | |____example1 
| | | | style.scss 
| | |____example2 
| | | | style.scss 
| | |____example3 
| | | | style.scss 

내가이 glob action in Gulp을 시도했지만 동기화가 제대로 작동되지 않으며되지 않습니다. 하지만 꿀꺽 꿀꺽 거리는 폴더를 찾았는데 문제가 해결되었습니다. pathToFolder (이 경우 레이아웃) 폴더 중 하나를 설정하면이 꿀꺽 파일이 좋은 wokring됩니다

var gulp  = require('gulp'); 
var browserSync = require('browser-sync').create(); 
var sass  = require('gulp-sass'); 
var concat  = require('gulp-concat'); 
var path  = require('path'); 
var folders  = require('gulp-folders'); 
var pathToFolder = 'assets/sass/layout'; 

gulp.task('minify-features', folders(pathToFolder, function(folder){ 
    return gulp.src(path.join(pathToFolder, folder, '*.scss')) 
     .pipe(sass()) 
     .pipe(concat(folder + '.css')) 
     .pipe(gulp.dest('assets/css')) 
     .pipe(browserSync.stream()); 
})); 

// Static Server + watching scss files 
gulp.task('serve', ['minify-features'], function() { 
    browserSync.init({ 
     proxy: "mysite.dev" 
    }); 
    gulp.watch("assets/sass/**/*.scss", ['minify-features']).on('change', browserSync.reload); 
}); 
gulp.task('default', ['serve']); 

: 여기 내 작업 gulpfile.js입니다. 그러나 구성 요소 폴더를 생성하지 않습니다.

질문 : 아무도 아이디어를 가지고 있습니까, 어떻게 꿀꺽 꿀꺽 폴더로 해결할 수 있습니까? 아니면 다른 해결책?

Answer 1

마지막으로 내 생각을 끝 냈습니다. 나는 내 결과에 꽤 가깝다. OverZealous answer은 glob를 사용하고있다. 하지만 foreach주기에서 변경을했는데 이름이있는 꿀꺽 꿀꺽 꿀꺽 꿀꺽함이있는 함수입니다. 간단한 자바 스크립트를 삽입하면 조건에 따라 폴더 이름 배열에서 어느 이름을 가져올 지 확인합니다.

if (name === "components") { 
    return gulp.src(projectPath + "/sass/components/*.scss") 
     .pipe(sass()) 
     .pipe(gulp.dest(projectPath + "/css/components")) 
} else { 
    return gulp.src(projectPath + "/sass/layout/" + name + "/*.scss") 
     .pipe(sass()) 
     .pipe(rename(name + ".css")) 
     .pipe(gulp.dest(projectPath + "/css")) 
} 

약간 지저분한 해결책이지만 잘 작동합니다.