خبرگزاری آیصد (جدیدترین و جذاب ترین اخبار ایران و جهان)

نشر توسط:admin Views 70 تاریخ : 31 ارديبهشت 1395

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

تلاش بر این خواهد بود که مرورگر کمترین میزان مراجعه برای بارگذاری اسکریپت ها و  شیوه نامه های ما داشته باشد. ابزارهایی وجود دارند که تمامی اسکریپت  ها و شیوه نامه های شما را در یک فایل ادغام میکنند تا مرورگر تنها یکبار و یک فایل را لود کند. در مک نرم افزار CodeKit این کار را انجام میدهد که پولی هم هست ولی نسخه کرکش هم موجوده و خودتون باید پیدا کنید و برای سیستم عامل های دیگر هم باید دنبال ابزاری مشابه باشید مثل ؛

اول 

دوم 

سوم

با اجرای کدکیت و انداختن فولدر اصلی پروژه در آن شما دوکار باید انجام دهید که اندکی با هم تفاوت دارند؛

۱- ادغام شیوه نامه ها که با رحوغ به Tab شیوه نامه ها میبینید که Bootstrap.less فعال است و بقیه خاکستری و غیر فعال که دلیلش این است که همه آن فایل ها در این یک فایل ایمپورت شده اند.  با کلیک روی این فایل کنترل آن را برای خروجی در دست خواهید گرفت. در سمت راست استایل خروجی را به Compressed  تغییر دهید و باکلیک راست روی خود فایل مسیر خروجی آن را به CSS/_ تغییر دهید. و سپس گزینه کامپایل را فشار دهید و اکنون میتوانید با مراجعه به سابلایم ببینید که فایل bootstrap.css در مسیر مورد نظر ایجاد شده است. برای شیوه نامه های خودمان نیز در داخل سابلایم و داخل فولدر less یک فایل باسم mystyles.less_ ایجا میکنیم و سپس با مراجعه به کدکیت و زدن refresh آن را مشاهده میکنیم که با کلیک روی آن در سمت راست تیک Do Not compile directly را بر میداریم و سپس با کلیک راست روی آن مسیر خروجیش را به جایی تغییر میدهیم که قبلا bootstrap.css را آنجا گذاشتیم و از اول اسمش _    را نیز برمیداریم.

 چنانچه در پروژه مان نخواهیم از بعضی از قابلیت های bootstrap استفاده کنیم راهش این است که به bootstrap.less مراجعه کنیم و دستور import راجع به آن را غیرفعال کنیم. 

۲- در مورد جاوا اسکریپت ها بدلیل نبود Import قضیه متفاوت است و تمام فایل ها فعال هستند. بدلیل وابستگی این اسکریپت ها به همدیگر ترتیب استفاده از همه آنها بسیار مهم است که در اینجا این ترتیب ذکر میشود.

// @codekit-prepend "jquery.js"

// @codekit-prepend "affix.js"

// @codekit-prepend "transition.js"

// @codekit-prepend "tooltip.js"

// @codekit-prepend "alert.js"

// @codekit-prepend "button.js"

// @codekit-prepend "carousel.js"

// @codekit-prepend "collapse.js"

// @codekit-prepend "dropdown.js"

// @codekit-prepend "modal.js"

// @codekit-prepend "popover.js"

// @codekit-prepend "scrollspy.js"

// @codekit-prepend "tab.js"

با ایجاد یک فایل جدید به اسم bootstrap.js_در داخل پوشه js مربوط به components   کدهای بالا را در آن کپی میکنیم. یک فایل دیگر به اسم myscrip.js_ در همین مسیر ایجاد میکنیم و سپس با مراجعه به کدکیت و زدن refresh و با برداشتن تیک برای آنها ، اجازه کامپایل مستقیم را به آنها میدهیم. و مسیر خروجی آنها را به فولدر js داخل _ تغییر میدهیم و اسمهای آنها را به myscript و bootstrap تغییر میدهیم. در قسمت Check syntax withگزینه nothing را برای هر دو انتخاب میکنیم و سپس concatenate + minify  را انتخاب میکنیم و سپس کامپایل .