LumeCMS में WebP रूपांतरण करना
नमस्ते, मैं अक्षम हूँ।
चूंकि मैं अब तक वर्डप्रेस का उपयोग कर रहा था, इसलिए वेबपी रूपांतरण एक प्लगइन स्थापित करके और आंतरिक रूप से इमेजमैजिक चलाकर आसानी से किया जाता था, लेकिन ल्यूमसीएमएस में ऐसी कोई सुविधा मौजूद नहीं है।
हो सकता है कि यह ल्यूम प्लगइन के साथ संभव हो, लेकिन अंततः, छवि प्रसंस्करण की दक्षता के लिए, सी में लिखे गए किसी चीज़ को निष्पादित करना अधिक तेज़ और कुशल है।
Nginx-साइड स्क्रिप्ट के साथ यह असंभव नहीं है, लेकिन चूंकि मैं रिवर्स प्रॉक्सी भी कर रहा हूँ, इसलिए मुझे अन्य चीजें भी लागू करनी पड़तीं, और मुझे रिवर्स प्रॉक्सी सर्वर के बहुत सीमित संसाधनों, जो कि 1vCPU Mem 1GB Disk 25GB हैं, के भीतर इसे जबरदस्ती करने की आवश्यकता महसूस नहीं हुई।
इसके अलावा, ऐसा लगता है कि कुछ लोग आंतरिक रूप से Lua स्क्रिप्ट चलाकर इसे संभव बनाते हैं। Nginx+Lua+libwebp के साथ सर्वर छवियों का स्वचालित WebP रूपांतरण प्राप्त करना
नुकसान यह है कि यह स्क्रिप्ट अनुरोध के समय निष्पादित होती है, इसलिए ऐसा लगता है कि इसमें संसाधनों के केंद्रीकरण की संभावना है।
npm के लिए एक रैपर cwebp-bin नाम का लगता है, लेकिन वास्तव में जिसकी आवश्यकता है वह छवि रूपांतरण और निर्मित स्थैतिक साइट की HTML फ़ाइलों में छवि पथों को फिर से लिखना है।
इसलिए, बैकएंड प्रक्रिया के रूप में, मैं अपने द्वारा बनाए गए init डेमॉन स्क्रिप्ट के भीतर एक शेल स्क्रिप्ट चलाऊंगा जो वेबपी में परिवर्तित होती है, जो ल्यूम परिवर्तनों की निगरानी करती है और स्वचालित रूप से निर्माण करती है।
इसके अलावा, मैं libvips का उपयोग नहीं कर रहा हूँ। चूंकि libvips का WebP रूपांतरण आंतरिक रूप से केवल libwebp का उपयोग करता है, और यह cwebp के समान है जिसे apt आदि के माध्यम से आसानी से स्थापित किया जा सकता है, इसलिए मैं cwebp के साथ रूपांतरण करूंगा।
रूपांतरण के लिए शेल स्क्रिप्ट
नीचे दिखाए अनुसार, डुप्लिकेट पैटर्न को छोड़कर, छवि फ़ाइलों को WebP में परिवर्तित किया जाता है।
#!/bin/bash
# निगरानी करने वाली निर्देशिका
SOURCE_DIR="/var/www/html/soulmining/src/uploads"
# WebP आउटपुट निर्देशिका
DEST_DIR="/var/www/html/soulmining/src/uploads"
# रूपांतरण के लिए एक्सटेंशन
EXTENSIONS=("png" "jpg" "jpeg")
# WebP गुणवत्ता सेटिंग (0-100)
QUALITY=80
# आवश्यक कमांड की जाँच करें
command -v cwebp >/dev/null 2>&1 || { echo >&2 "cwebp कमांड नहीं मिला। कृपया इसे स्थापित करें।"; exit 1; }
# यदि आउटपुट निर्देशिका मौजूद नहीं है तो बनाएँ
mkdir -p "$DEST_DIR"
# फ़ाइल को संसाधित करने का फ़ंक्शन
process_file() {
local file="$1"
local filename=$(basename "$file")
local name="${filename%.*}"
local dest_file="$DEST_DIR/${name}.webp"
# पहले से परिवर्तित फ़ाइलों को छोड़ दें
if [ -f "$dest_file" ]; then
echo "छोड़ा गया: $filename (पहले से परिवर्तित)"
return
fi
# WebP में परिवर्तित करें
cwebp -q $QUALITY "$file" -o "$dest_file"
if [ $? -eq 0 ]; then
echo "रूपांतरण सफल: $filename -> ${name}.webp"
else
echo "रूपांतरण विफल: $filename"
fi
}
# मुख्य प्रक्रिया
for ext in "${EXTENSIONS[@]}"; do
find "$SOURCE_DIR" -type f -name "*.$ext" | while read file; do
process_file "$file"
done
done
echo "प्रक्रिया पूरी हुई"
इसे init डेमॉन के c/initme-watcher`](httpithub.cturame-watcher) में जोड़ें।
#!/bin/bash
### BEGIN INIT INFO
# Provides: lume-watcher
# Required-Start: $remote_fs $syslog
# Required-Stop: $remote_fs $syslog
# Default-Start: 2 3 4 5
# Default-Stop: 0 1 6
# संक्षिप्त विवरण: निर्देशिका की निगरानी करता है और ल्यूम कार्य को ट्रिगर करता है
# विवरण: निर्दिष्ट निर्देशिका की निगरानी करता है और परिवर्तन का पता चलने पर डिनो ल्यूम कार्य को ट्रिगर करता है।
### END INIT INFO
WATCHED_DIR="/var/www/html/soulmining/src/"
COMMAND="/home/haturatu/.deno/bin/deno task lume --dest=site"
CONV_WEBP="/opt/sh/webp.sh"
~~~
छोड़ा गया
~~~
# निगरानी शुरू करें
monitor_directory() {
inotifywait -m -r -e modify,create,delete "$WATCHED_DIR" | while read -r directory events filename; do
echo "$(date): परिवर्तन का पता चला" >> "$LOG_FILE"
last_run_time=$(get_last_run_time)
now=$(current_time)
if [ $((now - last_run_time)) -ge $COOLDOWN_TIME ]; then
check_and_rotate_log
echo "$(date): कमांड निष्पादित कर रहा है" >> "$LOG_FILE"
sleep 0
cd $OUTPUT_ROOT_DIR || exit
$CONV_WEBP >> "$LOG_FILE" 2>&1
$COMMAND >> "$LOG_FILE" 2>&1
cd ~ || exit
set_last_run_time
else
echo "$(date): कूलडाउन के कारण कमांड निष्पादित नहीं किया गया" >> "$LOG_FILE"
fi
done
}
~~~
आगे छोड़ा गया
सख्ती से कहें तो, इस init डेमॉन के मामले में, यह लक्ष्य निर्देशिका के भीतर सभी परिवर्तनों का पता लगाता है, इसलिए केवल एक छवि अपलोड करने से ही पुनर्निर्माण शुरू हो जाएगा, लेकिन ठीक है।
यदि आप ऐसा करना चाहते हैं, तो inotifywait निष्पादन विकल्प को --exclude "dth" के रूप में निर्दिष्ट करें।
_config.ts में जोड़ें
खैर, अभी भी काम बाकी है।
जैसा कि है, ल्यूम के साथ निर्मित होने पर HTML फ़ाइलों में पथ मूल छवियों के पथों को निर्दिष्ट करते हैं।
तो, आइए इसे निर्माण के दौरान फिर से लिखें।
import { walk } from "httpeno.lad/d.ts";
~~~
छोड़ा गया
~~~
site.addEventListener("afterBuild", async () => {
const buildDir = site.dest() // बिल्ड आउटपुट निर्देशिका
for await (const entry of walk(buildDir, { exts: [".html"] })) {
if (entry.isFile) {
let content = await Deno.readTextFile(entry.path);
// URL को .webp में बदलने के लिए रेगुलर एक्सप्रेशन
const regex rcload"'\s]+\.(png|jpe?g|gif;
content = content.replace(regex, (match) => {
return match.replac(png|jpe?g|gif '.webp');
});
await Deno.writeTextFile(entry.path, content);
console.log(`Processed: ${entry.path}`);
}
}
});
ईमानदारी से कहूं तो, यह एक रहस्य है कि मैंने सोचा था कि lume-watcher के भीतर sed के साथ इसे फिर से लिखना छोटा, तेज़ और आसान होगा।
वैसे, ल्यूम का -w विकल्प स्थिर नहीं है
मेरे पास एक डेमॉन चल रहा है, लेकिन ल्यूम आधिकारिक तौर पर भी एक वॉच सुविधा प्रदान करता है, इसलिए यदि आप इसे -w विकल्प के साथ deno task lume -w के रूप में शुरू करते हैं, तो आप एक साधारण सर्वर का उपयोग किए बिना हर बार फ़ाइल बदलने पर HTML उत्पन्न कर सकते हैं, लेकिन यह स्थिर नहीं है।
यह मेरे वातावरण में अक्सर क्रैश हो जाता था।
LumeCMS में ही, cms रिपॉजिटरी में मौजूद apteme.ts के भीतर
Start the watcher
const watcher = site.getWatcher();
deno-lint-ignore no-explicit-any
watcher.addEventListener("change", async (event: any) => {
const files = event.files!;
await site.update(files);
dispatch("previewUpdated");
});
watcher.start();
द्वारा बुलाया जा रहा है।
await site.update(files);
यह वही हिस्सा लगता है।
चूंकि इसे LumeCMS कोड के भीतर से बुलाया जा रहा है, मुझे लगता है कि Lume स्वयं भी वही होना चाहिए, लेकिन मुझे आश्चर्य है कि ऐसा क्यों है।
तो बस इतना ही। फिर मिलेंगे।