אוטומציה עם Gulp: עיבוד קבצי SCSS ו-Less

בחלק זה של "אוטומציה עם 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 לקבצים דחוסים.