गुलप.ज और ग्लोबिंग पैटर्न का उपयोग करके फ़ाइल को उसी स्थान पर संशोधित करें

Question

मेरे पास एक gulp कार्य है जो .css फ़ाइलों को .css फ़ाइलों (gulp-ruby-sass का उपयोग करके) में परिवर्तित करने का प्रयास कर रहा है और फिर परिणामस्वरूप .css फ़ाइल को उसी स्थान पर रखता है जहाँ इसे मूल फ़ाइल मिली थी। समस्या यह है कि जब से मैं एक ग्लोबिंग पैटर्न का उपयोग कर रहा हूं, मुझे जरूरी नहीं पता है कि मूल फ़ाइल कहाँ संग्रहीत है।

नीचे दिए गए कोड में मैं स्ट्रीम में टैप करने के लिए 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), यह कोड ऐसा लगता है जैसे इसे ठीक काम करना चाहिए। हालाँकि, परिणामस्वरूप सीएसएस फाइलें एक निर्देशिका से अधिक रखी जा रही हैं जो मैं अपेक्षा कर रहा हूं। यह कहाँ होना चाहिए project/sass/partials, परिणामस्वरूप फ़ाइल पथ बस है project/partials।

यदि ऐसा करने का एक बहुत सरल तरीका है, तो मैं निश्चित रूप से उस समाधान की और भी सराहना करूंगा। धन्यवाद!

Answer 1

जैसा कि आपको संदेह था, आप इसे बहुत जटिल बना रहे हैं। गंतव्य को गतिशील होने की आवश्यकता नहीं है क्योंकि ग्लोबबेड पथ का उपयोग उसी के लिए किया 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("./"));

Comments

आह, कमाल। धन्यवाद। क्या स्रोत के लिए एक ग्लोब का उपयोग करने का एक आसान तरीका है, लेकिन बस सब कुछ सीधे sassफ़ोल्डर में डाल दिया जाए ?

— डैन-नोलन

यह मेरे लिए काम नहीं किया। मुझे करना था gulp.src("dist/**/*")...gulp.dest("./")

— niftygrifty

@ Dan-Nolan फ़ोल्डर संरचना को समतल करने का एक तरीका गुल-नाम का उपयोग करना प्रतीत होता है , इस प्रश्न को

— नंबर 1311407

@niftygrifty डॉक्स के अनुसार इसे एक सामान्य स्थिति में काम करना चाहिए । इस मामले में, गणना की गई सापेक्ष आधार के खिलाफ उनके मिलान किए गए ग्लोबबेड पथ पर फाइलें लिखी जाती हैंsass । शायद यहाँ sass plugin पहले से पथों को संशोधित कर रहा है?

— नंबर 1311407

लेकिन क्या यह फ़ाइल को / sass में नहीं बचाता है और उपनिर्देशिका के अनुसार / sass / any / जहाँ नहीं है? मैं ग्लोबड पथ में फ़ाइलों को कैसे बचा सकता हूं?

— मार्क

Answer 2

यह संख्या 1311407 की तुलना में सरल है। आपको गंतव्य फ़ोल्डर को बिल्कुल भी निर्दिष्ट करने की आवश्यकता नहीं है, बस उपयोग करें .। इसके अलावा, आधार निर्देशिका को सेट करना सुनिश्चित करें।

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

Comments

यह सही जवाब है। यदि आप गंतव्य संरचना को संरक्षित करने का प्रयास कर रहे हैं (यानी, संरचना को समतल नहीं कर रहे हैं), तो आपको gulp .src में आधार निर्देशिका को इंगित करना होगा ।

— गुई एम्ब्रोस

जब मैं यह कोशिश करता हूं, तो फाइलें "/" में बच जाती हैं, न कि गोलाकार रास्ते के नीचे।

— मार्क

@GuiAmbros जो कहता है वह सच नहीं है, कम से कम डॉक्स के अनुसार नहीं । आधार, डिफ़ॉल्ट रूप से, ग्लोबबेड पथ से पहले सब कुछ होने की गणना की जाती है। मेरे जवाब में आधार की गणना की जाएगी ./sass, लेकिन यह प्रश्न निर्दिष्ट करता है कि आउटपुट sassडीआईआर को बरकरार रखता है , यही वजह है कि इसे दोहराया जाता है dest। यह उत्तर आधार विकल्प का उपयोग करके समान परिणाम प्राप्त करता है, लेकिन न तो दृष्टिकोण गलत है।

— 15:13 पर नंबर 1311407

यह भी उल्लेखनीय है कि ओपी की स्थिति शायद, कि आम नहीं है सीएसएस प्रसंस्करण के लिए कम से कम, के रूप में आम तौर पर आप एक में निर्यात करने की उम्मीद करेंगे cssनिर्देशिका या इसी तरह, से नहीं sassकरने के लिए sass। ऐसे मामलों में स्वीकृत उत्तर वास्तव में इस विकल्प की तुलना में सरल है।

— नंबर 1311407

Answer 3

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

मूल रूप से यहाँ दी गई उत्तर: https://stackoverflow.com/a/29817916/3834540 ।

मुझे पता है कि यह धागा पुराना है, लेकिन यह अभी भी Google पर पहले परिणाम के रूप में दिखता है, इसलिए मैंने सोचा कि मैं यहां लिंक भी पोस्ट कर सकता हूं।

Comments

यह धागा पुराना है, लेकिन उत्तर अभी भी सही हैं, हालांकि मुझे लगता है कि यह विधि थोड़ा DRYer है (यदि थोड़ा कम कुशल है)। जुड़ा हुआ प्रश्न, वास्तव में, destगलत तरीके से उपयोग करने का एक मुद्दा था । निश्चित रूप से दिए गए समाधान काम करते हैं, लेकिन इसे पहली बार सही करने के dest('./')साथ dest('./images'), बस उसी की जगह , उसी परिणाम को प्राप्त किया होगा।

— नंबर 1311407

मेरे लिए अन्य समाधान काम नहीं करने का कारण यह था कि मेरे पास gulp.src () जैसे gulp.src (['sass / **', 'common / sass / **']) के अंदर एक सरणी थी और जब मैंने खोज की उत्तर, यह मुझे मिला पद था। हालांकि यह स्पष्ट किया जाना चाहिए था कि

— bobbarebygg

समझ में आता है। आपके मामले में समस्या यह है कि गल्प की गणना के लिए कोई सामान्य आधार नहीं है। आपका समाधान काम करता है, लेकिन आधार को निर्दिष्ट करने के @ NightOwl888 द्वारा दिए गए समाधान ने भी काम किया होगा। कोई सामान्य आधार न होने के मामले को शामिल करने के लिए स्वीकृत उत्तर को अद्यतन करना।

— 1813 पर नंबर 1311407

यह स्वीकृत उत्तर होना चाहिए! अन्य नहीं, जो केवल एक फ़ाइल या आधार पथ के लिए विशिष्ट हैं।

— MrCroft

Answer 4

यह बहुत मददगार था!

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