בחלק זה של "אוטומציה עם Gulp", נלמד כיצד לקחת קבצי SCSS או קבצי Less ולקמפל אותם לקובץ CSS אחד. שימו לב, שלב זה אינו תלוי בשלב הקודם.
אנו נחלק את מאמר זה לשני חלקים, חלק ראשון יהיה לגבי SCSS והשני יהיה לגבי Less, אתם מוזמנים לקפוץ לחלק במאמר שרלוונטי אליכם.

קמפול קבצי SCSS

שלב ראשון – התקנת סיפריות

החלק הראשון הוא כמובן התקנת הסיפריות אשר אחראיות לקמפל את קבצי ה-SCSS. נפתח את הטרמינל וננווט לתיקייה בה מצא הקובץ package.json ונריץ את הפקודה הבאה:

npm install --save-dev gulp-sass gulp-concat

שלב שני – יצירת משימה

כעת אנו צריכים ליצור את המשימה אשר תקמפל את קבצי ה-SCSS, לכן נפתח את הקובץ gulpfile.js ונחליף את התוכן שלו בקוד הבא:

/**
 * Automation with Gulp
 */

// Dependencies
var gulp = require( 'gulp' );
var scss = require( 'gulp-sass' );
var concat = require( 'gulp-concat' );

// Variables
var SCSS_SRC = '__src/scss/**/*.scss';
var SCSS_DIST = 'assets/css';

// Tasks
gulp.task( 'build-scss', function() {

  return gulp
          .src( SCSS_SRC )
          .pipe( scss( {
            outputStyle: 'compressed'
          } ) )
          .pipe( concat( 'styles.min.css' ) )
          .pipe( gulp.dest( SCSS_DIST ) );

} );

כעת במידה ונריץ את הפקודה gulp build-scss המשימה תקח את קבצי ה-SCSS שלנו, תקמפל אותם ותאחד אותם לקובץ CSS אחד דחוס.

שימו לב!
שימוש ב-concat הוא לא חובה, מכיוון שניתן ליצור קבצי SCSS עם תחילית _ ואז לעשות להם @import אך לא תמיד עושים קובץ SCSS אחד ראשי.

לוגו של טלגרם הצטרפו לערוץ הטלגרם וקבלו עדכון כאשר מאמר חדש מתפרסם!

קמפול קבצי Less

שלב ראשון – התקנת סיפריות

החלק הראשון הוא כמובן התקנת הסיפריות אשר אחראיות לקמפל את קבצי ה-Less. נפתח את הטרמינל וננווט לתיקייה בה מצא הקובץ package.json ונריץ את הפקודה הבאה:

npm install --save-dev gulp-less gulp-concat gulp-clean-css

שלב שני – יצירת משימה

כעת אנו צריכים ליצור את המשימה אשר תקמפל את קבצי ה-Less, לכן נפתח את הקובץ gulpfile.js והחליף את התוכן שלו בקוד הבא:

/**
 * Automation with Gulp
 */

// Dependencies
var gulp = require( 'gulp' );
var less = require( 'gulp-less' );
var concat = require( 'gulp-concat' );
var minifyCSS = require( 'gulp-clean-css' );

// Variables
var LESS_SRC = '__src/less/**/*.less';
var LESS_DIST = 'assets/css';

// Tasks
gulp.task( 'build-less', function() {

  return gulp
          .src( LESS_SRC )
          .pipe( less() )
          .pipe( minifyCSS() )
          .pipe( concat( 'styles.min.css' ) )
          .pipe( gulp.dest( LESS_DIST ) );

} );

בשונה מ-SCSS, כאשר משתמשים ב-Less עלינו להשתמש בסיפרייה נוספת על מנת לדחוס את קובץ ה-CSS אשר מיוצר ע״י Less.

סיכום

בחלק זה בסדרה, למדנו איך לקמפל ולדחוס קבצי SCSS ו-Less לקובץ CSS אחד דחוס. בחלק הבא בסדרה, נלמד איך לאחד ולדחוס קבצי JS ואיך לייצר Sourcemaps לקבצים דחוסים.

תגובות לפוסט

כתיבת תגובה

תגובה אחת

  1. ניב

    היי דור
    תודה עם המאמר, אני משתמש ב scss.
    בהרצת gulp על קמפול קבצי SCSS, בקובץ stlye.scss הכל עובד טוב.

    אך בקובץ נגיד _header.scss שאני עושה עושה עליו @import בקובץ style.scss
    השינוי לא עובד, כלומר אני רואה את ה task רץ אבל הקובץ style. Scss לא מתעדכן עם השינוי, רק לאחר שני ניגש לקובץ style.scss במבצע שמירה בו אני רואה את השינוי שנעשה בקובץ _header.

    מה צריך להוסיף ב task על מנת שזה יעבוד כמו קמפול קבצי SCSS דרך הטרמינל ישירות?

    1. מחבר
      דור צוברי

      היי ניב,
      על מנת לפתור את הבעיה תגדיר שהנתיב של קבצי ה-SCSS יהיה בסגנון הבא: __src/scss/**/*.scss זה ידאג לקמפל את כל הקבצים אשר נמצאים בתיקיית SCSS או בתיקיות בתוך תיקיית SCSS.

    2. ניב

      היי דור,
      תודה על התגובה המהירה,

      ככה מוגדר אצלי (ריצה על כך הקבצים מסוג scss) לכן בטרמינל אני רואה את הכניסה ל task שלי, אפילו האתר מתרפשרש לי עם.. browser sync אך עדיין לא מתעדכן הקובץ style.scss

    3. מחבר
      דור צוברי

      היי ניב,
      אתה יכול להעלות את ה-gulpfile.js ל-pastebin או משהו ולשלוח קישור לצפייה? 🙂

    4. ניב

      הייי דור

      קודם כל תודה על העזרה,
      העלאתי את הקובץ ה Gulp שלי
      https://pastebin.com/AfR6PEd6?fbclid=IwAR0sAJSGfAFr1NJ6KIauJ9MZUM3dlKUwO9JVM-JB_5E_Habm4y01T0c46Cs

      אשמח לעזרה,
      תודה רבה רבה