راه اندازی Bootstrap Sass، Bower، Gulp و FontAwesome

راه اندازی Bootstrap Sass، Bower، Gulp و FontAwesome

آماده سازی موارد لازم برای front-end هنوز هم باعث سردرد می شود. به عنوان توسعه دهنده ما مجموعه ای از گزینه ها برای ساخت ساخت برنامه ها و وب سایت ها داریم. برخی از این ابزارها که در جلوی خط مقدم قرار دارند، NPM، Component، Braccoli، Gulp و البته چند تای دیگر که شاید هنگام نوشتن این پست منتشر شده اند. در این آموزش، می خواهیم بر روی Gulp.js تمرکز کنیم.

 

[button type=”success” size=”lg” link=”https://github.com/patrickava/gulp-bootstrap-sass”] [fa type=”github”] [/button]

 

به تازگی بر روی پروژه ای کار می کردم که می خواستم ساخت و ساز آن به سرعت تمام شود، پس تصمیم گرفتم که از زوج Bootstrap و FontAwesome در این مسیر کمک بگیرم. اما مشکلات وقتی وارد می شوند که می خواهید عملیات راه اندازی و داشتن یک پکیج خوب و تمیز که در پروزه های دیگر نیز قابل استفاده باشد به صورت خودکار باشد. البته که از CDN می شود استفاده کرد، اما توجه داشته باشید که دستکاری متغیرها را محدود می سازد. با راه اندازی Gulp می توانیم تمام منابع در دسترس برای تغییر و توسعه را در اختیار داشته باشیم.

 

5

 

امشب بعد از اینکه این ها را با هم ادغام کردم، به این نتیجه رسیدم که چیزی خوبی برای به اشتراک گذاشتن خواهد بود تا دیگران نیز از آن بهره ببرند. از این نقطه نظر که شما از قبل bower و npm را نصب کرده اید کار را ادامه می دهم. اگر اینطور نیست با کمی جستجو در وب طریقه نصب آن با توجه به پلتفرم خود نصب کنید، نگران نباشید، اگر مبتدی هستید کار دشواری برای نصب آن پیش رو ندارید. 🙂 تنها کافیست به سایت bower.io مراجعه کنید.

 

Bower

 

گام اول این است که Bower را راه اندازیم کنیم. یک دایرکتوری خالی درست کنید و cd کنید. حال دستور bower init را اجرا کرده و دستورالعمل هایی از شما پرسیده می شود. به نظر من پاسخ دادن به آن ها اجبار نیست، چون بصورت local استفاده می کنیم.

 

bower

 

بعد از اینکه Bower را نصب کردیم، نوبت نصب بسته های مورد نیاز Bower است:

 

 

bower-install-bootstrap-fontawesome

 

بطور پیشفرض، این بسته ها در داخل دایرکتوری bower_components ذخیره می شوند که می توانید نام دایرکتوری را به دلخواه تغییر دهید، اما در این آموزش از نام پیشفرض آن استفاده می کنم.

 

NPM

 

حال نیاز داریم که اجزا مورد نیاز gulp را راه اندازی کنیم که این کار را از طریق NPM انجان می دهیم. یک فایل جدید در ریشه دایرکتوری خود با نام package.json ایجاد کنید و تنها یک object خالی { } در آن اضافه کنید و در آخر ذخیره کنید.

 

به خط فرمان خود برگردید و NPM های مورد نیاز (dependency) را نصب کنید:

 

 

npm-install-gulp

 

دستور فوق باعث می شود که تمام پکیج های مورد نیاز در پوشه node_modules ذخیره شوند و همچنین با آرگومان --save-dev که در انتهای دستور اضافه کرده ایم بطور خودکار فایل package.json با وابستگی های برنامه ما به روز می شود.

 

 

در زیر فایل pacakge.json را مشاهده می کنید که نسخه های پکیج های مورد استفاده در این پروژه را نشان می دهد:

 

 

 

Gulp

 

در آخر ما نیاز داریم که فایل gulpfile.js را راه اندازی کنیم. این فایل را در ریشه پروژه خود ایجاد کنید تا تمام تنظیمات آن را در ادامه اعمال کنیم.

 

6200624

 

اگر قبلا فایل های gulp را دیده باشید، حتما متوجه شده اید که تمام وابستگی ها با استفاده از تابع require مخصوص node واکشی (include) شده اند. فایل gulpfile.js ما نیز از این قانون استفاده می کند و به صورت زیر خواهد بود:

 

 

اینها تمام پکیج هایی هستند که در مرحله NPM نصب کرده ایم، ما در این نقطه فقط پکیج ها را داخل فایل include کرده ایم و هیچ کار دیگری را در واقع انجام نمی دهد.

 

در ادامه، من یک شی config ایجاد کرده ام که تنظیمات مختلفی را نگهداری می کند:

 

 

با انجام این کار می توانید بقیه فایل ها را در آدرس های مختلف ساده تر پیدا کنید. sassPath پوشه ای است که در آن من فایل های sass را داخل آن نگهداری می کنم. اگر از Laravel 5 استفاده می کنید می توانید آنها را در resources/sass قرار دهید. پس از تجزیه و تحلیل و کامپایل، خروجی در دایرکتوری ./public قرار خواهد گرفت. در ادامه، bowerDir فقط به آدرس bower_components اشاره می کند.

 

حال اجازه دهید اولین task یا وظیفه gulp را برای اجرا bower تعریف کنیم.

 

 

این task اساسا همان دستور bower install را برای ما بطور خودکار انجام می دهد، یعنی با قرار دادن این دستور در gulpfile.js دیگر توسعه دهندگان می توانند تنها با اجرا دستور gulp bower تمام وابستگی های پروژه را نصب و راه اندازی کنند.

 

FontAwesome

 

همانطور که می دانیم FontAwesome را در پوشه bower_components داریم، ما احتیاج داریم که فونت ها را خارج و به داخل دایرکتوری ./public منتقل کنیم. این کار به سادگی با دستور زیر امکان پذیر است:

 

Fontawesome-Icons

 

 

تمام کاری که دستور فوق انجام می دهد، هر چه درون دایرکتوری bower_components/fontawesome/fonts/ وجود دارد به آدرس ./public/fonts منتقل شود.

 

Bootstrap Sass

 

قطعه بعدی که بتواند این معما را حل کند، راه اندازی Sass و لینک کردن بوت استرپ و font-awsome داخل آدرس ما است. بنابراین فایل ها sass ما می توانند به آنها دسترسی داشته باشند:

 

 

bootstrap-sass

 

task فوق کمی پیچیده به نظر می رسد اما با دنبال کردن آن این ابهام رفع خواهد شد. بخش مهم این وظیفه loadPath است که می گوید gulp-ruby-sass باید تمام محل های فایل ها را زیر نظر بگیرد. .on(“error” از افزونه notify استفاده می کند تا اگر چیزی باعث شکست در کامپایل شد در قالب پیام هشدار دهد!

 

[alert type=”success”]

توجه داشته باشید که برای اینکه gulp-ruby-sass به درستی اجرا شود نیاز دارید که ruby را بر روی سیستم خود نصب کنید!

[/alert]

 

با استفاده از این راه اندازی که ما انجام دادیم فایل اصلی style.scss می تواند bootstrap و fontawesome را به راحتی import کند. به مثال زیر توجه کنید:

 

 

من فونت جدیدی را تعریف و آن را در متغیر $font-family-base قرار داده ام. شما همچنین می توانید این کار را برای هر متغیر بوت استرپ دیگر انجام دهید.

 

Watch و Default Task

 

بالاخره، تقریبا کار ما تمام شد. حال می توانید یک Task پیشفرض و watch تعریف کنیم.

 

 

همانطور که حدس زده اید اولین task فقط تغییراتی که در فایل ها رخ می دهد گوش می دهد و آنگاه وظیفه css را اجرا می کند. در آخر ما یک task پیشفرض داریم که وقتی اجرا می شود وظایف bower، icons و css اجرا می شوند.

 

editor-atom-gulp

 

حال دستور برای تست دستورات gulp و gulp watch را اجرا کنید، اگر هیچ مشکلی در کدها دیده نشود خروجی به صورت زیر خواهد بود:

 

gulp

 

با این کارهایی که در بالا انجام دادیم، توسعه دهندگان دیگر می توانند کدها شما را به راحتی دریافت و با cd کردن داخل آن و اجرا دستور npm install و در آخر دستور gulp خروجی را مشاهده کنند و بهتر از آن کد شما را توسعه دهند. 🙂

 

امیدوارم با راه اندازی این سیستم بتوانید کارهای تکراری و حوصله سربری که قبلا در طراحی سایت و ساخت برنامه انجام می دادید از بین رود. 😉


 

  • سلام پاتریک ممنون بخاظر آموزش خوبت اگه وقت کردی بزارش گیت هاب تا ما هم این کار تکراری و حوصله بر ! رو انجام ندیم 🙂

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

    • پاتریک

      خواهش می کنم. 😉

  • مرسی
    بسیار عالی و کاربردی بود.