תוֹכֶן
רצי משימות של JavaScript כמו Grunt הפכו פופולריים מאוד בקרב מפתחי חזית. הסיבה לכך היא שהם עוזרים לעשות את הדבר היחיד שכולנו רוצים לעשות בעבודות שלנו - לחסוך זמן!
אבל עם יותר מ -5,000 (וספירה) תוספי גרנט זמינים כעת, זה יכול להיות קשה למפתחים למצוא את היהלומים האלה במחוספס. הסתכלנו לאחור בתקופתנו להיתקע בגראנט כדי למצוא את המתכון המושלם של תוספי גרונט שעליכם להשתמש.
01. הפוך
כל מפתח חזית ששווה את המלח שלו יודע על היתרונות שיש במינימום קבצי JavaScript, וזה בדיוק מה שהתוסף הזה עושה. כזו היא הפופולריות שלה, היא למעשה כלולה במדריך לתחילת העבודה של גרונט. למרות השם, ניתן להשתמש בתוסף זה גם לייפות קוד JavaScript שלך - אם כי זה לא שימושי במיוחד לשימוש בייצור.
02. סאס
יכול להיות שיש ויכוח לגבי איזה מעבד מראש של CSS באמת שולט בתפקיד, אבל כאן ב- Stickyeyes, התמקמנו על סאס ולא על יריבתו העיקרית, פחות. פלאגין זה מאפשר לנו לכתוב את קבצי ה- Sass שלנו ולהרכיב אותם באופן אוטומטי ל- CSS. היתרונות של שימוש במעבד טרום-מעבד CSS מצדיקים מאמר נפרד בפני עצמו, אך אפשר לומר שאם אתה כבר לא משתמש בכזה אתה מאחר מאוד למסיבה!
03. CSSMin
תוסף זה הוא המקבילה ל- CSS של Uglify. זה פשוט מקבל קבצי CSS שצוינו ומצמצם אותם. כמובן שאם אתה מתכוון להשתמש בזה בשילוב עם תוסף Sass אז עליך לוודא שמשימה זו מתבצעת לאחר משימת Sass.
ישנן המון אלטרנטיבות ל- CSSMin אשר יכולות גם להקטין את גודל קבצי ה- CSS שלך בטכניקות שונות במקצת; CSS ננו, CSS עיקול, CSS התכווצות וכו 'קרא את אמת מידה שימושית זו אם אתה מתעניין בסוג כזה.
04. קונקאט
כפי שהשם מרמז, תוסף זה פשוט לוקח מספר קבצים ומשרשר אותם לאחד. כמו בקידור קוד, שרשור קבצים הוא גם שיטה מומלצת עתיקת יומין להפחתת זמני טעינת הדפים.
יש להשתמש תמיד בשרשור קבצים בייצור עבור JavaScript ו- CSS. זוהי בדרך כלל המשימה האחרונה שהופעלה - לאחר משימת עיבוד מוקדמת של CSS ומשימה מזערית. קל פשוט להגיד לתוסף זה לשרשר את כל הקבצים בספרייה ספציפית, אך היזהר מהסדר שהקבצים ישורשרו - ייתכן שתצטרך לתת הזמנה ספציפית או לתת שם לקבצים כך שהם תמיד ישורשרו לפי הסדר הרצוי. .
05. ImageMin
באותו אופן כמו CSSMin ו- Uglify, ImageMin מתמודד עם בעיה עתיקת יומין עבור טעינת העמודים - גודל קובץ התמונה. 'מינימום תמונה' הוא בדרך כלל יציאת שיחה ראשונה לאופטימיזציה, ולכן תוסף זה חיוני בכדי להפחית את גודל קובץ העמודים הכולל ככל האפשר.
אם אתה עובד עם JPG, PNG, GIF או SVG (פורמט תמונות וקטור יותר ויותר פופולרי), תוסף זה יביא להפחתה ללא הפסד בגודל הקובץ של התמונות שלך, מבלי שתצטרך להרים אצבע. אם יש לך הרבה תמונות בפרויקט שלך, מומלץ להפעיל את המשימה רק כאשר אתה דוחף להפקה, במקום להפעיל את המשימה באירוע צפייה (ראה הנקודה הבאה).
06. צפו
תוסף זה אינו משפיע למעשה על חזית האתר שלך, אך הוא שימושי ביותר ביצירת תהליך Grunt יעיל. Watch פשוט שומר על ספריות שתציין, וברגע שמשהו ישתנה הוא יפעיל באופן אוטומטי משימות גרונט מסוימות.
אז אתה יכול להגדיר תנאי צפייה אחד בספריית 'js' שלך להפעלת משימות ה- JavaScript שלך, ואחר בספריית 'css' שלך להפעלת משימות ה- CSS שלך. פירוש הדבר שלעולם לא תצטרך להפעיל באופן ידני את תהליך הגרונט הראשי שלך! פשוט אתחלו את משימת השעון הגונן לפני שתתחילו לבצע שינויים ותוכלו לשכוח שהיא אפילו שם.
מילים: ג'יימי שילדס
ג'יימי שילדס הוא מפתח אחורי בסוכנות השיווק הדיגיטלי Stickyeyes.
ככה? קרא את זה!
- Grunt vs Gulp: באיזה כלי לבנות JavaScript כדאי לבחור?
- 8 דרכים לשיפור מערך הגראנט שלך
- ערכות הנושא הטובות ביותר של WordPress בחינם
