gulp
2 के गुलपज 2 के साथ फ्रंट एंड वर्कफ़्लो के लिए व्यापक गाइड

टिप्पणियों

ब्राउज़र सिंक और स्टाइल और स्क्रिप्ट के लिए वॉचर्स को कॉन्फ़िगर करना

ध्यान दें

यह पृष्ठ ब्राउज़र-सिंक, gulp- वॉच और रन-सीक्वेंस जैसे gulp प्लगइन्स के उपयोग को दिखाता है , और जहाँ से हमने यहाँ लैंड किया था, वहाँ से हमने gulp-वर्कफ़्लो-ऑटोमेशन -1 में जहां हमने छोड़ा था, वहाँ gulp-वर्कफ़्लो-ऑटोमेशन पर चर्चा जारी है । पहले उस पोस्ट से गुजरने पर विचार करें ।

• डिफ़ॉल्ट कार्य
• वॉचडॉग कार्य - मक्खी पर अपनी तैनाती के लिए तैयार संपत्ति को लगातार बनाने के लिए, जब भी कुछ भी छवि | जेएस | सीएसएस विकास के पाठ्यक्रम में परिवर्तन करता है।

हमें ब्राउज़र-सिंक से शुरू करते हैं।

गुल्प वाचडॉग टास्क

हमें वॉचडॉग कार्य के साथ शुरू करते हैं।

लक्ष्य, विकास के दौरान आपके द्वारा किए गए परिवर्तनों को देखना है। किसी भी परिवर्तन, इसी gulp कार्य को ट्रिगर करना चाहिए।

इसके अलावा, हमें एक ऐसी कार्यक्षमता की आवश्यकता है जो ब्राउज़र में आपके परिवर्तनों को सिंक करती है।

ब्राउज़र सिंक

तो, हमें ब्राउज़र सिंक स्थापित करने की आवश्यकता है।

bash $ npm install browser-sync --save-dev

उस आधार के साथ, हम अपने gulpfile.js खोलें और घड़ी की कार्यक्षमता जोड़ें। हमें ब्राउज़र सिंक की आवश्यकता है और इसकी कार्यक्षमता का उपयोग करने के लिए कुछ चर को परिभाषित करें।

गुलाल के शीर्ष पर, नीचे का स्निपेट जोड़ें। छवि संपीड़न घोषणाओं के ठीक नीचे रखें।

इस तरह:

//Browser-sync

var sync = require('browser-sync').create();
var reload = sync.reload;

ब्राउज़र सिंक करने के बाद आपका विकास ब्राउज़र पर हो जाता है, एक साधारण कॉन्फ़िगरेशन है। हमें वॉचडॉग नामक एक कार्य बनाने दें।

इस तरह:

$.task('watchdog', function() {


})

अब, यदि हम यहां ब्राउज़र सिंक विकल्पों के माध्यम से ब्राउज़ करते हैं , और सर्वर सेटिंग की खोज करते हैं, तो हम देख सकते हैं कि यह कितना आसान है।

हमें बस अपने वॉचडॉग कार्य के अंदर नीचे रखने की आवश्यकता है

स्निपेट - 1 - वॉचडॉग बॉयलरप्लेट के अंदर

/*
 Initiate Browser sync
 @documentation - https://www.browsersync.io/docs/options/
 */
 sync.init({
  server: {
    baseDir: "./"
 },
 port: 8000 //change it as required
 });

अपने वॉचडॉग बॉयलरप्लेट के ऊपर ऊपर डालें।

अगला स्निपेट, शैलियों के लिए एक द्रष्टा को परिभाषित करना है, परिवर्तित सीएसएस फ़ाइलों या नए लोगों को पुन: पेश करने के लिए, और स्वचालित रूप से एक ब्राउज़र रीलोड को ट्रिगर करना है।

स्निपेट - 2 - वॉचडॉग बॉयलरप्लेट के अंदर

$.watch(['css/**/*', 'fonts/google/**/*.css'], reload).on('change', function(event) {
console.log(event.type + ':' + event.path)
if (event.type === 'deleted') {
uncache('styles', event.path);
$$.remember.forget('auto-prefixed-stylesheets', event.path);
}
sequence('optimizeStyles')
});

अपने वॉचडॉग बॉयलरप्लेट के ऊपर ऊपर डालें।

इसलिए हम " [fonts/google/**/*.css , /**/*.css ]" अर्थात, की निगरानी कर रहे हैं

फॉन्ट / google के तहत सभी css फाइलें / फोंट / google के तहत सभी css फाइलें / जब कुछ भी बदलता है, या कोई नई फ़ाइल जोड़ी जाती है, तो यह ब्राउज़र की घोषणा में, हमारे gulpfile के शीर्ष पर परिभाषित किए गए रीलोड विधि को ट्रिगर करता है।

नोट: आप देख सकते हैं, कि हमारे पास एक .ऑन इवेंट हैंडलर है जो वॉचर से जुड़ा हुआ है।

$.watch(['css/**/*', 'fonts/google/**/*.css'], reload).on('change', function(event) 

मूल रूप से, कुछ भी CUD (क्रिएट | अपडेट | डिलीट) रीलोड फ़ंक्शन को ट्रिगर करता है, और कॉलबैक फ़ंक्शन के पैरामीटर के रूप में एक ईवेंट ऑब्जेक्ट पास करता है।

कॉलबैक एक महत्वपूर्ण कार्य है, जहां हम परिसंपत्ति हटाने पर बिना कैश के संचालन को प्राप्त कर सकते हैं ।अब ईवेंट ऑब्जेक्ट में पैरामीटर जैसे हैं

• पथ
• टाइप - क्रिएट / अपडेट / डिलीट

यदि कोई परिसंपत्ति हटा दी जाती है, तो हमें यह सुनिश्चित करने की आवश्यकता है कि हमने अपने पहले के मिनिमाइज़ेशन फ़ंक्शंस में बनाए गए कैश को gulp-cached और gulp- याद रखें, अपडेशन की आवश्यकता हो।

हम इसे नीचे दिए गए स्निपेट में संभाल रहे हैं, जो कि बदलाव पर कॉलबैक के अंदर है।

if (event.type === 'deleted') { 
uncache('styles', event.path);
$$.remember.forget('auto-prefixed-stylesheets', event.path);  
}

ध्यान दें

$ -> गल्प के लिए उर्फ

$ $ -> गुल-लोड-प्लगइन्स के लिए उपनाम

आप यह भी देख सकते हैं, कि मेरे पास एक sequence('optimizeStyles'); के बाद मैं खोलना आह्वान लिखा था

अनुक्रम विधि, सुनिश्चित करता है, तुल्यकालिक विधि डिफ़ॉल्ट जावास्क्रिप्ट द्वारा अतुल्यकालिक में चलती है।

इसे स्थापित करना सरल है

कर

bash $ npm install run-sequence

फिर, इसे ब्राउज़र सिंक घोषणा के ठीक नीचे अपने gulpfile में घोषित करें।

var sequence = require('run-sequence');

तो उस समझ के साथ, स्क्रिप्ट के लिए चौकीदार लिखना आसान है। बस अलग अलग दस्ताने!

तो, पहरेदार बायलरप्लेट के अंदर स्टाइल वॉचर के नीचे इस स्निपेट को जोड़ें।

स्निपेट - 3 - वॉचडॉग टास्क बॉयलर के अंदर

/*
on addition or change or deletion of a file in the watched directories
the change event is triggered. An event object with properties like
path,
event-type
is available for perusal passed to the callback

*/
$.watch('js/**/*', reload).on('change', function(event) {
console.log(event.type + ':' + event.path)
if (event.type === 'deleted') {
uncache('scripts', event.path);
$$.remember.forget('linted-scripts', event.path);
}
sequence('optimizeScripts');
});

ध्यान दें

हमने ऊपर अपने स्निपेट्स में दो कार्यों का उपयोग किया।

• uncache
• $ $। याद रखें। नोट पर ध्यान दें:

$ -> गुल के लिए उपनाम

$ $ -> गुल-लोड-प्लगइन्स के लिए उपनाम

हमारे gulpfile.js में कहीं भी फंक्शन को कैश न करें।

/*
Deletes a cache entry
*/
var uncache = function(cacheName, cacheKey) {
        var cache = $$.cached;
        if (cache.caches[cacheName] && cache.caches[cacheName][cacheKey])
            return delete cache.caches[cacheName][cacheKey];
        return false;
    }
    /*
    logs current cache created via gulp-cached
    */
var viewCache = function() {
    console.log($$.cached.caches)
}

एक डिफ़ॉल्ट कार्य को परिभाषित करना

तो अब, एक डिफ़ॉल्ट कार्य को परिभाषित करके, हम gulpfile कोड को पूरा करते हैं।

डिफ़ॉल्ट कार्य वह है जो चलता है, जब आप बस कहते हैं

gulp

अपने प्रोजेक्ट के रूट के तहत कमांड प्रॉम्प्ट पर।

$.task('default', ['generateResponsiveImages'], function() {
 $.start('watchdog');
 console.log('Starting Incremental Build');
});