محتوا
برنامه های جاوا اسکریپت مانند Grunt بسیار محبوب محبوب توسعه دهندگان جلویی شده اند. این به این دلیل است که آنها به انجام کاری کمک می کنند که همه ما می خواهیم در مشاغل خود انجام دهیم - صرفه جویی در وقت!
اما با در دسترس بودن بیش از 5000 افزونه Grunt (و با شمارش) اکنون ، یافتن این الماسها برای توسعه دهندگان دشوار است. ما نگاهی به زمان گیر افتادن در Grunt انداختیم تا دستورالعمل کاملی از پلاگین های Grunt را که باید استفاده کنید بیابیم.
01. Uglify
هر توسعه دهنده جلویی که ارزش نمک خود را دارد ، از مزایای کوچک کردن فایل های JavaScript اطلاع دارد و این دقیقاً همان کاری است که این افزونه انجام می دهد. محبوبیت آن بسیار زیاد است ، در واقع در راهنمای شروع کار Grunt گنجانده شده است. با وجود نام ، این پلاگین همچنین می تواند برای زیباسازی کد JavaScript شما نیز مورد استفاده قرار گیرد - اگرچه این مورد برای استفاده در تولید چندان مفید نیست.
02. ساس
ممکن است بحثی در مورد اینکه پیش پردازنده CSS واقعاً چگونه کار می کند ، وجود داشته باشد ، اما در اینجا در Stickyeyes به جای رقیب اصلی آن ، Less ، به ساس پرداخته ایم. این افزونه ما را قادر می سازد تا پرونده های Sass خود را بنویسیم و به طور خودکار در CSS کامپایل شوند. محاسن استفاده از پیش پردازنده CSS خود مقاله جداگانه ای را تضمین می کند ، اما به راحتی می توان گفت که اگر قبلاً از آن استفاده نمی کنید خیلی دیر به مهمانی می روید!
03. CSSMin
این افزونه معادل CSS Uglify است. به سادگی هر پرونده CSS مشخص شده را دریافت کرده و آنها را کوچک می کند. مطمئناً اگر می خواهید این مورد را به همراه افزونه Sass استفاده کنید ، باید اطمینان حاصل کنید که این کار بعد از کار Sass اجرا شده است.
گزینه های زیادی برای CSSMin وجود دارد که می تواند با استفاده از تکنیک های کمی متفاوت ، اندازه پرونده های CSS شما را کاهش دهد. CSS nano ، CSS wring ، CSS shrink و غیره اگر این نوع موارد را دارید ، این معیار مفید را بخوانید.
04. Concat
همانطور که از نامش پیداست ، این پلاگین به سادگی چندین پرونده را می گیرد و آنها را در یک فایل قرار می دهد. همانند کوچک کردن کد ، الحاق فایل ها نیز یک روش قدیمی برای کاهش زمان بارگذاری صفحه است.
از ادغام پرونده باید همیشه برای تولید JavaScript و CSS استفاده شود. این معمولاً آخرین کاری است که باید اجرا شود - پس از کار پیش پردازش CSS و کار کوچک سازی. ساده است که فقط به این پلاگین بگویید تا همه پرونده ها را در یک فهرست خاص بهم پیوند دهد ، اما از ترتیب به هم پیوستن پرونده ها برحذر باشید - ممکن است لازم باشد که دستور خاصی بدهید یا فایل ها را نام ببرید تا همیشه به ترتیب دلخواه شما تلفیق شوند. .
05. ImageMin
همانند CSSMin و Uglify ، ImageMin یکی دیگر از مشکلات قدیمی بارگذاری صفحه را برطرف می کند - اندازه فایل تصویر. Image 'minification' معمولاً اولین تماس برای بهینه سازی است ، بنابراین این افزونه برای کاهش اندازه پرونده کل صفحه تا حد ممکن ضروری است.
اگر با JPG ، PNG ، GIF یا SVG کار می کنید (یک قالب تصویری برداری که به طور فزاینده ای محبوب می شود) ، این افزونه باعث می شود بدون نیاز به بلند کردن انگشت ، در اندازه پرونده تصاویر شما بدون ضرر کاهش یابد. اگر تصاویر زیادی در پروژه خود دارید ، بهتر است این کار را فقط هنگامی که به سمت تولید فشار می دهید اجرا کنید ، نه اینکه این کار را در یک رویداد تماشا کنید (به قسمت بعدی مراجعه کنید).
06. تماشا کنید
این افزونه در واقع جلوی وب سایت شما را تحت تأثیر قرار نمی دهد ، اما در ایجاد یک روند کارآمد Grunt بسیار مفید است. سازمان دیده بان به راحتی مراقب هر دایرکتوری ای است که تعیین می کنید و هرگاه تغییری تغییر کرد ، به طور خودکار برخی از کارهای Grunt را تحریک می کند.
بنابراین ممکن است برای اجرای وظایف JavaScript خود یک شرط تماشا در فهرست 'js' خود تنظیم کنید و دیگری برای اجرای وظایف CSS در فهرست 'css' خود. این بدان معناست که شما هرگز مجبور نیستید فرآیند اصلی Grunt خود را به صورت دستی اجرا کنید! فقط قبل از شروع تغییر کار تماشای ناراحت را مقدماتی تنظیم کنید و می توانید آن را حتی در آنجا فراموش کنید.
کلمات: جیمی شیلدز
جیمی شیلدز یک توسعه دهنده عقب در آژانس بازاریابی دیجیتال Stickyeyes است.
مثل این؟ این را بخوان!
- Grunt vs Gulp: کدام ابزار ساخت جاوا اسکریپت را باید انتخاب کنید؟
- 8 روش برای بهبود تنظیمات Grunt
- بهترین تم های رایگان وردپرس
