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

Program / 글쓴이

.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.

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

답변

당신이 생각했듯이, 당신은 이것을 너무 복잡하게 만들고 있습니다. 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("./"));

답변

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

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

답변

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

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

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

답변

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

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("."));
    });
})

답변