اختاپوس خسته

یادداشت‌هایی پیرامون کد، زندگی و دوستان

توسعهٔ وب از دید یک گیگتوپوس

به‌دلایلی مجبور هستم سایت شرکتمون رو خودم طراحی کنم. همیشه از طراحی وب بدم می‌اومده. و این کار برام چندان آسون نیست. به نظر من روش‌ها و ابزارهایی که اکثر توسعه‌دهنده‌های وب ایرانی استفاده می‌کنن مشکلاتی داره. سعی کردم این مشکلات رو حل کنم و در آخر کار به‌جایی رسیدم که از سبک کاری متداول دیگه استفاده نمی‌کنم و روش خودم رو ابداع کردم :) اما روش متداول چیه؟ خوب معلومه! بدترین کارهای ممکن و تحمیل بار روی پردازش، زمان و مخصوصاً ترافیک. یک طراح وب معمولاً این‌طوری کار می‌کنه:

۱. هیچ خبری از گیت نیست. مدیریت نسخه‌ها و پیشرفت پروژه دستی انجام میشه.
۲. برای ارسال و دریافت فایل‌ها روی سرور از cpanel یا اینترفیس‌های تحت وب دیگه‌ای استفاده میشه. (اگر طراح خیلی حرفه‌ای باشه از FileZilla یا چیزهای مشابه :D )
۳. برای مدیریت پایگاه داده (که معمولاً MySQL هست) از رابط‌های پرهزینه مثل phpMyAdmin استفاده میشه.
۴. کارایی و سرعت مدنظر گرفته نمیشن. (چون به نظر ایشون قابل چشم‌پوشی هستند.)

سبک کاری توسعه‌دهنده‌های وب دو تا ایراد اساسی داره. اول این که با هر تغییر کوچکی توی فایل‌هاشون، کل اون فایل رو دوباره آپلود می‌کنن. با این کار پهنای باند زیادی هدر میره. دوم این که برای قابل فهم بودن کد اون رو توسط IDE به شکل کامل و شکیل indent می‌کنن. یعنی هرجایی که لازم باشه، به هر اندازه‌ای که با استفاده از تب یا فاصله تورفتگی ایجاد می‌کنن، و این کار خوبه ولی هدررفت حجم خیلی زیادی رو داره.

ایدهٔ کلی من برای توسعهٔ وب مشابه کاری هست که با گیت برای پروژه‌های واقعی انجام میدم:

۱. توسعه بده.
۲. تغییرات رو (دقت کنید! فقط تغییرات رو) بفرست روی سرور.

بعد از یک روز کاری تونستم تمام روال‌های مربوطه رو اتوماتیک کنم و براش یه برنامه نوشتم. این پست در مورد این برنامه و نحوهٔ استفاده از اون هست.

صورت‌مسأله

ایدهٔ اصلی اینه که برنامه‌ای داشته باشیم که برای یک وبسایت (که داریم طراحی‌ش می‌کنیم) کارهای زیر رو انجام میده:
۱. یک رپوزیتوری گیت روی سرور و یکی هم توی دایرکتوری محلی ایجاد می‌کنه.
۲. با هر بار تغییر تمام فایل‌ها رو فشرده می‌کنه (الان میگم فشرده‌سازی یعنی چی) و با استفاده از گیت، تغییرات ایجاد شده رو می‌فرسته به سرور.
۳. تمام تغییرات مربوط به فشرده‌سازی رو به حالت عادی برمی‌گردونه.

برنامه‌ای می‌خوایم که تمام موارد ۱ تا ۳ مذکور در بالا رو برای تمام فایل‌های سایتمون انجام بده.

گیت روی FTP

هدف اینه که از گیت برای مدیریت پروژه استفاده کنیم و خود سایت نهایی (فایل‌های روی سرور) رو هم رپوزیتوری مقصد درنظر بگیریم. متأسفانه سرویس‌های هاستینگ برنامهٔ گیت رو نصب نمی‌کنن و به ما هم اجازه نمیدن که برنامه‌ای رو نصب کنیم. و خوشبختانه گیت می‌تونه روی FTP اجرا بشه! یعنی بدون نیاز به وجود برنامهٔ گیت روی سرور مقصد، شما تنها با استفاده از پروتکل FTP می‌تونید از کل امکانات گیت استفاده کنید. برای این کار باید از اسکریپت git-ftp استفاده کنید. برای نصب این اسکریپت روی اوبونتو کافیه مراحل زیر رو انجام بدیم:

1
2
3
sudo add-apt-repository ppa:resmo/git-ftp
sudo apt-get update
sudo apt-get install git-ftp

باقی مراحل دقیقاً مشابه رپوزیتوری‌های عادی گیت هست. تنها تفاوتی که داره موقع ارسال تغییرات به سرور، به‌جای push از ftp push استفاده می‌کنیم:

1
2
3
git init
# do changes
git ftp push --user username --passwd secret 123.124.125.126

دستور ftp push سینتکس خیلی ساده‌ای داره. کافیه یوزرنیم و پسورد اکانت FTP رو وارد کنیم و در آخر آی‌پی مقصد رو بهش بدیم.

فشرده‌سازی؟

فشرده‌سازی یعنی چی؟ یعنی این که تمام فاصله‌های اضافی، نوسطرها و توضیحات رو از یک فایل حذف کنیم. طوری که برای کامپیوترها قابل فهم باشه ولی برای انسان‌ها نه :) با دو تا عکس تفاوت رو نشون میدم. تصویر اول یک صفحهٔ HTML رو توی کامپیوتر من نشون میده که توش تعداد زیادی فاصله و خط‌های اضافی وجود داره. این باعث میشه بفهمم چی به چیه و بتونم کدهایی رو که نوشتم بخونم: تصویر دوم سورس همون صفحه رو که از روی سایت اصلی توی کروم باز کردم نشون میده. همون‌طور که می‌بینید هیچ چیز اضافه‌ای توی کدها وجود نداره و کل صفحه عبارت است از یک خط طولانی که هیچ جای اون دو تا فاصله وجود نداره: برای این کار نیاز به روش‌های مختلف فشرده‌سازی برای پروتکل‌ها و زبان‌های HTML، JavaScript، CSS و PHP داریم. خوشبختانه روش‌های فشرده‌سازی برای جاوااسکریپت و سی‌اس‌اس موجود هستند.

CSS و JS

برنامه‌های متعددی هم برای این‌ها نوشته شده. من از برنامهٔ yui-compressor استفاده می‌کنم؛ چون هم می‌تونه CSS رو فشرده کنه و هم JS. برای نصبش نیازی به PPA خاصی نداریم. مخزن‌های رسمی اوبونتو پکیج رو دارن:

1
sudo apt-get install yui-compressor

حالا اگر بخوایم از این برنامه استفاده کنیم کافیه تمام فایل‌هایی رو که پسوند css دارن به شکل بازگشتی پیدا کنیم و برنامه رو روی اون‌ها اجرا کنیم:

1
2
3
4
5
6
7
8
echo "Compressing CSS files..."
for css in `find . -type f -name \*.css -print`
do
    echo "Compressing $css"
    temp="$css.temp.css"
    yui-compressor --charset utf-8 --type css "$css" -o "$temp"
    mv $temp $css
done

به این ترتیب تمام فایل‌های css داخل تمام دایرکتوری‌های پروژه‌مون مینیفای میشن. اما بعد از این که تغییرات رو فرستادیم روی سرور باید همه‌چیز رو به‌حالت اول برگردونیم. خوشبختانه برای این کار هم اسکریپت‌های خوب نوشته شده که وظیفه‌شون ایجاد تورفتگی و مرتب کردن کدها هست. کافیه بنویسیم:

1
2
3
4
5
6
7
for css in `find . -type f -name \*.css -print`
do
    temp="$css.tmp"
    cp $css $temp
    cssunminifier $temp > $css
    rm $temp
done

و اسکریپت مشابهی هم برای جاوااسکریپت به اسم js-beautify وجود داره. ولی js-beautify یه پکیج دبین نیست، بلکه می‌تونید اون رو به‌شکل یک کتابخانهٔ پایتون یا جاوااسکریپت نصب کنید. مورد دوم رو انتخاب می‌کنیم:

1
2
npm -g install js-beautify
done

و بعد:

1
2
3
4
for js in `find . -type f -name \*.js -print`
do
    js-beautify $js
done

HTML و PHP

متأسفانه روشی برای حداقل کردن حجم کد و حذف اضافات برای HTML و PHP وجود نداره. با این حال می‌تونیم این کار رو خودمون به شکل دستی انجام بدیم. باید توجه داشته باشیم که فواصل سفید (تب، فاصله و کاراکترهای مشابه) در زبان‌های HTML و PHP نقش سمنتیکی ندارند. (از درس کامپایلر به یاد داریم که برای اکثر زبان‌ها مثل سی هم همین وضعیت هست). یعنی ما می‌تونیم هر ترکیبی از هر تعداد فاصله، تب و نوسطر؛ به هر تعداد رو به یک فاصله تبدیل کنیم. همچنین توی HTML فواصل بین تگ‌ها (خارج از محتوا) هیچ نقشی ندارند و می‌تونن به راحتی حذف بشن. مثلاً هیچ فرقی نداره بنویسیم <p>text</p> </br> یا اینکه <p>text</p></br> پس می‌تونیم با چند تا عبارت منظم مناسب (و البته بک‌آپ گرفتن از فایل فعلی‌مون) محتوای اضافی رو حذف کنیم. این کار نیاز به دقت زیادی داره چون عبارات منظم مقدس هستند و با مقدسات نمیشه شوخی کرد. اسکریپت رو ببینید تا توضیحاتش رو بنویسم:

1
2
3
4
5
6
7
8
#!/bin/bash
mkdir -p ./.backups
temp=$1".temp"
backup="./.backups/$1.backup"
cp -r --parents $1 ./.backups/
sed -i -e :a -e N -e 's/\n/ /' -e ta $1
sed -i -r -e 's/[ \t\n]+/ /g' $1
sed -i -r -e 's/>[ \t]+</></g' $1

همون‌طور که می‌بینید این یک اسکریپت مجزا هست که اسم یک فایل رو از خط فرمان می‌گیره و فشرده‌ش می‌کنه. توی خط 2 یک پوشه‌ای برای بکاپ‌ها می‌سازم. قراره فایل‌های فعلی‌مون رو توی این پوشه کپی کنیم، تا بعد از فشرده‌سازی و ارسال دلتا به سرور، بتونیم اون‌ها رو بازیابی کنیم. خط 5 به شکل بازگشتی (با کپی پوشه‌های پدر) این کار رو برامون انجام میده. از این‌جا کار اصلی‌مون شروع میشه. خط 6 تمام نوسطرها (یک یا چند تا پشت سر هم) رو حذف می‌کنه و تبدیل‌شون می‌کنه به یک فاصله. مثلاً اگر شما ده بار اینتر بزنید، اون خط‌های خالی همه‌شون تبدیل میشن به یک فاصله. خط 7 هر ترکیبی از هر تعداد فاصلهٔ سفید رو تبدیل می‌کنه به یک فاصله. مثلاً <div> <div></div> </div> تبدیل میشه به: <div> <div></div> </div>. و خط آخر هم فواصل بین تگ‌ها رو (که جزئی از محتوا حساب نمیشن) حذف می‌کنه.

جمع‌بندی

با جمع کردن تمام این حرف و حدیث‌ها کنار هم می‌رسیم به یک اسکریپت جامع و کامل به که متن کاملش رو می‌تونید از این لینک دریافت کنید. طرز کار اسکریپت به این شکل هست که شما کارتون رو انجام میدید، وقتی تصمیم گرفتید که چیزی رو آپلود کنید، فقط کافیه تغییراتون رو توی گیت اعمال کنید و بعد اسکریپت رو به این شکل اجرا کنید:

1
$ deploy-web <username> <password> <IP>

بعد همه‌چیز فشرده میشه، همه‌چیز کامیت میشه، تغییرات به سرور FTP ارسال میشه، و در نهایت همه‌چیز برمی‌گرده به حالت اولیه :) برای حمایت مالی از این پروژه می‌تونی توی صفحهٔ اصلی استار بزنید و یا کمک‌های مالی خودتون رو به آدرس بیتکوین 1NywosV5cNmcGiSqZ4zZNkvWr6G3v6kgS4 ارسال کنید.

دیدگاه‌ها