נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

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

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

מדריך 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

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

 

= 7 + 9