Gulp.js 및 globbing 패턴을 사용하여 파일을 제자리 (동일한 대상) 수정


99

.scss 파일을 .css 파일로 변환 (gulp-ruby-sass 사용) 한 다음 결과 .css 파일을 원본 파일을 찾은 동일한 위치에 배치하려는 gulp 작업이 있습니다. 문제는 글 로빙 패턴을 사용하고 있기 때문에 원본 파일이 어디에 저장되어 있는지 알 필요가 없다는 것입니다.

아래 코드에서 gulp-tap을 사용하여 스트림을 탭하고 스트림을 읽은 현재 파일의 파일 경로를 알아 내려고합니다.

gulp.task('convertSass', function() {
    var fileLocation = "";
    gulp.src("sass/**/*.scss")
        .pipe(sass())
        .pipe(tap(function(file,t){
            fileLocation = path.dirname(file.path);
            console.log(fileLocation);
        }))
        .pipe(gulp.dest(fileLocation));
});

의 출력을 기반 console.log(fileLocation)으로이 코드는 제대로 작동하는 것 같습니다. 그러나 결과 CSS 파일은 내가 예상했던 것보다 한 디렉토리 위에있는 것 같습니다. 있어야하는 곳에 project/sass/partials결과 파일 경로는 project/partials.

이 작업을 수행하는 훨씬 간단한 방법이 있다면 해당 솔루션을 더욱 감사하게 생각합니다. 감사!

답변:


155

당신이 생각했듯이, 당신은 이것을 너무 복잡하게 만들고 있습니다. globbed 경로도 사용되므로 목적지는 동적 일 필요가 없습니다 dest. src를 가져 오는 동일한 기본 디렉토리 (이 경우 "sass")로 파이프하기 만하면됩니다.

gulp.src("sass/**/*.scss")
  .pipe(sass())
  .pipe(gulp.dest("sass"));

파일에 공통 기반이없고 경로 배열을 전달해야하는 경우 더 이상 충분하지 않습니다. 이 경우 기본 옵션을 지정해야합니다.

var paths = [
  "sass/**/*.scss", 
  "vendor/sass/**/*.scss"
];
gulp.src(paths, {base: "./"})
  .pipe(sass())
  .pipe(gulp.dest("./"));

아, 멋지네요. 감사합니다. 소스에 glob을 사용하는 쉬운 방법도 있지만 모든 것을 sass폴더에 똑바로 넣으십시오 .
Dan-Nolan

2
이것은 나를 위해 작동하지 않았습니다. 내가해야 할 일을했을 gulp.src("dist/**/*")...gulp.dest("./")
niftygrifty

사용하는 폴더 구조의 모습을 평탄화 댄-놀란 하나의 방법 @ 꿀꺽 이름 바꾸기를 참조하십시오 이 질문
numbers1311407

@niftygrifty에 따르면 워드 프로세서해야 정상적인 상황에서 작동합니다. 파일은 자신에 대해 정합 globbed 경로로 작성된 계산 상대 기준 이 경우 sass. 아마도 여기의 sass 플러그인이 이미 경로를 수정하고 있습니까?
numbers1311407

1
그러나 이것은 / sass / any / where와 같은 하위 디렉토리가 아닌 / sass에 파일을 저장하지 않습니까? 파일을 globbed 경로에 저장하려면 어떻게해야합니까?
Mark

68

이것은 숫자 1311407이 이끄는 것보다 간단합니다. 대상 폴더를 지정할 필요가 없습니다 .. 간단히 . 또한 기본 디렉토리를 설정해야합니다.

gulp.src("sass/**/*.scss", { base: "./" })
    .pipe(sass())
    .pipe(gulp.dest("."));

8
이것이 정답입니다. 대상 구조를 유지하려는 경우 (예 : 구조를 평면화하지 않음) gulp.src에 기본 디렉토리를 지정 해야합니다 .
Gui Ambros jul.

2
이렇게하면 파일이 globbed 경로가 아닌 "/"에 저장됩니다.
Mark

1
@GuiAmbros가 말하는 것은 적어도 문서 에 따르면 사실이 아닙니다 . 기본적으로 기본은 globbed 경로 이전의 모든 것으로 계산됩니다. 내 대답에서 기본은으로 계산 ./sass되지만 질문은 출력이 sassdir을 유지한다고 지정 하므로 dest. 이 대답은 기본 옵션을 사용하여 동일한 결과를 얻지 만 두 가지 방법 모두 잘못되었습니다.
numbers1311407 2015-09-24

이는 영업 이익의 상황이 CSS 처리를위한 적어도와 같이 일반적으로 당신이로 수출에 기대, 아마 일반적인 아니라고도 주목할 css되지에서, 디렉토리 또는 유사한 sasssass. 그러한 경우 수용된 대답은 실제로이 대안보다 더 간단합니다.
numbers1311407 152015-09-24

30
gulp.src("sass/**/*.scss")
  .pipe(sass())
  .pipe(gulp.dest(function(file) {
    return file.base;
  }));

원래 대답은 https://stackoverflow.com/a/29817916/3834540 입니다.

이 스레드가 오래되었다는 것을 알고 있지만 여전히 Google의 첫 번째 결과로 표시되므로 여기에 링크를 게시하는 것이 좋습니다.


이 스레드는 오래되었지만 대답은 여전히 ​​올 바릅니다.이 방법은 약간 더 건조하다고 가정합니다 (조금 덜 효율적입니다). 연결된 질문은 실제로 dest잘못 사용하는 문제였습니다 . 단순히 교체, 물론 주어진 솔루션은 작동하지만 바로 처음 그 일을 dest('./')dest('./images')같은 결과를 달성 한 것이다.
numbers1311407 2015

다른 솔루션이 나를 위해 작동하지 않는 이유는 gulp.src () 내부에 배열 (예 : gulp.src ([ 'sass / **', 'common / sass / **']))이 있고 검색했을 때 대답은 내가 찾은 게시물이었습니다. 아마 분명하지만 것을 만들었해야
bobbarebygg

말이된다. 귀하의 경우 문제는 꿀꺽 꿀꺽 계산할 공통 기준이 없다는 것입니다. 귀하의 솔루션은 작동하지만 @ NightOwl888이 제공하는 기본 지정 솔루션도 작동했을 것입니다. 공통 기반이없는 경우를 포함하도록 수락 된 답변을 업데이트합니다.
numbers1311407 2015

이것이 받아 들여진 대답이어야합니다! 하나의 파일 또는 기본 경로에만 해당되는 다른 파일은 아닙니다.
MrCroft

0

이것은 매우 도움이되었습니다!

gulp.task("default", function(){

    //sass
    gulp.watch([srcPath + '.scss', '!'+ srcPath +'min.scss']).on("change", function(file) {
         console.log("Compiling SASS File: " + file.path)
         return gulp.src(file.path, { base: "./" })
        .pipe(sass({style: 'compressed'}))
        .pipe(rename({suffix: '.min'}))
        .pipe(sourcemaps.init())
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(sourcemaps.write('./'))         
        .pipe(gulp.dest(".")); 
    });

    //scripts
    gulp.watch([srcPath + '.js','!'+ srcPath + 'min.js']).on("change", function(file) {
        console.log("Compiling JS File: " + file.path)
        gulp.src(file.path, { base: "./" })
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))       
        .pipe(gulp.dest(".")); 
    });
})
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.