כיצד להשתמש Grunt כדי להפוך את זרימת העבודה שלך [הדרכות]

אני עו"ד ענק של אוטומציה כי זה עושה את החיים הרבה יותר פשוט. למה לבזבז זמן על משימות מניאלי, מונוטוני למצוץ את כוח החיים שלך החוצה כאשר יש לך מחשב לעשות דברים בשבילך? זה נכון במיוחד עבור פיתוח האינטרנט.

משימות פיתוח רבות יכולות להיות מטלה. בעת פיתוח ייתכן שתרצה לקמפל קוד, כאשר דוחפים גרסת פיתוח אתה יכול לשרשר ולהקטין קבצים, להסיר משאבים פיתוח בלבד, וכן הלאה. אפילו אלה מסובכים יחסית כמו מחיקת חבורה של קבצים, או שינוי שם תיקיות יכול לקחת נתח גדול של הזמן שלנו.

במאמר זה אני אראה לך איך אתה יכול לעשות את החיים שלך קל יותר על ידי מינוף את הפונקציונליות מעולה המוצעים על ידי Grunt, Runner המשימה Javascript. אני ידריך אותך לאורך כל התהליך ולכן לא לדאוג גם אם אתה לא אשף Javascript!

עוד על Hongkiat.com:

CSSMatic עושה CSS קל עבור מעצבי אינטרנט
אוטומציה משימות ב- Mac עם פעולות תיקיה
אוטומציה קבצי Dropbox שלך עם פעולות
10 אפליקציות שיסייעו להפוך את המשימות לאוטומטיות במכשיר Android
כיצד (אוטומטית) גיבוי האתר שלך לתוך

התקנת Grunt

התקנת Grunt היא די קלה כי היא משתמשת מנהל החבילה הצומת. משמעות הדבר היא כי ייתכן שיהיה עליך להתקין את הצומת עצמו. פתח מסוף או שורת פקודה (אני אקרא למסוף זה מעתה והלאה) והזן nmp -v.

אם אתה רואה מספר גרסה יש לך npm מותקן, אם אתה רואה שגיאה "הפקודה לא נמצא", תצטרך להתקין אותו על ידי לחיצה על דף הורדות הצומת ובחירה בגירסה שאתה צריך.

לאחר הצומת מותקן, מקבל Grunt הוא עניין של פקודה אחת שהונפקו במסוף:

npm להתקין -g grunt-cli

שימוש בסיסי

אתה תשתמש Grunt על פרויקט לפרויקט בסיס מאז כל פרויקט יהיה דרישות שונות. בואו נתחיל פרוייקט עכשיו על ידי יצירת תיקייה וניווט אליו דרך הטרמינל שלנו גם כן.

שני קבצים מהווים את לבו של Grunt: חבילה ו Gruntfile.js. קובץ החבילה מגדיר את כל תלות צד שלישי אוטומציה שלך ישתמש, Gruntfile מאפשר לך לשלוט איך בדיוק אלה משמשים. בוא ניצור קובץ חבילה חשופה כעת עם התוכן הבא:

"name": "test-project", "version": "1.0", "devDependencies": "grunt": "~ 0.4.5",

השם והגירסה תלוי בך, התלות חייבת להכיל את כל החבילות שבהן אתה משתמש. אנחנו לא עושים שום דבר כרגע, אז אנחנו רק נדאג שגרון עצמו יתווסף לתלות.

ייתכן שאתה שואל את עצמך מה קו squiggly (~) בשם tilde עושה שם.

גרסאות יכולות להידרש על פי הכללים של הגרסה הסמנטית עבור npm. בקצרה:

אתה מציין גרסה מדויקת כמו 4.5.2
אתה יכול להשתמש יותר מ / קטן מאשר לציין גרסה מינימלית או מקסימלית כגון > 4.0.3
באמצעות tilde מציין בלוק גרסה. שימוש ~ 1.2 הוא נחשב 1.2.x, כל גירסה מעל 1.2.0 אבל מתחת 1.3

הרבה יותר דרכים לציין גרסאות זמין אבל זה מספיק עבור רוב הצרכים. השלב הבא הוא ליצור Gruntfile אשר יבצע אוטומציה שלנו.

 module.exports = function (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json'); grunt.registerTask ('ברירת מחדל', []); ;

זהו בעצם השלד עבור Gruntfile; יש שני מקומות מעניינים. מיקום אחד הוא בתוך initConfig () פונקציה. זה המקום שבו כל תצורת הפרויקט שלך הולך. זה יכלול דברים כמו טיפול LESS / SASS הידור, צמצום סקריפטים וכן הלאה.

המיקום השני הוא מתחת לפונקציה שבה אתה מציין משימות. אתה יכול לראות משימה אחת שצוין בשם “ברירת המחדל”. הוא ריק כרגע, כך שהוא לא עושה כלום, אבל אנחנו נרחיב על זה מאוחר יותר. משימות למעשה בתור למעלה חתיכות וחלקים מתוך תצורת הפרויקט שלנו ולבצע אותם.

לדוגמה, משימה בשם “סקריפטים” יכול לשרשר את כל הסקריפטים שלנו, ולאחר מכן לצמצם את הקובץ שהתקבל ולאחר מכן להעביר אותו למיקום הסופי שלו. שלושת הפעולות הללו מוגדרות כולן בתצורת הפרוייקט, אך הן מוגדרות “משכו” על ידי המשימה. אם זה לא ברור עדיין עדיין לא לדאוג, אני אראה לך איך זה נעשה.

המשימה הראשונה שלנו

בואו ליצור משימה אשר ממזערת קובץ JavaScript אחד עבורנו.

ישנם ארבעה דברים שאנחנו צריכים לעשות בכל פעם שאנחנו רוצים להוסיף משימה חדשה:

התקן פלאגין במידת הצורך
דרוש את זה Gruntfile
כתוב משימה
הוסף אותו לקבוצת משימות במידת הצורך

מצא והתקן את התוסף

הדרך הקלה ביותר למצוא את הפלאגין שאתה צריך זה להקליד משהו כזה לתוך Google: “להקטין את”. התוצאה הראשונה צריכה להוביל אותך לגרגר- contrib-uglify תוסף וזה בדיוק מה שאנחנו צריכים.

דף Github אומר לך את כל מה שאתה צריך לדעת. ההתקנה היא שורה אחת במסוף, הנה מה שאתה צריך להשתמש:

 npm להתקין grunt-contrib-uglify - save-dev

ייתכן שיהיה עליך להפעיל את זה עם priviledges מנהל. אם אתה מקבל משהו כמו npm ERR! נסה להפעיל את הפקודה שוב כשורש / מנהל. לאורך הדרך פשוט הקלד sudo לפני הפקודה והזן את הסיסמה שלך כאשר תתבקש:

 sudo npm להתקין grunt-contrib-uglify - save-dev

פקודה זו ממש מנתח את חבילה קובץ ומוסיף אותו כמו תלות שם, אתה לא צריך לעשות את זה באופן ידני.

(2) נדרש Gruntfile

השלב הבא הוא להוסיף Gruntfile שלך כדרישה. אני רוצה להוסיף plugins בחלק העליון של הקובץ, הנה שלי Gruntfile מלאה לאחר הוספת grun.loadNpmasks ("לגנוח-להכפיש");.

 module.exports = function (grunt) grunt.loadNpmTasks ('גניחה- contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json'); grunt.registerTask ('ברירת מחדל', []); ;

(3) צור משימה להקטנת סקריפטים

כפי שאנו דנו, זה צריך להיעשות בתוך initConfig () פונקציה. דף Github עבור תוסף (ורוב plugins אחרים) נותן לך שפע של מידע ודוגמאות. הנה מה השתמשתי בפרויקט הבדיקה שלי.

 uglify: build: src: 'js / scripts.js', dest: 'js / scripts.min.js'

זה די פשוט, ציינתי את סקריפטים קובץ בספריית js של הפרויקט שלי ואת היעד של הקובץ ממוזערות. יש דרכים רבות לציין קובצי מקור, נבחן זאת מאוחר יותר.

לעת עתה, בואו נסתכל על Gruntfile מלאה לאחר זה נוספה, כדי לוודא שאתה יודע איך הדברים משתלבים יחד.

 module.exports = function (grunt) grunt.loadNpmTasks ('גניחה- contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), uglify: build: src: 'scripts.js', dest: 'scripts.min.js'; grunt.registerTask ('ברירת מחדל', []); ;

(4) הוסף תצורה זו לקבוצת משימות

עכשיו אתה יכול ללכת למסוף שלך סוג גונחת אבל אנחנו צריכים קבוצות משימה כדי להפעיל מספר משימות מאוחר יותר. יש לנו את המשימה ברירת המחדל ריקה, רק מחכה משהו כדי להוסיף אז בואו לשנות את זה את הדברים הבאים:

 grunt.registerTask ('ברירת מחדל', ['uglify']);

בשלב זה אתה אמור להיות מסוגל ללכת אל הטרמינל, הקלד גניחה ולראות את ההקרנה מתרחשת. אל תשכח ליצור סקריפטים קובץ כמובן!

זה לא לקח הרבה זמן כדי להגדיר עשה את זה? גם אם אתה חדש לכל זה לקח לך קצת זמן לעבוד דרך השלבים, הפעם זה חוסך יהיה לעלות על משך הזמן על זה בתוך כמה שימושים.

קבצים משלימים

בואו נסתכל על קבצים משורשרים למד כיצד לציין מספר קבצים כיעד בדרך.

שרשור הוא תהליך של שילוב תוכן של מספר קבצים לקובץ יחיד. נצטרך את תוסף לגרוס- contrib-concat. הבה נעבור את השלבים הבאים:

כדי להתקין את תוסף הפלאגין npm להתקין grunt-contrib-concat - save-dev בטרמינל. לאחר נעשה, הקפד להוסיף אותו Gruntfile שלך בדיוק כמו לפני השימוש grun.loadNpmasks ("גרגר- contrib-concat");.

הבא הוא תצורה. בואו לשלב שלושה קבצים ספציפיים, התחביר יהיה מוכר.

 קונט: dist: [src: ['dev / js / header.js', 'dev / js / myplugin.js', 'dev / js / footer.js'], dest: 'js / scripts.js' ,,

הקוד לעיל לוקח את שלושת הקבצים שניתנו כמקור ומשלב אותם לקובץ הנתון כיעד.

זה כבר די חזק אבל מה אם קובץ חדש נוסף? האם אנחנו צריכים לחזור לכאן כל הזמן? כמובן שלא, אנו יכולים לציין תיקייה שלמה של קבצים כדי לשרשר.

 קונקט: dist: src: 'dev / js / *. js "], dest:' js / scripts.js ',,

עכשיו, כל קובץ JavaScript בתוך התיקייה dev / js ימוזג לתוך קובץ אחד גדול: js / scripts, הרבה יותר טוב!

עכשיו זה הזמן ליצור משימה כדי שנוכל למעשה שרשור כמה קבצים.

 grunt.registerTask ('mergejs', ['concat']);

זו לא המשימה ברירת המחדל יותר אז אנחנו צריכים להקליד את שמו במסוף כאשר אנו בעיה גניחה פקודה.

 לגנוח מיזוגים

אוטומציה האוטומציה שלנו

אנחנו כבר עשה הרבה התקדמות אבל יש יותר! לעת עתה, כאשר אתה רוצה לשרשר או לצמצם אתה צריך ללכת הטרמינל ואת הפקודה המתאימה. הגיע הזמן שנעיף מבט שעון אשר תעשה את זה בשבילנו. נלמד גם כיצד לבצע משימות mulitple בבת אחת, לאורך הדרך.

כדי להתחיל, נצטרך לתפוס את השעון. אני בטוח שאתה יכול להתקין אותו ולהוסיף אותו Gruntfile על yuor שלך עכשיו, אז אני אתחיל על ידי מראה לך מה אני משתמש בפרויקט הבדיקה שלי.

 Watch: [scripts: files: ['dev / js / *. js'], משימות: ['concat', 'uglify'],

אני שם קבוצה של קבצים לצפות “סקריפטים”, רק אז אני יודע מה זה עושה. בתוך אובייקט זה יש לי קבצים שצוינו כדי לצפות ומשימות לרוץ. בדוגמה הקודמת שרשרבנו יחד את כל הקבצים בספריה dev / js.

בדוגמת המיניפיקציה צמצםנו את הקובץ. זה הגיוני לראות את התיקייה dev / js לשינויים ולהפעיל את המשימות האלה בכל פעם שיש.

כפי שניתן לראות, משימות מרובות ניתן לקרוא בקלות על ידי הפרדתם עם פסיקים. הם יבוצעו ברצף, תחילה את שרשור, ולאחר מכן את ההקטנה במקרה זה. זה יכול להיעשות גם עם קבוצות משימה, וזה סוג של למה הם קיימים.

כעת אנו יכולים לשנות את משימת ברירת המחדל שלנו:

 grunt.registerTask ('ברירת מחדל', ['concat', 'uglify']);

עכשיו יש לנו שתי אפשרויות. בכל פעם שאתה רוצה לשרשר ולהקטין את הסקריפטים שלך אתה יכול לעבור למסוף ולהקליד גניחה. תוכל גם להשתמש בפקודת השעון כדי להתחיל את הצפייה בקבצים שלך: שעון.

זה יהיה לשבת שם, מחכה לך לשנות את הקבצים האלה. ברגע שאתה עושה, זה יבצע את כל המשימות שהוקצו לו, קדימה, לנסות את זה.

זה הרבה יותר טוב, לא צריך קלט מאיתנו. עכשיו אתה יכול לעבוד עם הקבצים שלך והכל יהיה יפה לעשות בשבילך.

סקירה כללית

עם ידע בסיסי זה איך plugins יכול להיות מותקן בשימוש וכיצד פועל פקודת השעון, אתה מוכן להיות מכור אוטומציה עצמך. יש הרבה יותר לגרונט ממה שאנחנו דנו אבל שום דבר שאתה לא יכול להתמודד לבד.

באמצעות פקודות להרכבת SASS, אופטימיזציה של תמונות, autopreixing ועוד היא רק עניין של ביצוע הצעדים בהם דנו ולקרוא את התחביר התוסף דורש.

אם אתה יודע על כמה שימושים גדולים במיוחד עבור Grunt אנא יידע אותנו בתגובות, אנחנו תמיד מעוניינים לשמוע איך אתה משתמש בכלים כמו Grunt!