לעשות קומפילציה אוטומטית של קבצי SASS עם Grunt.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 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. הנה, ככה זה נראה ברגע שאני משנה קבצים:

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