Ubah file di tempat (tujuan yang sama) menggunakan Gulp.js dan pola globbing

99

Saya memiliki tugas gulp yang mencoba untuk mengubah file .scss menjadi file .css (menggunakan gulp-ruby-sass) dan kemudian menempatkan file .css yang dihasilkan ke tempat yang sama itu menemukan file aslinya. Masalahnya adalah, karena saya menggunakan pola globbing, saya belum tentu tahu di mana file aslinya disimpan.

Pada kode di bawah ini, saya mencoba menggunakan gulp-tap untuk masuk ke aliran dan mencari tahu jalur file dari file saat ini yang dibaca:

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

Berdasarkan keluaran dari console.log(fileLocation), kode ini sepertinya berfungsi dengan baik. Namun, file CSS yang dihasilkan tampaknya ditempatkan satu direktori lebih tinggi dari yang saya harapkan. Di mana seharusnya project/sass/partials, jalur file yang dihasilkan hanya project/partials.

Jika ada cara yang lebih sederhana untuk melakukan ini, saya pasti akan lebih menghargai solusi itu. Terima kasih!

— Dan-Nolan
sumber

155

Seperti yang Anda duga, Anda membuat ini terlalu rumit. Tujuan tidak perlu dinamis karena jalur globbed juga digunakan untuk itu dest. Cukup gunakan pipa ke direktori dasar yang sama dengan tempat Anda melakukan globbing src, dalam hal ini "sass":

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

Jika file Anda tidak memiliki basis yang sama dan Anda perlu meneruskan serangkaian jalur, ini tidak lagi cukup. Dalam kasus ini, Anda ingin menentukan opsi dasar.

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

— nomor 1311407
sumber

Ah, luar biasa. Terima kasih. Apakah ada juga cara mudah untuk menggunakan glob sebagai sumbernya, tetapi letakkan semuanya di sassfolder?

— Dan-Nolan

2

Ini tidak berhasil untuk saya. Saya harus melakukan gulp.src("dist/**/*")...gulp.dest("./")

— niftygrifty

@ Dan-Nolan salah satu cara untuk meratakan struktur folder terlihat menggunakan gulp-rename , lihat pertanyaan ini

— numbers1311407

@niftygrifty Menurut dokumen itu harus bekerja dalam situasi normal. File ditulis ke jalur globbed yang cocok dengan basis relatif yang dihitung , dalam kasus ini sass. Mungkin plugin sass di sini sudah memodifikasi jalurnya?

— numbers1311407

1

Tetapi bukankah ini menyimpan file di / sass dan tidak di subdirektori yang sesuai seperti / sass / any / where? Bagaimana cara menyimpan file di jalur globbed?

— Tandai

68

Ini lebih sederhana daripada yang dihasilkan number1311407. Anda tidak perlu menentukan folder tujuan sama sekali, cukup gunakan .. Juga, pastikan untuk mengatur direktori dasar.

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

— NightOwl888
sumber

8

Ini adalah jawaban yang benar. Jika Anda mencoba untuk mempertahankan struktur tujuan (yaitu, tidak meratakan struktur), Anda harus menunjukkan direktori dasar di gulp.src.

— Gui Ambros

2

Ketika saya mencoba ini, file disimpan di "/" dan tidak di bawah jalur globbed.

— Tandai

1

Apa yang dikatakan @GuiAmbros tidak benar, setidaknya tidak menurut dokumen . Basis, secara default, dihitung menjadi segalanya sebelum jalur glob. Dalam jawaban saya, basis akan dihitung menjadi ./sass, tetapi pertanyaannya menentukan bahwa output mempertahankan sassdir, itulah sebabnya ini diulang di dest. Jawaban ini mencapai hasil yang sama dengan menggunakan opsi dasar, tetapi tidak ada pendekatan yang salah.

— numbers1311407

Perlu juga dicatat bahwa situasi OP mungkin tidak begitu umum, setidaknya untuk pemrosesan CSS, seperti yang biasanya Anda harapkan untuk mengekspor ke cssdirektori atau serupa, bukan dari sasske sass. Dalam kasus seperti itu, jawaban yang diterima sebenarnya lebih sederhana daripada alternatif ini.

— numbers1311407

30

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

Awalnya jawaban diberikan di sini: https://stackoverflow.com/a/29817916/3834540 .

Saya tahu utas ini sudah tua tetapi masih muncul sebagai hasil pertama di google jadi saya pikir saya sebaiknya memposting tautan di sini.

— bobbarebygg
sumber

Utas ini sudah tua tetapi jawabannya masih benar, meskipun saya kira metode ini sedikit lebih KERING (jika sedikit kurang efisien). Pertanyaan terkait, sebenarnya, adalah masalah penggunaan yang destsalah. Tentu solusi yang diberikan berhasil, tetapi melakukannya dengan benar pada kali pertama, hanya menggantinya dest('./')dengan dest('./images'), akan mencapai hasil yang sama.

— nomor 1311407

Alasan solusi lain tidak berhasil untuk saya adalah karena saya memiliki array di dalam gulp.src () misalnya gulp.src (['sass / **', 'common / sass / **']) dan ketika saya mencari jawabannya, ini adalah postingan yang saya temukan. Mungkin seharusnya membuatnya lebih jelas

— bobbarebygg

Masuk akal. Dalam kasus Anda, masalahnya adalah tidak ada dasar umum untuk menghitung tegukan. Solusi Anda berfungsi, tetapi solusi yang diberikan oleh @ NightOwl888 untuk menentukan basis akan bekerja juga. Memperbarui jawaban yang diterima untuk memasukkan kasus tidak memiliki dasar yang sama.

— nomor1311407

Ini harus menjadi jawaban yang diterima! Bukan yang lain, yang spesifik hanya untuk satu file atau ke jalur dasar.

— MrCroft

0

Ini sangat membantu!

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