מבוא ל-gulp.js
gulp מבצע אוטומציה של משימות נפוצות (ומעיקות) בצד הקליינט באמצעות פלגאינים. לדוגמה, פלגאינים שאחראים לדחיסה ומיניפיקציה של קבצי CSS ו-JS, קומפילציה של קבצי SASS ו- LESS, הוספת קידומות לתגיות-CSS3, המרת תמונות מפורמט לפורמט, ועוד אלפי פלגאינים שיכולים לבצע בשבילנו את המשימות המעיקות, ולהשאיר לנו את החלק המעניין באמת.
את המשימות ש-gulp מבצע בשביל הפרויקט שלנו נרכז בתוך קובץ gulpfile.js. מבנה הקובץ מתחלק ל-4 סוגי משימות:
- החלק הראשון שבו אנו מגדירים את התלויות (הפלגאינים) שנדרשים לנו לפרויקט.
- חלק שני של named tasks שבהם נגדיר את המשימות שאנו מעוניינים לבצע.
- חלק שלישי שבו נגדיר משימות מסוג watch tasks . משימות שמריצות את המשימות מסוג named tasks בתגובה לאירועים שונים. לדוגמה, ניתן לשים watch על קבצי ה-sass כדי לעשות קומפילציה ל-CSS בזמן אמת בכל פעם שמבצעים שינויים בקבצים.
- חלק רביעי שבו נרכז משימות מסוג default task שמאפשרות לנו להריץ את כל המשימות שהזכרנו בסעיפים הקודמים משורת הפקודות.
האיור הבא מציג את החלקים השונים בקובץ gulpfile.js:
Requirements
var uglifier = require('gulp-uglify'),
Named task #1
gulp.task('scripts',function(){});
Named task #2
gulp.task('styles',function(){});
...
Watch task
gulp.task('watch', function(){});
Default task
gulp.task('default', ['scripts', 'styles']);
במדריך הבא נלמד כיצד להתקין את gulp באתר שלנו.
