نسخه جدید Foundation 6 راه‌ها و ابزارهای زیادی برای استفاده از آن در اختیار شما قرار می‌دهد. می‌توانید فایل‌های استاتیک را دانلود کنید، یا از Yeti Launch، یک برنامه دسکتاپ مخصوص مک (به زودی نسخه ویندوز آن نیز منتشر خواهد شد) استفاده کنید.

یکی از ویژگی‌های کمتر شناخته‌شده، مجموعه‌ای از ابزارهای خط فرمان است که با Foundation 6 در دسترس هستند و من در این مقاله به آن خواهم پرداخت. Foundation 6 یک چارچوب front-end واقعاً انعطاف‌پذیر است که علاوه بر بسیاری از ویژگی‌های بارز CSS و افزونه‌های جاوا اسکریپت، ابزارهای توسعه‌دهنده بسیار خوبی نیز دارد.

نکات کلیدی

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

برای استفاده از ابزارهای CLI در Foundation 6، توسعه‌دهندگان باید NodeJS، npm، Git، Gulp و Bower را نصب داشته باشند. foundation-cli را می‌توان با استفاده از دستور npm install –global foundation-cli نصب کرد.

رابط خط فرمان (CLI) بنیاد (Foundation CLI) از Gulp و Bower در زیر کاپوت استفاده می‌کند. Gulp وظایف زمان‌بر را در گردش کار توسعه خودکار می‌کند، در حالی که Bower یک مدیر بسته برای وب است که به توسعه‌دهندگان اجازه می‌دهد کتابخانه‌های front-end را از طریق خط فرمان دانلود و نصب کنند.

با استفاده از رابط خط فرمان (CLI) بنیاد (Foundation CLI)، توسعه‌دهندگان می‌توانند قالب‌های خالی را برای هر یک از سه چارچوب بنیاد: سایت‌ها (Sites)، برنامه‌ها (Apps) و ایمیل‌ها (Emails) دانلود و نصب کنند. این قالب‌ها از پیش برای کار با Gulp و Bower پیکربندی شده‌اند.

ابزار Foundation CLI همچنین با BrowserSync از پیش پیکربندی شده برای تست همزمان مرورگر و بارگذاری مجدد زنده ارائه می‌شود. این ویژگی به توسعه‌دهندگان اجازه می‌دهد تا تغییرات را در زمان واقعی در چندین دستگاه و وضوح تصویر مشاهده کنند و کارایی توسعه front-end را بهبود بخشند.

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

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

اگر مرتباً با خط فرمان کار می‌کنید اما دقیقاً نمی‌دانید Foundation 6 در این زمینه چه چیزی ارائه می‌دهد، یا با خط فرمان کار نمی‌کنید و شاید می‌خواهید چیز جدیدی یاد بگیرید، پس این مقاله برای شماست.

فعال و در حال اجرا

برای شروع، پیش‌نیازهایی وجود دارد. شما باید NodeJS و همچنین ابزار npm را که باید همراه با NodeJS نصب شود، نصب کرده باشید. همچنین به Git، Gulp و Bower نیاز دارید که foundation-cli ما از همه آنها استفاده خواهد کرد. می‌توانید این موارد را با اجرای دستور زیر نصب کنید:

 
$ npm install --global gulp bower

در بعضی سیستم‌ها، به خصوص هنگام نصب چیزی با npm به صورت سراسری، به دسترسی super user نیاز خواهید داشت، بنابراین ممکن است لازم باشد قبل از دستورات شرح داده شده در این پست از sudo استفاده کنید.

نصب foundation-cli

اگر از قبل رابط خط فرمان Foundation 5 را روی دستگاه خود دارید، بسته به نحوه پیکربندی محیط خط فرمان شما، فقط می‌توانید به یکی از دستورات دسترسی داشته باشید. بنابراین بهتر است ابتدا ابزارهای قدیمی را حذف کنید. می‌توانید این کار را با دستورات زیر انجام دهید:

 
$ gem uninstall foundation
 $ npm uninstall --global foundation-cli

سپس ابزارهای جدید CLI را نصب کنید:

 
$ npm install --global foundation-cli

می‌توانید اطلاعات بیشتر در مورد نصب را در مستندات Foundation مطالعه کنید.

اگر نمی‌خواهید foundation-cli روی سیستم خود نصب کنید و قبلاً Gulp و Bower را نصب کرده‌اید، می‌توانید به سادگی مخزن را با الگوی Foundation کلون کنید و سپس به جای استفاده از دستور foundation ، می‌توانید از دستورات gulp و npm استفاده کنید. همه چیز باید مانند استفاده از foundation-cli عمل کند.

رابط خط فرمان (CLI) بنیاد چه چیزهایی به من می‌دهد؟

همانطور که گفته شد، Foundation CLI از Gulp و Bower در زیر کاپوت استفاده می‌کند. Gulp و Bower چیستند؟ Gulp ابزاری است که به شما کمک می‌کند تا وظایف دشوار یا زمان‌بر را در گردش کار توسعه خود خودکار کنید. در اینجا، می‌توانیم به کامپایل، کوچک‌سازی، الحاق SCSS و همچنین فشرده‌سازی تصویر یا سایر وظایف مفید فکر کنیم. Bower یک مدیر بسته برای وب است که به شما امکان می‌دهد کتابخانه‌های front-end را از طریق خط فرمان دانلود و نصب کنید. به عنوان مثال، نصب jQuery با یک دستور یک خطی انجام می‌شود: bower install jquery .

رابط خط فرمان (CLI) بنیاد (Foundation CLI) قالب‌های خالی را برای هر یک از سه چارچوب بنیاد دانلود و نصب می‌کند: سایت‌ها (Sites)، برنامه‌ها (Apps) و ایمیل‌ها (Emails). همه این قالب‌ها آماده کار با Gulp و Bower هستند، به همراه وظایف از پیش پیکربندی شده Gulp و منابع نصب Bower. این شبیه به ابزاری مانند Yeoman است.

استفاده از رابط خط فرمان (CLI) بنیاد

وقتی foundation-cli را نصب کردید، می‌توانید با اجرای دستور زیر از آن استفاده کنید:

 
$ foundation new --framework sites --template zurb

همانطور که می‌بینید، ما foundation به عنوان نام استفاده می‌کنیم و نه foundation-cli . همچنین، ما فقط نگاهی به قالب پیشرفته Foundation for Sites zurb خواهیم انداخت. برای انتخاب چارچوب مناسب باید از پرچم --framework و برای انتخاب قالب مناسب باید از پرچم --template استفاده کنیم. همچنین می‌توانید قالب basic را انتخاب کنید، اما به نظر من اگر می‌خواهید نگاه دقیق‌تری داشته باشید، قالب پیشرفته بسیار بهتر است.

بعد از نصب، باید یک پوشه پروژه با نامی که هنگام نصب انتخاب کرده‌اید، داشته باشید. همچنین، تمام وابستگی‌ها باید در آنجا نصب شده باشند. تنها کاری که اکنون باید انجام دهید این است که cd به پروژه تازه ایجاد شده و داخل پوشه‌ای که می‌توانید اجرا کنید، بروید:

 
$ foundation watch

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

 
------------------------------------
 Local: http://localhost:8000
 External: [... your external IP here ...]
 -----------------------------------------------
 UI: http://localhost:3001
 UI External: [... your external IP here ...]
 -----------------------------------------------
 [BS] Serving files from: dist

در اینجا اطلاعاتی در مورد سرورهای در حال اجرا دارید. اولین سرور، برنامه واقعی شماست و همچنین یک سرور رابط کاربری برای تست BrowserSync دارید (به زودی در مورد آن صحبت خواهیم کرد). می‌توانید ببینید که فایل‌های برنامه شما از دایرکتوری dist ارائه می‌شوند و می‌توانید در مرورگر خود به http://localhost:8000 مراجعه کنید و الگوی استاندارد آغازین Foundation 6 را مشاهده کنید.

نگاهی به آنچه در درون است

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

ساختار پوشه، Gulpfile.js، فایل‌های جاوا اسکریپت/CSS

بیایید نگاهی به ساختار پوشه‌های پروژه تازه ایجاد شده بیندازیم. مهم‌ترین پوشه‌ها src و dist هستند. کار توسعه شما عمدتاً در پوشه src انجام می‌شود و تمام فایل‌های تولید شما در پوشه dist آماده می‌شوند. سروری که اجرا می‌کنید، فایل‌های آن پوشه را نیز ارائه می‌دهد. این بدان معناست که می‌توانید فضای کاری خود را به دلخواه آماده کنید، اما در نهایت، فایل‌های آماده تولید در پوشه dist قرار می‌گیرند و این همان چیزی است که می‌خواهید به عنوان محصول نهایی خود ارائه دهید.

خب، چطور این ممکن است؟ بیایید نگاهی به مهم‌ترین فایل اینجا بیندازیم – gulpfile.js . اگر با Gulp آشنا نیستید، شاید بخواهید این آموزش مقدماتی را بررسی کنید. Gulp آنقدرها هم که در ابتدا به نظر می‌رسد ترسناک نیست، اما مهم است زیرا جایی است که تمام جادوها اتفاق می‌افتد.

Gulp بر اساس بسیاری از افزونه‌های Gulp ساخته شده است که از طریق بسته‌های ساده npm قابلیت‌های اضافی اضافه می‌کنند. در این پروژه جدید Foundation، آنها در package.json تعریف شده‌اند. همچنین هنگام اجرای foundation new (همانطور که در بالا ذکر شد) به طور خودکار دانلود و نصب می‌شوند، بنابراین نیازی به نگرانی در مورد آن نیست.

وقتی فایل Gulp را باز می‌کنید، می‌توانید ببینید که هر وظیفه‌ای مانند clean، copy، sass و JavaScript به طور مشابه با استفاده از افزونه ویژه Gulp که مسئول این بخش خاص از کار است، تعریف شده‌اند. علاوه بر این، همانطور که در پایین فایل مشاهده می‌کنید، وظایف اصلی مانند 'build' یا 'default' وجود دارند که وظایف دیگر را تجمیع می‌کنند. الگوی پایه (Foundation boilerplate) پیکربندی شده است، بنابراین اساساً نیازی به انجام کاری ندارید. البته می‌توانید آن را مطابق میل خود تنظیم کنید.

با این نوع پیکربندی، می‌توانید scss خود را در پوشه src/assets/scss بنویسید و می‌توانید فایل‌های جاوا اسکریپت خود را در پوشه src/assets/js بنویسید. همچنین می‌توانید تصاویر خود را در پوشه src/assets/img قرار دهید. وقتی foundation watch یا foundation build را اجرا می‌کنید، تمام آن فایل‌ها در پوشه dist کپی می‌شوند. بسته به گزینه‌ها، می‌توان آنها را فشرده یا تصاویر را بهینه کرد. همه اینها در gulpfile.js پیکربندی شده است.

پیکربندی Gulp و افزونه‌های آن موضوع مقاله‌ی دیگری است. حال بیایید نگاهی به فایل‌های .html بیندازیم و طرح‌بندی‌ها و روابط پیشرفته‌ای را با Panini ایجاد کنیم.

قالب‌های پنینی و دسته فرمان

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

در پوشه dist خود، فایل‌های HTML استاتیک آماده برای استفاده دارید. البته، اگر فقط یک فایل داشته باشید، همه چیز واقعاً ساده است. وقتی می‌خواهید چندین فایل HTML ایجاد کنید که دارای چند بخش یکسان هستند، ممکن است مشکلاتی پیش بیاید. این بخش‌ها می‌توانند شامل پاورقی، نوار کناری، سربرگ یا بسیاری از عناصر دیگر باشند که به آنها partials گفته می‌شود.

بدون Panini، شما باید تمام آن کدهای تکراری را در هر فایل HTML کپی کنید، و اگر تغییری لازم باشد، باید یا آن را به صورت دستی در هر فایل انجام دهید، یا در ویرایشگر متن خود از تابع find-and-replace استفاده کنید. با Panini، می‌توانید همه این کارها را در یک جا و هنگام ویرایش انجام دهید و همه فایل‌ها ویرایش و در پوشه dist کپی می‌شوند.

نکته مهم دیگر این است که Panini بر اساس کتابخانه قالب‌سازی Handlebars ساخته شده است. این کتابخانه می‌تواند Markdown را در فایل‌های HTML شما نیز کامپایل کند. اطلاعات بیشتر در مورد Panini را می‌توانید در مستندات Foundation بیابید.

بیایید نگاهی به ساختار پوشه Panini templates در پروژه بیندازیم. باید پوشه src را باز کنیم. در اینجا data ، layouts ، pages و partials داریم. همانطور که انتظار می‌رود، در پوشه layouts می‌توانیم چارچوب‌های اصلی طرح‌بندی خود را بنویسیم. در اینجا می‌توانیم یک سربرگ و پاورقی تعریف کنیم که در تمام صفحات تکرار می‌شوند.

اگر می‌خواهید فقط از یک طرح‌بندی استفاده کنید، می‌توانید نام فایل را default.html بگذارید. یک فایل آزمایشی مانند آن را در پروژه ما خواهید یافت. اگر می‌خواهید از بیش از یک طرح‌بندی استفاده کنید، می‌توانید فایل‌های بیشتری با برچسب‌های بدنه خاص {{> body}} ایجاد کنید (به مثال default.html مراجعه کنید) و باید از نشانگرهای ویژه در صفحات خود استفاده کنید تا به کامپایلر بگویید که یک صفحه باید از کدام طرح‌بندی استفاده کند. این طرح‌بندی Front Matter نام دارد و به شکل زیر است:

 
---
 layout: my-custom-layout
 ---

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

بیایید نگاهی به پوشه pages بیندازیم. در این پوشه، فایل index.html را پیدا خواهید کرد که یک صفحه آزمایشی محتوا است. همانطور که می‌بینید، هیچ تگ html یا body ندارد. دلیلش این است که فقط محتوا به طرح‌بندی default.html که قبلاً مورد بحث قرار گرفت، تزریق خواهد شد.
البته می‌توانید صفحات مشابهی اضافه کنید، اما برخی ممکن است از طرح‌بندی‌های متفاوتی استفاده کنند.

اگر به عناصر HTML کوچک و قابل استفاده مجدد نیاز دارید، می‌توانید آنها را در پوشه partials ایجاد کنید. هیچ فایلی در پروژه آزمایشی که ما ایجاد کرده‌ایم وجود ندارد، اما این واقعاً ساده است. فقط یک فایل با بخشی از HTML ایجاد کنید و نام این فایل را هر چه می‌خواهید بگذارید. سپس در فایل‌های طرح‌بندی یا فایل‌های صفحات خود، می‌توانید این partial را با استفاده از چیزی مانند {{> my-partial-file}} وارد کنید (توجه داشته باشید که هیچ پسوند فایلی وجود ندارد). و تمام. همه به هم متصل، کامپایل و در پوشه dist کپی می‌شوند.

همچنین پوشه‌ای به نام data وجود دارد. در اینجا می‌توانید برخی داده‌ها را در قالب فایل‌های .json یا .yml ارائه دهید. برای مثال، فرض کنید من یک فایل myList.json در پوشه data با محتوای زیر دارم:

 
{
 items: ["item 1", "item 2", "item 3"]
 }

در صفحه طرح‌بندی یا فایل‌های HTML جزئی، می‌توانم از چیزی شبیه به این استفاده کنم:

 
<ul>
 {{#each myList.items}}
 <li class="item-name">{{this}}</li>
 {{/each}}
 </ul>

این به شما امکان می‌دهد تا داده‌های JSON را پیمایش کرده و مقداری HTML تولید کنید. چیزی که باید دریافت کنیم، لیستی از آیتم‌ها با نام‌های موجود در آرایه است.

همانطور که می‌بینید، Panini ابزاری واقعاً مفید است وقتی می‌خواهید ساختارهای پیچیده HTML ایجاد کنید و نمی‌خواهید خودتان را تکرار کنید.

BrowserSync: تست مرورگر همگام‌سازی شده و بارگذاری مجدد زنده

آخرین ویژگی از پیش پیکربندی شده ابزار Foundation CLI که در مورد آن صحبت می‌کنم، BrowserSync است. همانطور که احتمالاً می‌دانید، کار front-end سخت است زیرا باید وب‌سایت خود را در دستگاه‌ها و وضوح‌های مختلف آزمایش کنید. حالا تصور کنید که یک جدول بزرگ با دستگاه‌های مختلف متصل به وب‌سایت خود دارید. وقتی روی چیزی کلیک می‌کنید یا صفحه را اسکرول می‌کنید، همه دستگاه‌ها همین کار را می‌کنند. این عالی است زیرا در لحظه می‌بینید که چه چیزی باید اصلاح شود و چه چیزی خوب کار نمی‌کند.

پروژه ایجاد شده ما به طور خودکار آدرس IP خارجی شما را ارائه می‌دهد (به بالا مراجعه کنید). می‌توانید آن را بگیرید و در تمام مرورگرهای دستگاه‌های مختلف جایگذاری کنید تا به همان موتور BrowserSync متصل شوید و آزمایش را شروع کنید.

BrowserSync همچنین تغییرات را به صورت زنده ارائه می‌دهد، بنابراین اگر چیزی را ذخیره کنید، بدون نیاز به رفرش دستی صفحه، در پنجره مرورگر نمایش داده می‌شود. همچنین در تمام دستگاه‌های متصل نمایش داده می‌شود و شما همه این موارد را به صورت رایگان با قالب‌های foundation-cli و zurb و بدون هیچ کار اضافی دریافت می‌کنید. چقدر عالی است؟

سخنان پایانی

من شخصاً فکر می‌کنم که تیم بنیاد Zurb کار بسیار خوبی در ارائه ابزارها و چارچوب‌های عالی برای توسعه‌دهندگان انجام داده است. این نیز مهم است. نه تنها برخی افزونه‌های آماده برای استفاده و سبک‌های CSS. کار با Foundation for Sites 6 یک تجربه عالی است. فقط تصور کنید که چقدر کار می‌توانید با ابزارهای Foundation CLI بدون برنامه‌نویسی backend انجام دهید. می‌توانید وب‌سایت‌ها و وبلاگ‌های استاتیک ایجاد کنید و آنها می‌توانند بسیار پیشرفته نیز باشند. ناگفته نماند که در بسیاری از موارد، وبلاگ‌ها و وب‌سایت‌های استاتیک حتی سریع‌تر و بهتر هستند.

من واقعاً شما را تشویق می‌کنم که نگاه دقیق‌تری به Panini بیندازید. همچنین می‌توانید برخی از مستندات را در فایل readme بسته npm پیدا کنید. این ابزار می‌تواند کارهای فوق‌العاده زیادی انجام دهد که من در اینجا توضیح نداده‌ام، مانند کامپایل Markdown یا helperهای سفارشی. می‌توانید در مورد Gulp مطالعه کنید و نگاهی دقیق‌تر به تمام وظایف Gulp که در قالب/پروژه zurb تولید شده توسط ابزار foundation-cli نیز استفاده می‌شود، بیندازید.

یک نکته دیگر – من به فایل‌های فشرده CSS و جاوا اسکریپت اشاره نکردم. اگر از دستور foundation watch استفاده می‌کنید، فایل‌های CSS و جاوا اسکریپت را در پوشه dist خواهید داشت اما فشرده نشده‌اند. اگر می‌خواهید فایل‌های آماده برای تولید در آن پوشه باشند، کافیست foundation build اجرا کنید. اگر می‌خواهید درباره دستور foundation بیشتر بخوانید، کافیست دستور foundation help را اجرا کنید. وقتی زمان آن فرا رسید و نیاز به به‌روزرسانی وابستگی‌های خود در پروژه داشتید، می‌توانید foundation update اجرا کنید.

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

تست مسدودسازی تبلیغات