תחילת העבודה עם Gulp.js

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

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

התקנת גביע

אל תדאג, ההתקנה היא קלה מאוד. נצטרך להשתמש במסוף ב- OSX ו- Linux או בשורת הפקודה של Windows. אני מתכוון להיות זה כמו טרמינל מעתה והלאה.

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

אם אתה מקבל “פקודה לא נמצאה” (או שגיאה דומה), הראש למטה אל הדף הורדות Node.js ובחר את החבילה המתאימה עבור המערכת שלך. לאחר ההתקנה, הפקודה npm תהיה זמינה במסוף.

התקנת גביע היא פשוט כמו. הדבק את הפקודה הבאה למסוף, זהו זה:

npm להתקין -

זה יתקין את הפקודה Gulp אשר יהיה זמין באופן גלובלי על המערכת שלך.

הוספת גביע לפרויקט

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

npm להתקין - save-dev gulp

זה אמור ליצור תיקייה node_modules ו npm-debug.log קובץ בתיקייה הפרויקט שלך. אלה משמשים את ג 'ולפ לעשות את הדבר שלו לפרויקט שלך, אתה לא צריך לחשוב עליהם בשלב זה.

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

הגולפייל

Gulpfile הוא המקום שבו הקסם קורה, זה המקום שבו אתה מגדיר אוטומציות שאתה צריך ו כאשר אתה רוצה שהם יתרחשו. בואו ליצור משימה ברירת מחדל ריקה על ידי יצירת קובץ בשם gulpfile.js והדבקת הקוד הבא בתוכה.

var gulp = דרוש ("גמיעה"); gulp.task ('ברירת מחדל', function () // זה לא עושה כלום לעת עתה, נוסיף פונקציונליות בקרוב);

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

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

העתקת קובץ

זה משעמם, אני מודה בזה, אבל זה יעזור לך להבין מה קורה בקלות.

בתיקיית הפרוייקט שלך צור קובץ בשם to_copy.txt , ותיקייה בשם התה. בוא נלך לתוך Gulpfile שלנו וליצור משימה חדשה בשם עותק.

gulp.task ('copy', function () return gulp.src ('to_copy.txt') .pipe (gulp.dest ('dev'););

השורה הראשונה מגדירה משימה בשם העתק. בתוך זה אנו משתמשים gulp.src כדי לציין אילו קבצים אנו מתמקדים עם משימה זו - במקרה זה הוא קובץ אחד בשם to_copy.txt.

לאחר מכן אנו מקבצים קבצים אלה לפונקציה gulp.dest אשר מציינת היכן אנחנו רוצים לשים את הקבצים האלה - השתמשתי במדריך dev.

חזור אל המסוף והקלד להעתיק גביע כדי להריץ משימה זו, יש להעתיק את הקובץ שצוין לספריה שצוין, משהו כזה:

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

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

gulp.task ('copy', function () return gulp.src ('development / *') .pipe (gulp.dest ('Production'););

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

עריכת SASS

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

אני מקליד סאס גביע לתוך גוגל, התוצאה הראשונה היא בדרך כלל מה שאני צריך, אתה צריך למצוא את הדף עבור חבילת SASS. זה מראה לך איך להתקין את זה (npm להתקין gulp- סאס). רוב הסיכויים שאתה צריך להשתמש sudo כדי להתקין אותו כמנהל, אז זה יהיה כנראה (sudo npm להתקין gulp-sass) .

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

$ primary: # ff9900; גוף background: $ primary; 

עכשיו ליצור את המשימה הבאה גביע ב Gulpfile.

gulp.task ('sass', function () (gulp.src ('*. scss') .pipe (sass ()) .pipe (gulp.dest ('/ css'););

לפני הפעלת הפקודה, אל תשכח "לדרוש" את החבילה בחלק העליון של Gulpfile ככה:

var sass = דרוש ('גמיעה-סאס');

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

צפייה קבצים ותיקיות

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

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

gulp.task ('automate', function () gulp.watch ('*. scss', ['sass']););

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

אם אתה עכשיו לשנות את style.scss קובץ זה צריך להיות הידור לקובץ css בתוך ספריית css באופן אוטומטי.

הפעלת משימות מרובות

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

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

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

var gulp = דרוש ("גמיעה"); var uglify = דורשים ('לגמוע-להכשיל'); var concat = דרוש ('גמיעה-קונקט'); var sass = דרוש ('גמיעה-סאס'); gulp.task ('scripts', function ()) gulp.src ('js / ** / *. js') .pipe (concat ('scripts.js')) .pipe (gulp.dest ('.') ) .pipe (uglify ()) .pipe (gulp.dest ('.'))); gulp.task ('סגנונות', function () (gulp.src ('/ *. scss') .pipe (sass ()) .pipe (gulp.dest ('/ css');); gulp.task ('automate', function () (scripts ',' סגנונות '];; gulp.task ('ברירת מחדל', ['scripts', 'styles']);

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

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

אם תקלידו לגימה (משימת ברירת המחדל), סקריפטים המשימה תפעל, ואחריה סגנונות משימה.

ה לגימה להפוך המשימה צופה תיקיות מרובות עבור שינויים קבצי scss ו- js שלנו יבצע שתי משימות שהגדרנו, אם זוהה שינוי.

סקירה כללית

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

• חפש תוסף
• התקן את הפלאגין
• דרוש תוסף ב- Gulpfile שלך
• השתמש בתחביר בתיעוד

חמש פקודות זמין גביע (משימה, לרוץ, לצפות, src, dest) הם היחידים שאתה צריך לדעת, כל addons צד שלישי יש תיעוד גדול. הנה רשימה של כמה דברים שאני משתמש בהם שאתה יכול להתחיל עם עכשיו:

• ביצוע אופטימיזציה של תמונות באמצעות אופטימיזציית Gulp-image
• יצירת sprites תמונה עם גביע- sprite
• חיבור קבצים עם גביע- concat
• צמצום קבצים עם לגימה- uglify
• מחיקת קבצים עם gulp-del
• Javascript linting עם ג 'לנט- jslint
• JSON מרטיב בלגימה- jsonlint
• Autoprefix CSS עם gulp-autoprefixer
• חיפוש והחלפה באמצעות גמיעה- frep
• צמצם CSS עם גמיעה-מזער-css