בפרוייקטים גדולים ישנם הרבה קבצי CSS ו-JavaScript, במידה ולא נשתמש בשיטה של דחיסה ואיחוד קבצי CSS או דחיסה ואיחוד קבצי JavaScript, נצטרך לדאוג להוסיף בקבצי ה-HTML שלנו תגיות <link> ו-<script> עבור קריאת לקבצי ה-CSS וה-JavaScript בהתאמה.
במקרים כאלו, יהיה לנו מאוד קשה לעקוב ולעדכן את הקוד ככה שיטען את כל קבצי ה-CSS וה-JavaScript של הפרוייקט, לכן נצטרך מעין מנגנון שיזריק לנו אותם בצורה דינאמית, עם Gulp נוכל להגיע לפתרון של מצב זה ע״י שימוש בספרייה gulp-inject.
שלב ראשון – התקנת סיפריות
על מנת להתחיל נצטרך להתחיל מהשלב הראשוני של התקנת הסיפריות, נפתח את הטרמינל וננווט לתיקיית הפרוייקט, ונריץ את הפקודה הבאה אשר תגדיר ותתקין את הסיפריות gulp ו-gulp-inject.
npm install --save-dev gulp gulp-injectשלב שני – יצירת המשימה
על מנת להשתמש בסיפרייה gulp-inject נצטרך לכתוב את המשימה אשר תדאג לרוץ על כל קבצי ה-CSS וה-JavaScript שלנו ותדאג ״להזריק״ אותם במיקום הרלוונטי. נפתח את הקובץ gulpfile.js ונדביק את הקוד הבא:
/**
* Automation with Gulp
*/
// Dependencies
var gulp = require( 'gulp' );
var inject = require( 'gulp-inject' );
// Variables
var CSS_SRC = [ 'assets/css/vendor/*.css', 'assets/css/*.css' ];
var JS_SRC = [ 'assets/js/vendor/*.js', 'assets/js/*.js' ];
var HTML_FILES = '*.html';
// Tasks
gulp.task( 'inject-assets', function () {
return gulp
.src( HTML_FILES )
.pipe( inject( gulp.src( CSS_SRC, { read: false } ) ) )
.pipe( inject( gulp.src( JS_SRC, { read: false } ) ) )
.pipe( gulp.dest( './' ) );
} );המשימה שלנו מבקשת לקרוא את כל קבצי ה-HTML של הפרוייקט שלנו, ועבור כל אחד מהם אנו נריץ את סיפריית gulp-inject כאשר לה נקרא פעמיים, בפעם הראשונה עבור קבצי ה-CSS ובפעם השנייה עבור קבצי ה-JavaScript. שימו לב שהפעם אנו מעבירים כפרמרטר שני אובייקט JSON אשר אומר ל-Gulp שאין צורך לקרוא את קבצי ה-CSS וה-JavaScript, אלא רק לקבל את רשימת הקבצים.
שלב שלישי – הגדרת מיקומים
כאשר נפתח את קובץ ה-HTML שלנו, ונגדיר איפה ״להזריק״ את קבצי ה-CSS וה-JavaScript שלנו, אנו נשתמש בהערות ב-HTML על מנת להגדיר את המיקומים.
הגדרת מיקום קבצי CSS
<!-- inject:css -->
<!-- endinject -->הגדרת מיקום קבצי JavaScript
<!-- inject:js -->
<!-- endinject -->סיכום
במידה ואתם עובדים עם הרבה קבצי CSS ו-JavaScript ואתם לא מעוניינים לאחד את הקבצים, gulp-inject תעזור לכם ״להזריק״ בצורה דינאמית את קבצים אלו בקבצי ה-HTML של הפרוייקט. לסיפרייה יש עוד המון פיצ׳רים ואפשרויות שונות אשר מאפשרות לנו לבצע כל מיני פעולות כדי להתאים לפרוייקט שלנו, על מנת לראות את האופציות השונות, ניתן להיכנס לעמוד של הסיפרייה.