Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Terminal
Webdesign

خط فرمان در اختیار طراحی وب: مقدمه

by
Length:MediumLanguages:
This post is part of a series called The Command Line for Web Design.
The Command Line for Web Design: Grasping the Basics

Persian (پارسی) translation by Ali Abdollahzade (you can also view the original English article)

برای مدت زمانی طولانی کار کردن با خط فرمان خارج از حوزه ی طراحی وب به حساب می آمد. خط فرمان بیشتر در انحصار کار هایی مثل مدیریت سرور، مدیریت فایل و این طور کار هایی که هیچ ارتباطی با فعالیت های روزمره یک طراح وب نداشت، بود.

شاید در گذشته این گونه بود ولی دیگر این طور نخواهد بود.

امروزه هزاران ابزار شگفت انگیز که از خط فرمان قدرت گرفته اند وجود دارد که برای زبان های Front End و میز کار ها ساخته شده اند. مزایایی که این ابزار ها در اختیار طراحان قرار می دهد باعث شده که نحوه ی کار با خط فرمان برای طراحان وب به یک ضرورت تبدیل بشود.

some familiar command line tools
چند ابزار پر استفاده ی خط فرمان

باید قبول کنم که حتی تا مدتی بعد از این که برای اولین بار با این ابزار ها آشنا شدم، کمی دچار «خط فرمان هراسی» (!) بودم! من تحت تاثیر این عقیده بودم که می گفت «این ها برای برنامه نویس هاست نه طراح ها» و همیشه دنبال گزینه های دیگری به جز امتحان کردن خط فرمان بودم.

بعد ها در نهایت، در یک پروژه که بسیار مشتاق آن بودم، مجبور به استفاده از خط فرمان شدم چون آن پروژه نیازمند تعامل با خط فرمان بود. در ابتدا کمی می ترسیدم ولی بعد خودم را در حالی دیدم که دارم از شوق فریاد می زنم:

«این فوق العاده است! نمی دانم چرا من زودتر شروع به یادگیری این نکرده بودم!»

امروز من از خط فرمان تقریبا در تمام پروژه های طراحی وب استفاده می کنیم و نمی توانم خودم را بدون خط فرمان ببینم. به طرز شگفت آوری، خط فرمان تقریبا در تمام مراحل فرایند طراحی وب کاربری است.

درباره ی این سری

اینجا یک نکته وجود دارد که، اگر زندگی من به آن ها وابسته نبود حتی الان هم نمی توانستم بیشتر چیز هایی را که شما می توانید در یک «آموزش مقدماتی خط فرمان» ببینید، انجام بدهم. اگر شما تا حالا یاد نگرفته اید که چه طور با دستور mkdir کار کنید یا cd یا ls، اصلا مهم نیست. حقیقت این است که، به عنوان یک طراح وب شما واقعا نیازی به آن چیز ها ندارید. تنها مهارت های مورد نیاز شما در خط فرمان، آن هایی است که کار شما را در انجام بهتر پروژه های طراحی وب آسان می کنند.

این دلیلی است که این سری درباره ی  «چگونه یک فرمان مبهم برای کار هایی که هرگز انجام نمی دهید را اجرا کنیم.» نیست. و همچنین مثل «فرایند پیچیده توسعه برای طراحان آسان می شود» نیست. این سری آموزشی مختص طراحان وب است و به شما نشان می دهد که چگونه ابزار هایی که برای طراحی وب بسیار کاربردی هستند را به کار بگیرید.

به محض آن که خط فرمان را به فرایند طراحی وب بیاورید، یک دنیای جدید از گزینه ها به روی شما باز خواهد شد، مقدار بسیار زیادی از وقت گرانبهای شما به هدر نخواهد رفت و به شما قول می دهم شما هرگز به گذشته حتی فکر هم نخواهید کرد.

چرا خط فرمان برای طراحی وب عالیست

در طول این سری آموزشی شما فرایند های مبتنی بر خط فرمان را فرا خواهید گرفت که دیدگاه شما را نسبت به طراحی وب برای همیشه عوض خواهد کرد.

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

مباحث اصلی پوشش داده شده

بیایید به مباحثی که در طول این سری آن ها را پوشش خواهیم داد نگاهی بیاندازیم. پنج موضوع اصلی وجود دارند که عبارتند از:

1. استفاده از بسته های Third Party

طراحان وب معمولا از بسته های سوم شخص مثل jQuery، Bootstrap، Modernizr، Font Awesome، Normalize.css و یک فهرست بلند بالا از این بسته ها استفاده می کنند. قبل از استفاده از خط فرمان به کارگیری بسته های جانبی به این معنی بود که:

  1. یک فهرست از وبگاه هایی که آخرین نسخه ی هر کدام از این بسته ها را برای دانلود قرار داده، جمع آوری و نگهداری کنیم.
  2. بررسی وبگاه هایی که پیدا کردیم به صورت دستی و دانلود هر کدام از بسته های مورد نیاز، هر دفعه که شما آن بسته ها را نیاز دارید.
  3. تکرار فرایند بالا هر بار که یک بسته به روز رسانی می شود.
  4. انتقال نسخه ی به روز شده به صورت دستی به هر پروژه ای که آن بسته در آن به کار رفته.

مدیریت بسته ها به صورت دستی کاری سخت و سنگین هست ولی با وجود خط فرمان این سختی ها را فقط در گذشته می توان یافت.

شما می توانید یک بسته را مستقیما به پروژه ی خودتان بیاورید، تنها با نوشتن چند واژه مثل:

bower install jquery

شما می توانید بسته ها را به سادگی به روز نگه دارید، تنها با نوشتن چند واژه ی ساده:

bower update jquery

دیگر به دانلود دستی بسته ها از اینترنت یا به روز رسانی دستی آنها وقتی که تغییر می کنند، نیازی نیست و این تنها گوشه ای از چیز هایی است که شما می توانید از طریق مدیریت بسته ها به وسیله خط فرمان انجام بدهید.

2. قدرت بخشیدن به کد های Front End

سه زبان که به احتمال زیاد شما در هر پروژه ی طراحی وب دیده اید HTML، CSS و Javascript هستند. خط فرمان راه های جدیدی را برای ساخت محصول نهایی و تحویل کد هایی که به این زبان ها نوشته شده اند به وجود آورده که بهینه تر و قدرتمند تر هستند.

یکی از قدرتمند ترین چیز هایی که می توانیم از طریق خط فرمان برای CSS استفاده کنیم، کامپایل کردن پیش پردازنده های CSS مثل Stylus، Sass / SCSS و LESS است. با استفاده از خط فرمان شما می توانید به سرعت هر فایل پیش پردازنده ای را تنها با نوشتن چند کلمه، کامپایل کنید. شما حتی می توانید کامپایل خودکار را تنظیم کنید تا با هر بار تغییر در فایل پیش پردازنده، فایل CSS نهایی نیز به صورت خودکار کامپایل شود.

از طریق خط فرمان حتی می توانیم کار با CSS را بهبود ببخشیم؛ چیز هایی مثل: اضافه کردن خودکار پیشوند های CSS، مرتب کردن فایل و فشرده سازی. به طور مشابه می توانیم کار با JavaScript را هم بهبود ببخشیم؛ مثل: ادغام فایل ها و کوچک سازی.

و برای HTML به زبان هایی مثل Jade دسترسی پیدا می کنیم که هم قابلیت خلاصه نویسی HTML را در اختیار ما می گذارد و هم قابلیت توسعه ی ساده تر قالب ها تا از نوشتن مجدد کد هایی که در طول پروژه چند بار تکرار می شوند جلوگیری شود.

3. خودکار سازی با Task runners

این که بتوان فایل ها را به CSS با چند کلمه کامپایل کرد، و بعد فایل JavaScript را با چند کلمه دیگر کوچک سازی کرد، عالی است. ولی وقتی به قدرت عظیم پی می برید، که شما می توانید تمام چیز هایی که پروژه تان به آن نیاز دارد را با هم با یک فرمان انجام دهید.

با استفاده از چیزی که «Task runner» نامیده می شود، می توانید با یک فرمان یک واژه ای مثل gulp یا grunt فایل های پیش پردازنده را کامپایل کرد، پیشوند های CSS را به کد ها افزود، کد ها را مرتب کرد و در نهایت فایل CSS نهایی را نیز فشرده و کم حجم کرد. بعد از آن فایل های Jade را به HTML کامپایل کرد و فایل های JavaScript را با هم ادغام کرد و به هم چسباند و آنها را کوچک و کم حجم کرد، و تمامی این کار ها در مدت چند ثانیه انجام می شود.

شما حتی می توانید Task Runner را به گونه ای تنظیم کنید تا این کار ها را بدون دخالت شما انجام بدهد. بعد از اجرای یک فرمان مثل gulp watch یا grunt watch شما می توانید به سراغ کارتان بروید و روی فایل های خام پروژه کار کنید، در حالی که در پس زمینه، تمام کار های کامپایل کردن و بهینه سازی برای شما به صورت خودکار انجام می شود.

Task runner ها کاملا انعطاف پذیر هستند و می توانند هر طور که شما بخواهید تنظیم بشوند، در نتیجه هیچ پایانی برای راه هایی که شما می توانید پروژه ی خود را تنظیم کنید، وجود ندارد. به راحتی می توانید هر چیزی را تنظیم کنید تا با هر شرایطی سازگار باشند.

4. بارگذاری مجدد زنده، همگام سازی مروگر و آزمایش با چند دستگاه

بارگذاری مجدد زنده به شما این اجازه را می دهد که انگشت خود را از روی دکمه Refresh مروگر بردارید و فقط روی دریافت بازخورد مناسب از طرح خود در حین ایجاد تغییرات تمرکز کنید.

بعد از این که شما از Task runner ها برای خودکار سازی استفاده کردید، می توانید بارگذاری مجدد خودکار را هم مستقیما به آن اضافه کنید و آن را با تنظیمات دیگری که قبلا برای پروژه خود ایجاد کرده بودید، هماهنگ کنید. شما دقیقا می توانید تصمیم بگیرید که چه کار باعث بارگذاری مجدد زنده شود، چه کامپایل شدن فایل های پیش پردازنده یا تغییرات فایل HTML یا هر چیزی که شما می خواهید.

به عنوان بخشی از از فعالسازی بارگذاری مجدد خودکار، شما یک پیش نمایش از سایت را در localhost مشاهده خواهید کرد، که یک شبیه سازی از هاست روی رایانه شخصی شماست. با این کار شما می توانید مطمئن شوید همه چیز همان طوری خواهد بود که در پروتکل https:// انتظار دارید اتفاق بیافتاد، در برابر چیزی که در پروتکل file:// دیده می شود.

علاوه بر این شما همچنین یاد خواهید گرفت تا از همگام سازی مرورگر ها استفاده کنید، به این صورت که یک URL دریافت می کنید و می توانید آن را در چندین مرورگر مختلف وارد کنید و تمام آن مرورگر ها با هم همگام خواهند شد. برای مثال، در مرورگر Chrome روی یک دکمه کلیک می کنید و سپس Firefox و Opera و Safari به همان عمل (کلیک کردن روی دکمه) به طور همزمان واکنش نشان می دهند.

همگام سازی مرورگر ها محدود به یک دستگاه نیست. شما می توانید همان URL را در تبلت، تلفن همراه و هر دستگاه دیگری روی همان اتصال وارد کنید و هر کدام یک پیش نمایش همگام را نمایش خواهند داد. تمام این ها با هم دیگر به شما این اجازه را می دهند تا به طور کامل مطمئن شوید که پروژه ی شما روی تمام مرورگر ها و تمام دستگاه ها درست نمایش داده می شود.

و به این خاطر که شما این کار ها را در کنار تنظیم Task runner انجام می دهید، تمام این اتفاقات به صورت زنده و با دو واژه مثل grunt start یا gulp start اتفاق خواهند افتاد.

5. پایه ریزی پروژه های جدید

پایه ریزی پروژه های جدید به صورت دستی کاری دردناک و دشواری به حساب می آید. تنظیم کردن ساختار پوشه ها و فایل ها و اطمینان از این که تمام فایل ها با هم در ارتباط هستند و به درستی با هم کار می کنند، می تواند خیلی زمان بر باشد.

هر چند با استفاده از خط فرمان شما می توانید هر نوع پروژه ای را پایه ریزی کنید. این قابلیت هنگامی که می خواهید از فریم ورک های جانبی و کد های آغازین مثل Foundation، Bootstrap، HTML5 Boilerplate و Google Web Starter Kit عالی است.

با استفاده از روش هایی که خواهیم گفت پروژه های تازه پایه ریزی شما تنها شامل کد های مورد نیاز نخواهند بود، بلکه Task runner ها نیز از پیش تنظیم شده خواهند بود در نتیجه کار هایی مثل کامپایل خودکار و پیش نمایش در localhost آماده انجام خواهند بود.

پیش به سوی شروع

خوب اگر آماده اید شما را در آموزش اول خواهم دید!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.