] जबकि एक पाठ संपादक वेब विकास के लिए पर्याप्त है, आधुनिक वेबसाइटों के लिए दोहरावदार कार्य महत्वपूर्ण हैं और इष्टतम प्रदर्शन अक्सर निराशाजनक साबित होता है। इनमें शामिल हैं: ट्रांसपिलिंग, फाइल कॉन्टेनेशन, प्रोडक्शन कोड मिनिफिकेशन, और विभिन्न सर्वरों में परिनियोजन। हर परिवर्तन के साथ दोहराए जाने वाले ये कार्य तेजी से बोझिल हो सकते हैं।

सौभाग्य से, gulp.js इन प्रक्रियाओं को स्वचालित करता है। यह लेख विभिन्न सीएसएस कार्यों को स्वचालित करने में अपने आवेदन को प्रदर्शित करता है: छवि अनुकूलन, एसएएसएस संकलन, परिसंपत्ति हैंडलिंग और इनलाइनिंग, स्वचालित विक्रेता उपसर्ग, अप्रयुक्त सीएसएस चयनकर्ताओं को हटाने, सीएसएस मिनिफिकेशन, फ़ाइल आकार रिपोर्टिंग, ब्राउज़र देवटूल के लिए स्रोत मैप पीढ़ी, और स्रोत फ़ाइल परिवर्तन पर लाइव ब्राउज़र। ]

] ] ]

क्यों चुनें? ] यह कोड-आधारित दृष्टिकोण सशर्त आउटपुट संशोधन को सक्षम करते हुए लाभ प्रदान करता है-उदाहरण के लिए, अंतिम तैनाती के दौरान सोर्समैप को हटाना।

• शुरू करना:
] GitHub से उदाहरण परियोजना क्लोन:
• ] सीडी गुलप 4-सीएसएस npm i gulp -cli -g एनपीएम I gulp ]
वैकल्पिक रूप से, एक नई परियोजना बनाएं:
• नोड.जेएस स्थापित करें। ] ] ] ] ] मॉड्यूल स्थापना:
• आवश्यक मॉड्यूल स्थापित करें: ] ] ] एक सरलीकृत उदाहरण छवि अनुकूलन और CSS प्रसंस्करण पर केंद्रित है:
• // gulpfile.js (सरलीकृत उदाहरण) const gulp = आवश्यकता ('gulp'); const imagemin = आवश्यकता ('gulp-imagemin'); const sass = आवश्यकता ('gulp-sass') (आवश्यकता ('sass')); // नोट: DART-SASS का उपयोग करना const postcss = आवश्यकता ('gulp-postcss'); const autoprefixer = आवश्यकता ('autoprefixer'); const cssnano = आवश्यकता ('cssnano'); // छवि कार्य फ़ंक्शन इमेज () { Gulp.SRC ('SRC/Images/*') लौटें .पाइप (इमेजेमिन ()) .pipe (gulp.dest ('बिल्ड/इमेज')); } // सीएसएस कार्य फ़ंक्शन css () { GULP.SRC ('SRC/SCSS/MAIN.SCSS') .pipe (sass ()। on ('त्रुटि', sass.logerror)) .pipe (पोस्टसीएसएस ([ऑटोप्रेफिक्सर (), cssnano ()])))) .pipe (gulp.dest ('बिल्ड/css')); } निर्यात। images = चित्र; निर्यात। CSS = CSS; Exports.default = gulp.parallel (चित्र, CSS); // समानांतर में कार्य चलाएं
] एक अधिक व्यापक

gulpfile.js

में Sourcemaps, Browsersync, और अधिक परिष्कृत Postcss प्लगइन्स जैसी विशेषताएं शामिल होंगी। एक पूर्ण उदाहरण के लिए मूल पाठ का संदर्भ लें। अपनी परियोजना संरचना से मेल खाने के लिए फ़ाइल पथ को अनुकूलित करना याद रखें। कार्यों को निष्पादित करने के लिए अपने टर्मिनल में

gulp

चलाएं। पूर्ण, विस्तृत

gulpfile.js

और आगे स्पष्टीकरण मूल लेख में उपलब्ध हैं।