مقدمه‌ای بر Command Line برای طراحان وب

در این سری مقالات قصد داریم بر روی دستورات و ترفندهای command line کار کنیم که می‌تواند پروسه طراحی وب شما را آسان‌تر و لذت‌بخش‌تر کند. زمانی که یک بار با Command line شروع به کار کنید به شما قول می‌دهم با دنیای جدیدی روبرو خواهید شد و گزینه‌های زیادی برای کار خواهید داشت و دیگر هیچ وقت به سبک قبلی خود باز نمی‌گردید و واقعا معنای واقعی صرفه‌جویی در  وقت را لمس خواهید کرد.
زمانی فکر می‌کردیم که Command line خارج از محدوده‌ی طراحی وب است و بیشتر برای کارهای سمت سرور و مدیریت فایل‌ها و تمامی کارهایی که شاید یک طراح وب در طول روز با آن سرو کار ندارد استفاده می‌شود. امروزه ابزارهایی بر پایه Command line صرفا برای کسانی که front end کار می‌کنند بسیار افزایش یافته و مزیت‌های بسیار زیادی  برای آنها دارد. شاید در ابتدا با خود فکر کنید که ابزارهای command line برای توسعه‌دهندگان است نه طراحان و کمی فوبیای command line داشته باشید و همیشه دنبال دور زدن و کار نکردن با آن باشید.

چرا کار با Command line برای طراحی وب ارزشمند است؟

در طول این سری مقالات پروسه‌هایی بر پایه Command Line را یاد خواهید گرفت که سبک کار شما را تغییر خواهد داد . بعد از این که آشنایی اولیه‌ای با Command Line پیدا کردید سریع بر روی پروژه‌های کاربردی و عملی کار خواهیم کرد. بعد از این که تمامی مقالات را خواندید خودتان تکه‌های پازل را کنار هم قرار خواهید داد و در آخر به این پی خواهید برد که چرا استفاده از Command Line زندگی شما را تغییر داد.

آموزش‌هایی را که در این سری مقالات با هم بررسی خواهیم کرد را دوره کنیم.

استفاده از پکیج‌های ثالث

طراحان وب اکثرا از پکیج‌های جداگانه مانند jQuery, Bootstrap, Modernizer, Font Awesome , Normalize.css استفاده می‌کنند. قبل از Command line استفاده از این ابزارهای به این معنی بود که شما مجبور بودید چندین وبسایت مختلف را Bookmark کنید تا بتوانید آخرین ورژن پکیج خود را دانلود کنید. هر بار مجبور بودید این کار را به صورت دستی انجام دهید. اما این کاری نیست که یک گیک انجام می‌دهد. بلکه یک گیک سیستم خود را وادار می‌کند که کاری برایش انجام دهد. همچنین هر زمان که نیاز داشتید تا پکیج خود را به‌روز کنید همین پروسه را دوباره تکرار می‌کردید. اما بعد از استفاده از Command line شما هر پکیجی را که نیاز دارید تنها با یک دستور بر روی سیستم خود اجرا می‌کنید. مثلا با دستور زیر شما می‌توانید jQuery را بر روی سیستم خود داشته باشید:

bower install jquery

و یا با یک دستور ساده می‌توانید آنرا به روز کنید:

bower update query
از این به بعد دیگر نیاز ندارید هر بار که به یک پکیج ساده نیاز دارید و یا می خواهید پکیج های خود را به روز کنید به وبسایت های سازنده‌ی آن سر بزنید و دکمه‌ی دانلود را بزنید تا پروسه دانلود برای شما شروع شود. تنها با چند کلمه جادو اتفاق می‌افتد.

توانمند سازی در زمینه کدنویسی فرانت اند

شما در طراحی وب اکثرا از سه زبان HTML, CSS, JS استفاده می‌کنید، Command line به شما کمک می‌کند تا محصول نهایی و کدهای خود را در بهترین شرایط و در کمترین زمان ارایه دهید. یکی از قوی‌ترین چیزهایی که می‌توانیم در رابطه با CSS از آن در Command Line استفاده کنیم کامپایل پیش‌پردازنده‌های CSS است، مانند : Styluse, Sass/SCSS و Less . با Command Line شما به راحتی می‌توانید هر پیش‌پردازنده‌ای را که نیاز دارید سریع فراخوانی کنید، آن هم با تایپ چند کلمه.

حتی ما با استفاده از Command Line می‌توانیم کارهای بیشتری نیز انجام دهیم مانند autoprefixing، فشرده‌سازی و یا پاک‌سازی کدهای نوشته شده در CSS. دقیقا با همان روش‌های مشابه می‌توانیم همان بلاها را سر کدهای جاوااسکریپت خود بیاوریم.

برای HTML ما می‌توانیم از Jade استفاده کنیم که به ما کمک می‌کند HTML را به صورت مختصر بنویسیم همچنین این قابلیت را به ما می‌دهد که Templateسازی کنیم و هر بار مجبور نباشیم کدهایی که همیشه در صفحه‌های محتلف وجود دارند را تایپ کنیم.

اتوماتیک‌سازی برخی پروسه ها به کمک Task Tunnerها

اینکه بتوانیم با چند کلمه فایل جاوا اسکریپت خود را فشرده کنیم و یا پیش‌پردازنده‌های CSS را با چند دستور ساده دیگر کامپایل کنیم واقعا عالی است. حال زمانی را تصور کنید که تمامی این پروسه‌ها به صورت اتوماتیک انجام شود.

با استفاده از چیزی به نام Task Runner شما می‌توانید با یک دستور تک‌کلمه‌ای مانند gulp و یا grunt پیش‌پردازنده‌های CSS را کامپایل کرده، فایل‌های جاوا اسکریپت خود را یکی کنید و آن‌ها را فشرده‌سازی و کدهای Jade خود را به HTML کامپایل کنید و تمامی این کارها در کمتر از چند ثانیه انجام خواهد شد.
همچنین شما می‌توانید بدون نیاز به نوشتن این دستورها تنها با دستورهایی مانند gulp watch و یا grunt watch دیگر نیاز نیست نگران اجرای Task Runner ها باشید. با این کار شما این پروسه را نیز اتوماتیک کرده‌اید و با شروع به ایجاد تغییر بر روی فایل‌های خام پروژه خود grunt و یا gulp کار خود را در پشت‌زمینه انجام خواهند داد. Task Runnerها به شدت انعطاف‌پذیر هستند و هرگونه که شما دوست دارید می‌توانید آنها را شخصی‌سازی کنید.

Live Reloading, Browser Syncing & Multi Device Testing

Live Reloading یعنی دیگر نیاز نیست هر بار که شما در کد خود تغییری ایجاد می کنید دکمه‌ها ترکیبی command+R را بزنید. چرا که این کار به صورت اتوماتیک برای شما انجام داده خواهد شد و هر تغییری که ایجاد می‌کنید به صورت زنده برای شما نمایش داده خواهد شد.

هم چنین به عنوان قسمتی از Live Reloading شما می‌توانید سرور خود را روی لوکال‌هاست خود شبیه‌سازی کنید. این کار به شما کمک می‌کند تا مطمئن شوید که همه چیز در پروتکل http:// به خوبی کار خواهد کرد.

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

شروع و چارچوب‌بندی یک پروژه جدید

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

با روش‌هایی که در طی این مقالات آشنا خواهید شد نه تنها شما قادر خواهید بود در عرض چند ثانیه یک پروژه را شروع کنید بلکه اتوماتیک‌سازی برخی کارها از قبل انجام خواهد شد.

پس با ما باشید تا شروع کنیم.

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

منبع: +