Gulp.js ve globbing modeli kullanarak dosyayı yerinde (aynı hedef) değiştirin

100

.Scss dosyalarını .css dosyalarına dönüştürmeye çalışan (gulp-ruby-sass kullanarak) ve sonra ortaya çıkan .css dosyasını orijinal dosyanın bulunduğu yere yerleştirmeye çalışan bir yutkunma görevim var. Sorun şu ki, globbing modeli kullandığım için orijinal dosyanın nerede saklandığını bilmiyorum.

Aşağıdaki kodda, akışa dokunmak ve akışın okunduğu mevcut dosyanın dosya yolunu bulmak için gulp-tap kullanmaya çalışıyorum:

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));
});

Çıktısına göre console.log(fileLocation), bu kod iyi çalışması gerektiği gibi görünüyor. Bununla birlikte, ortaya çıkan CSS dosyaları beklediğimden bir dizin daha yükseğe yerleştirilmiş görünüyor. Olması gereken yerde project/sass/partials, ortaya çıkan dosya yolu adildir project/partials.

Bunu yapmanın çok daha basit bir yolu varsa, bu çözümü kesinlikle daha çok takdir ederim. Teşekkürler!

— Dan-Nolan
kaynak

156

Şüphelendiğiniz gibi, bunu çok karmaşık hale getiriyorsunuz. Küresel yol için de kullanıldığından, hedefin dinamik olması gerekmez dest. Basitçe, src'yi bulduğunuz temel dizine yönlendirin, bu durumda "sass":

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

Dosyalarınızın ortak bir tabanı yoksa ve bir dizi yol geçirmeniz gerekiyorsa, bu artık yeterli değildir. Bu durumda, temel seçeneği belirtmek istersiniz.

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

— sayılar1311407
kaynak

Ah, harika. Teşekkür ederim. Kaynak için glob kullanmanın kolay bir yolu var mı, ancak her şeyi doğrudan sassklasöre mi yerleştirmek?

— Dan-Nolan

2

Bu benim için işe yaramadı. Yapmam gereken gulp.src("dist/**/*")...gulp.dest("./")

— niftygrifty

@ Dan-Nolan, klasör yapısını düzleştirmenin bir yolu

— gulp

@niftygrifty göre docs o gereken normal bir durumda işe. Bu durumda dosyalar, hesaplanan göreli tabana göre eşleşen küresel yollarına yazılır sass. Belki de buradaki sass eklentisi zaten yolları değiştiriyor?

— sayı1311407

1

Ancak bu, dosyayı / sass içine kaydetmez ve / sass / any / where gibi ilgili alt dizine kaydetmez mi? Dosyaların küresel yola kaydetmesini nasıl sağlayabilirim?

— Mark

68

Bu sayı 1311407'nin gösterdiğinden daha basit. Hedef klasörü belirlemenize gerek yok, sadece kullanın .. Ayrıca, temel dizini ayarladığınızdan emin olun.

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

— NightOwl888
kaynak

8

Bu doğru cevap. Hedef yapısı (yani yapı düzleştirmez) korumak için çalışıyorsanız, sen gerekir gulp.src baz dizini gösterir.

— Gui Ambros

2

Bunu denediğimde, dosyalar globbed yolun altına değil "/" içine kaydediliyor.

— Mark

1

@GuiAmbros'un söylediği, en azından belgelere göre doğru değil . Varsayılan olarak taban, küresel yoldan önceki her şey olarak hesaplanır. Cevabımda taban olarak hesaplanacaktı ./sass, ancak soru çıktının dir'i tuttuğunu belirtiyor sass, bu yüzden dest. Bu yanıt, temel seçeneği kullanarak aynı sonuca ulaşır, ancak yaklaşımlardan hiçbiri yanlış değildir.

— numbers1311407

Bu OP'ın durum CSS işleme, en azından olarak tipik bir içine ihracat beklediğiniz, muhtemelen bu yaygın olmadığını da dikkate değer özellikleri cssdeğil itibaren, dizin veya benzeri sassiçin sass. Bu gibi durumlarda kabul edilen cevap aslında bu alternatiften daha basittir.

— numbers1311407

30

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

İlk olarak burada verilen cevap: https://stackoverflow.com/a/29817916/3834540 .

Bu ileti dizisinin eski olduğunu biliyorum ama yine de google'da ilk sonuç olarak görünüyor, bu yüzden bağlantıyı buraya gönderebilirim diye düşündüm.

— bobbarebygg
kaynak

Bu konu eski ama yanıtlar hala doğru, ancak bu yöntemin biraz daha KURU olduğunu düşünüyorum (biraz daha az verimli ise). Bağlantılı soru aslında destyanlış kullanma sorunuydu. Basitçe yerine verilen Tabii çözümler işe ama ilk seferde doğru yapıyor dest('./')ile dest('./images')aynı sonucu elde ettik, olacaktır.

— numaralar1311407

Diğer çözümün benim için işe yaramamasının nedeni, gulp.src () içinde bir diziye sahip olmamdı, örneğin gulp.src (['sass / **', 'common / sass / **']) ve aradığımda cevap, bulduğum yazı buydu. Muhtemelen bunu daha net hale

— getirmeliydim

Mantıklı. Sizin durumunuzda sorun, yudumun hesaplayacağı ortak bir temelin olmamasıdır. Çözümünüz işe yarıyor, ancak @ NightOwl888 tarafından temeli belirleyerek verilen çözüm de işe yarardı. Kabul edilen cevabın, ortak bir temele sahip olmama durumunu içerecek şekilde güncellenmesi.

— numbers1311407

Kabul edilen cevap bu olmalı! Yalnızca bir dosyaya veya temel yola özgü olan diğerleri değil.

— MrCroft

0

Bu çok yardımcı oldu!

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

— mftohfa
kaynak