올바른 꿀꺽 목적지

Question

나는 글로벌 및 로컬 버전 3.9.1 내 프로젝트를 처음 구성하고 같은 꿀꺽 시계-작업을 설정할 꿀꺽 한 :

var gulp = require('gulp'); 
var uglify = require('gulp-uglify'); 
var concat = require('gulp-concat'); 
var minifyCss = require('gulp-minify-css'); 
var autoprefixer = require('gulp-autoprefixer'); 
var sass = require('gulp-sass'); 

// vars 
var SCSS_PATH ='styles/**/*.scss'; 
var DIST_CSS_PATH ='css/'; 

// Styles for SCSS 
gulp.task('styles', function() { 
    return gulp.src(SCSS_PATH) 
    .pipe(sass()) 
    .pipe(minifyCss()) 
    .pipe(autoprefixer()) 
    .pipe(gulp.dest(DIST_CSS_PATH)); 
}); 

// Watch-Task 
gulp.task('watch', function() { 
    gulp.watch(SCSS_PATH, ['styles']) 
}); 

이제 내 시계 작업이 실행 성공적으로 축소되고 접두사가 붙은 CSS 파일을 만듭니다. 하지만 css/local.css/sw.css에서 생성 된 것은 분명하지 않습니다. 내가 원하는 것은 무엇입니까? css/sw.css 내가 뭘 잘못했는데 왜 그런가요?

Answer 1

globs (**)를 사용하면 원본 폴더 구조가 유지됩니다. gulp.src 및 gulp.dest의 기본 자료를 선택할 수도 있습니다 (here).

그러나 원하는 것은 폴더 구조를 평탄화하는 것입니다. gulp-flatten을 사용하면됩니다.

var gulp = require('gulp'); 
var uglify = require('gulp-uglify'); 
var concat = require('gulp-concat'); 
var minifyCss = require('gulp-minify-css'); 
var autoprefixer = require('gulp-autoprefixer'); 
var sass = require('gulp-sass'); 
var flatten = require('gulp-flatten'); 

// vars 
var SCSS_PATH ='styles/**/*.scss'; 
var DIST_CSS_PATH ='css/'; 

// Styles for SCSS 
gulp.task('styles', function() { 
    return gulp.src(SCSS_PATH) 
    .pipe(sass()) 
    .pipe(minifyCss()) 
    .pipe(autoprefixer()) 
    .pipe(flatten()) 
    .pipe(gulp.dest(DIST_CSS_PATH)); 
}); 

// Watch-Task 
gulp.task('watch', function() { 
    gulp.watch(SCSS_PATH, ['styles']) 
}); 

난 정말 당신의 코드를 확인하지 않았지만, 내 빌드 시스템 중 하나에서 근무 :

그것은이 같은 무언가로 끝날 것입니다.