फ्लाइट पर LESS फाइलों का Do-it-खुद सर्वर प्रोसेसिंग

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

मुझे क्लाइंट पर LESS फ़ाइलों को संसाधित करने का विकल्प पसंद नहीं आया, क्योंकि बड़ी LESS फ़ाइलों के लिए यह पृष्ठ लोड करते समय ध्यान देने योग्य ठहराव का कारण बनता है। यदि आप ट्विटर बूटस्ट्रैप-ए-लोडिंग के LESS संस्करण का उपयोग कई सेकंड से बढ़ाते हैं, जो बिल्कुल अस्वीकार्य है।
पूर्व-संकलन विकल्प मुझे सूट नहीं करता था क्योंकि मुझे प्रीप्रोसेसर को "रन" करना था। मैंने एक कार्यक्रम देखा जो स्वचालित रूप से कम फ़ाइलों को पुन: उत्पन्न करता है जब वे बदलते हैं, लेकिन यह भुगतान के लिए निकला और केवल मैकओएस के लिए।

मैं चाहता था कि वेब सर्वर द्वारा अनुरोध पर फ्लाई पर संसाधित होने वाली लेस फाइलें और इसलिए, सीएसएस से भी जुड़ा हुआ है। यह दृष्टिकोण ऊपर वर्णित सभी नुकसानों से रहित है। हालाँकि, इस मामले में LESS फ़ाइलों के सिंटैक्स में त्रुटियों का निरीक्षण करना थोड़ा अधिक कठिन है: उन्हें केवल प्रोसेसिंग सर्वर के लॉग में देखा जा सकता है। हालाँकि, LESS फ़ाइल सिंटैक्स में त्रुटियां मेरे लिए अत्यंत दुर्लभ थीं, इसलिए यह समस्या नहीं बनी।

निर्णय

दुर्भाग्य से, मुझे पायथन या जावा (मैं जिन भाषाओं में विकसित कर रहा हूं) में कोई भी LESS फ़ाइल प्रोसेसर नहीं मिला। इसलिए, मैंने केवल नोड.जेएस पर एक छोटा http-सर्वर लिखा है, जो LESS फाइलों के "आधिकारिक" प्रोसेसर के कोड का उपयोग करता है और फाइलों को उड़ने पर संसाधित करता है। इस दृष्टिकोण के साथ, हालांकि, आपको कम फ़ाइलों के वितरण को एक अलग सर्वर पर पुनर्निर्देशित करना होगा, जिसका अर्थ है कि आप बिना nginx के नहीं कर सकते। सिद्धांत रूप में, आप अन्य सर्वर (उदाहरण के लिए lighttpd) का उपयोग कर सकते हैं, लेकिन nginx मेरे करीब है और आगे मैं इसके लिए सभी कॉन्फ़िगरेशन उदाहरणों पर विचार करूंगा।

मैंने एक आधार के रूप में एसआरसी स्क्रिप्ट को लिया - कम फ़ाइलों का कंसोल प्रोसेसर, इसे थोड़ा संशोधित करना और सभी लॉन्च मापदंडों को सहेजना (अनुमति, उदाहरण के लिए, उत्पन्न सीएसएस को संपीड़ित करने के लिए)। सर्वर का स्रोत कोड मैंने लिखा था। यह पोर्ट 1337 से शुरू होता है और किसी भी रिक्वेस्ट को .less फाइल के सापेक्ष पथ के रूप में मानता है जो इसे प्रोसेस और देता है।

इसके बाद, nginx सेट करें ताकि प्राप्त http सर्वर पर सभी कम फ़ाइलों को संसाधित किया जाए:

location ~ \.less$ { proxy_path http://127.0.0.1:1337; } 

वह सब है! अब आप सुरक्षित रूप से अपनी परियोजनाओं में, बूट समय के दौरान भय के बिना और मैन्युअल रूप से प्रीप्रोसेसर को कॉल किए बिना उपयोग कर सकते हैं। नियमित .css की तरह ही .less फाइलें डालें:

 <link rel="stylesheet" type="text/css" href="bootstrap.less"> 

कैशिंग

लड़ाई सर्वर पर प्रत्येक अनुरोध के लिए LESS फ़ाइल को संसाधित करना निश्चित रूप से बहुत महंगा है। यहाँ nginx हमें इसके पीछे सर्वर के उत्तरों को कैश करने का अवसर बचाएगा: इस मामले में, LESS फ़ाइलों को संसाधित करने का परिणाम nginx (फ़ाइल सिस्टम पर) द्वारा निर्दिष्ट समय अवधि के लिए कैश किया जाएगा, उदाहरण के लिए 30 सेकंड। हर 30 सेकंड में एक बार, LESS फ़ाइलों को संसाधित करने से सिस्टम लोड नहीं होता है, और शैलियों के साथ फ़ाइल को अपडेट करते समय 30 सेकंड की देरी आमतौर पर काफी स्वीकार्य होती है (यदि वांछित है, तो आप कम कैश स्टोरेज समय चुन सकते हैं)।

Nginx कॉन्फ़िगरेशन निम्नानुसार बदल जाएगा:

 #   ,   +    # : http://nginx.org/ru/docs/http/ngx_http_proxy_module.html#proxy_cache_path proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=microcache:5m max_size=1000m; server { # ...     # location ~ \.less$ { #     .less proxy_cache microcache; #   (   microcache)    .less  proxy_cache_valid 200 30s; #       200 ()   30  proxy_pass http://127.0.0.1:1337; #    http-   } } 

कदम से कदम निर्देश

आइए अब संक्षेप में, चरणों में विचार करें, इसे स्वयं में तैनात करने के लिए क्या करने की आवश्यकता है:

1. नोड स्थापित करें ।js. लिनक्स पर - रिपॉजिटरी से सेट करें, ऑफसाइट से खसखस ​​और वाइन पर डालें
2. स्थापित करें (यदि पहले से उपयोग नहीं किया गया है) nginx और अपनी साइट को वितरित करने के लिए कॉन्फ़िगर करें
3. गितुब स्रोत लेस प्रोसेसर से डाउनलोड करें
4. हम http सर्वर का स्रोत कोड लेते हैं और इसे बिन उपनिर्देशिका में LESS प्रोसेसर के साथ डाउनलोड किए गए फ़ोल्डर में डालते हैं
5. कम स्रोतों में बिन निर्देशिका में होने के नाते, हम कमांड के साथ http-server शुरू करते हैं
   

    node lessserv --path=/path/to/project/root 

   
   के बाद --पथ = आपके प्रोजेक्ट के रूट का एक रास्ता है, जहां से .less फाइलें वितरित की जाएंगी। सभी प्रसंस्करण त्रुटियों को कंसोल में प्रदर्शित किया जाएगा।
   
6. हम चल रहे http-server के माध्यम से .less फ़ाइलों के लिए सभी अनुरोधों को पुनर्निर्देशित करते हैं
   

    location ~ \.less$ { proxy_path http://127.0.0.1:1337; } 

   
   
7. लड़ाई सर्वर पर, प्रसंस्करण फ़ाइलों के परिणामों के लिए कैशिंग सक्षम करें

संदर्भ

• आधिकारिक कम भाषा पृष्ठ
• नोड.जेएस मुख्य पृष्ठ, जिसमें एक सरल http सर्वर का उदाहरण है
• नग्नेक्स में कैशिंग के बारे में एक लेख