תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

מדריך gulp - קומפילציה של קבצי sass

מחבר:
בתאריך:

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

 

קומפילציה של קבצי sass באמצעות gulp.js

כדי שנוכל לקמפל את קבצי ה-sass, עלינו להתקין את החבילה gulp-sass, ואת זה נעשה מהטרמינל באמצעות הפקודה הבאה:


> npm install gulp-sass --save-dev

פקודה זו מורה ל-gulp להוריד את כל החבילות הדרושות לקומפילציה של sass. חבילות אילו יתווספו לתיקייה node modules.

בקובץ gulpfile.js, נוסיף את החבילה שהוספנו בתור אחת התלויות.

/* gulpfile.js */

// Requirements
var gulp  = require('gulp'),
      sass = require('gulp-sass');

ועכשיו אחרי שהוספנו את התלות, אנחנו יכולים לכתוב את המשימה עצמה, שמקמפלת את קבצי ה-scss בתיקייה app/src לקבצי css בעלי שם זהה שישבו בתיקייה app/css. שמה של המשימה sass.

/* gulpfile.js */

// Requirements
var gulp  = require('gulp'),
      sass = require('gulp-sass');

// Sass task
gulp.task('sass', function(){
    gulp.src(['app/src/**/*.scss'])
		.pipe(scss())
	   .pipe(gulp.dest('app/css'));
});

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

/* gulpfile.js */

// Requirements
var gulp  = require('gulp'),
      sass = require('gulp-sass');

// Sass task
gulp.task('sass', function(){
    gulp.src(['app/src/**/*.scss'])
		.pipe(scss())
	   .pipe(gulp.dest('app/css'));
});


// Default task
gulp.task('default', ['sass']);

כדי לבחון את ביצוע המשימה, נוסיף קובץ scss לתיקייה app/src/style.scss.

ועכשיו, נוסיף לקובץ ה-sass שיצרנו בסעיף הקודם, קוד. לדוגמה את הקוד הבא:

/* app/src/style.scss */
body{
    background:red;
    p, div{
        color: white;
    }
}

כדי לקמפל את קובץ ה-sass לקובץ css, נריץ את הפקודה הבאה משורת הפקודות:


> gulp scripts

ואחרי שהרצנו את הפקודה משורת הפקודת, נמצא את הקובץ המכווץ בתיקיית app/css.

 

קומפילציה אוטומטית בכל פעם ששומרים את קובץ ה-scss

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

// Watch task
gulp.task('watch', function(){
	gulp.watch('app/src/**/*.scss',['sass']);
})

המשימה watch פוקחת עין על קבצי ה-sass בתיקיית app/src, ובתגובה לשמירת שינויים בקובץ היא מריצה את המשימה שקראנו לה sass.

 

לסיכום

זה קובץ ה-gulpfile.js המלא שפתחנו במדריך:

// Requirements
var gulp   = require('gulp'),
    sass   = require('gulp-sass');

// Sass task
gulp.task('sass', function(){
	gulp.src(['app/src/**/*.scss'])
		.pipe(sass())
	    .pipe(gulp.dest('app/css'));
});

// Watch task
gulp.task('watch', function(){
	gulp.watch('app/src/sass/*.scss',['sass']);
})

// Default task
gulp.task('default', ['sass','watch']);

 

במדריך הבא בסדרה נלמד כיצד לטפל בשגיאות כשעובדים עם gulp? .

 

לכל מדריכי ה-gulp.js

 

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים

 

 

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

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

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

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

השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.

הוסף תגובה חדשה

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

מתי הוקמה המדינה?