אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • קבלו עדכונים במייל
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • קבלו עדכונים במייל
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » SASS » לעשות קומפילציה אוטומטית של קבצי SASS עם Grunt.js

לעשות קומפילציה אוטומטית של קבצי SASS עם Grunt.js

רן בר-זיק אוגוסט 9, 2015 7:33 am אין תגובות

סביבת עבודה מודרנית עם SASS ו-grunt שמקפל לקבצי CSS בכל שינוי.

»SASS – הוספת פונקצית SASS
כדאי תמיד להשאר מעודכנים! הרשמו לעדכונים של האתר במייל! - המייל יישלח כל יום ראשון בעשר בבוקר ויכיל אך ורק את המאמרים שהתפרסמו באינטרנט ישראל. ללא ספאם, ללא הצפות, ללא בלגנים. אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט. הפרויקט הוא הפרויקט הספרותי המוביל בהדסטארט. בשיתוף הקריה האקדמית אונו.

במדריך שלי על SASS, הסברתי איך משתמשים בתוכנה חיצונית על מנת לעבוד עם קבצי SASS ולקמפל אותם לקבצי CSS מוכנים. בעוד שהתוכנה היא מצוינת ללימוד, להתנסות ראשונית ואף לפרויקטים קטנים, כדאי מסיבות רבות לעבוד עם Grunt או עם מקביליו בנוגע למעקב וקומפילציה אוטומטיים לקבצי SASS. מה זאת אומרת? אעדכן את קבצי ה-SASS בפרויקט שלי בשופי ובנחת, כאשר אשמור אחד מהם, grunt ידע לאסוף את כל קבצי ה-SASS, לקמפל וליצור מהם את קבצי ה-CSS המתאימים. בדרך אני יכול להוסיף עוד משימות כמו כיווץ, מיניפקציה או בדיקה סטטית של קוד ועוד שלל משימות כיפיות ושימושיות.

אם אתם לא מכירים את Grunt.js, כדאי להציץ במאמר ההסבר הראשוני על Grunt.js.

אז איך אני עושה את זה? אני משתמש בתוסף הרשמי של grunt ל-SASS ששימו הוא grunt contrib sass. התוסף הזה יסייע לי בקומפילציה. איך הוא עובד? ההתקנה היא פשוטה:

npm install grunt-contrib-sass 

נורא חשוב שיהיה לכם ruby + sass מותקנים על המחשב. במק/לינוקס זה די פשוט, זה אמור להיות פשוט גם בחלונות. אם יש לכם לינוקס, ההתקנה הולכת ככה:

sudo apt-get install ruby
sudo gem install sass

ועכשיו לכתיבת קובץ ה-grunt! האמת הוא שהמבנה שלו די פשוט! כל מה שצריך הוא להגדיר מה תיקית המוצא, אם אני רוצה להכנס לכל התיקיות שיש תחת תיקית המוצא (כלומר לעבוד ריקורסיבית מתיקית המוצא ומטה), איפה לשים את התוצאה המקומפלת ותחת איזו סיומת.

קודם כל, לא נשכח להגדיר ל-Grunt.js עם איזה מודול לעבוד, במקרה הזה grunt-contrib-sass. את זה אנו עושים עם loadNpmTasks בתחתית קובץ ה-grunt.

grunt.loadNpmTasks('grunt-contrib-sass');

עכשיו, כל מה שצריך לעשות זה להגדיר את המשימה. איך עושים את זה? ככה:

sass: {
    dist: {
      files: [{
        cwd: 'source-scss', //start in THIS direcory
        expand: true, //descent into directories 
        src: ['*.scss'], //patttern for files
        dest: 'public', //destination folder
        ext: '.css' //destination file extension
      }]
    }
  }

בגדול, פרמטר cwd הוא התיקיה שכוללת את כל קבצי ה-scss שלנו. אין בעיה שיהיו בה עוד תיקיות, אבל אז אנו חייבים להכניס את פרמטר expand שבו אנו קובעים שה-Grunt יעשה חיפוש בכל תת התיקיות של התיקיה שאנו מגדירים ב-cwd (במקרה הזה source-scc). בפרמטר src אנו מגדירים שהוא יעבוד על כל קבצי ה-scss. איפה קבצי ה-CSS המקומפלים יישפכו? לאן שאנו מגדירים אותם ב-dest. מה הסיומת שלהם? מה שנגדיר ב-ext.

קל ופשוט, לא? אם הכל תקין, כשנריץ grunt sass, זה מה שנקבל:

$ grunt sass Running "sass:dist" (sass) task Done, without errors.
$ grunt sass
Running "sass:dist" (sass) task
Done, without errors.

עכשיו אפשר לשלב את זה עם משימת grunt watch שעליה כבר כתבתי מאמר.

ראשית, לא נשכח להתקין את הרכיב שמאפשר ל-grunt להאזין לקבצים:

npm install grunt-contrib-watch

עכשיו, כל מה שנותר לנו לעשות זה לתת ל-grunt הוראה לכלול את המודול הזה וליצור משימת watch. הקובץ המלא נראה כך:

module.exports = function(grunt) {

    grunt.initConfig({

        sass: {
            dist: {
                files: [{
                    cwd: 'source-scss', //start in THIS direcory
                    expand: true, //descent into directories 
                    src: ['*.scss'], //patttern for files
                    dest: 'public', //destination folder
                    ext: '.css' //destination file extension
                }]
            }
        },


        watch: {
            scripts: {
                files: ['source-scss/*.scss'], //watching over scss files
                tasks: ['sass'], //running sass tasks
                options: {
                    spawn: false,
                },
            },
        }
    });

    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');

};

במשימת ה-watch, כל מה שצריך לעשות זה להגדיר אחרי איזה קבצים לעקוב. במקרה שלנו – אחרי קבצי ה-scss שאנו משנים. וכמובן להגדיר איזו משימה להריץ מיד לאחר השינוי – במקרה שלנו משימת sass.

על מנת להפעיל את זה, כל מה שצריך לעשות זה לכתוב grunt watch. הנה, ככה זה נראה ברגע שאני משנה קבצים:

$ grunt watch Running "watch" task Waiting... >> File "source-scss/mystyle.scss" changed.  Running "sass:dist" (sass) task  Running "watch" task Completed in 0.399s at Sat Aug 01 2015 13:14:50 GMT+0300 (IDT) - Waiting...
$ grunt watch
Running "watch" task
Waiting…
>> File "source-scss/mystyle.scss" changed.
Running "sass:dist" (sass) task
Running "watch" task
Completed in 0.399s at Sat Aug 01 2015 13:14:50 GMT+0300 (IDT) – Waiting…

כמובן שאפשר להריץ עוד משימות על ה-CSS שנוצר כתוצאה מהקימפול.

כדאי תמיד להשאר מעודכנים! הרשמו לעדכונים של האתר במייל! - המייל יישלח כל יום ראשון בעשר בבוקר ויכיל אך ורק את המאמרים שהתפרסמו באינטרנט ישראל. ללא ספאם, ללא הצפות, ללא בלגנים. אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט. הפרויקט הוא הפרויקט הספרותי המוביל בהדסטארט. בשיתוף הקריה האקדמית אונו.
grunt SASS

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד