אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פתרונות ומאמרים על פיתוח אינטרנט » grunt watch

grunt watch

רן בר-זיק יולי 26, 2015 7:17 am אין תגובות

כך תפעילו את ה-build ותריצו את כל התהליכים שאתם רוצים עם grunt בשינויי קבצים באפליקציה.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

זה מאמר שמלמד על grunt. אם אתם לא יודעים מה זה grunt, כדאי שתעיינו במאמר המלמד על Grunt.js ומסביר על ההתקנה ומה זה בכלל.
כשאני משתמש ב-uglify לקבצי ה-JavaScript שלי, autoprefixer לקבצי ה-CSS שלי ודברים נוספים (כמו csslint ו-jshint) אז אני לא רוצה לשנות את קבוץ ה-CSS או ה-JS ואז להריץ את ה-grunt בכל פעם כדי שיריץ את כל התהליכים שאני צריך כמו להוסיף תחיליות, לכווץ ולנקות. אני רוצה שכל התהליכים האלו ירוצו ברגע שאני משנה את אחד מקבצי ה-JS או ה-CSS. ואז כשאני ארפרש את האפליקציה אני אוכל לראות את השינוי שעשיתי.

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

איך זה עובד? קודם כל… התקנה של המודול

npm install grunt-contrib-watch

עכשיו צריך לומר ל-grunt בפרויקט שהמודול הזה קיים. ניכנס ל-Gruntfile.js ונכניס את השורה הזו שבעצם מודיעה ל-Grunt לטעון את המודול.

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

כל מה שנותר הוא להוסיף משימה ל-Grunt. במקרה הזה watch:

	watch: {
	  scripts: {
	    files: ['source/*.css'],
	    tasks: ['postcss'],
	    options: {
	      spawn: false,
	    },
	  },
	}

מה יש לנו כאן? הגדרתי watch. שלושת הדברים היחידים שאני צריך להגדיר הוא files – אחרי אלו קבצים או תיקיות אני צריך לעקוב. במקרה הזה הגדרתי שהוא יעקוב אחר כל קבצי ה-CSS. אבל אני יכול להוסיף גם קבצי JS או בכלל להכניס את כל תיקית הפרויקט.
הדבר השני הוא אילו משימות ירוצו כאשר יהיה שינוי. במקרה הזה בחרתי רק במשימה אחת: postcss, אבל אני יכול להכניס משימות רבות נוספות כמו uglify ו-lint.
ב-options כדאי להשאיר את spawn כ-false כי זה יבטיח עבודה יותר מהירה.

אם אתם סקרנים לדעת, כך נראה הקובץ השלם:

module.exports = function(grunt) {

    grunt.initConfig({
        postcss: {
            options: {

                processors: [
                    require('autoprefixer-core')({
                        browsers: ['last 2 versions', 'Android >= 2.3']
                    }), // add vendor prefixes
                ]
            },
            main: {
                expand: true,
                flatten: true,
                src: 'source/*.css',
                dest: 'css/'
            }
        },
        watch: {
            scripts: {
                files: ['source/*.css'],
                tasks: ['postcss'],
                options: {
                    spawn: false,
                },
            },
        }
    });

    grunt.loadNpmTasks('grunt-postcss');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default', ['postcss']);

};

מה יש לנו פה? בגדול קובץ Gruntfile.js סטנדרטי לחלוטין. ב-initConfig אני מגדיר 2 משימות. הראשונה היא postcss שעליה דיברתי במאמר על תחיליות ב-CSS3. השניה היא משימת watch שאותה הראיתי קודם. בסוף הקובץ אני משתמש ב-loadNpmTasks על מנת לטעון את מודול postcss ואת contrib-watch. אני משתמש ב- grunt.registerTask('default', ['postcss']); על מנת להגדיר את postcss כ-default.

מה ש-watch עושה הוא לעקוב אחר קבצי ה-CSS שיש בתיקית source וברגע שמישהו מהם משתנה, הוא יפעיל את postcss.

איך זה נראה בפועל? ככה:

$ grunt watch Running "watch" task Waiting... >> File "source/transform2d.css" changed.  Running "postcss:main" (postcss) task >> 1 processed stylesheet created.  Running "watch" task Completed in 0.117s at Sat Jul 11 2015 20:41:11 GMT+0300 (IDT) - Waiting...
הפעלה של grunt watch שעוקב אחר קבצים ומפעיל תהליכים אוטומטית.
$ grunt watch
Running "watch" task
Waiting...
>> File "source/transform2d.css" changed.

Running "postcss:main" (postcss) task
>> 1 processed stylesheet created.

Running "watch" task
Completed in 0.117s at Sat Jul 11 2015 20:41:11 GMT+0300 (IDT) - Waiting...

זה הכל! פשוט וקל ובלי להתאמץ. למי שמשתמש ב-yeoman או בדומיו ולא הבין איך בדיוק האפליקציה יודעת להפעיל את ה-build בכל שינוי – זה נעשה כך.

במאמר הבא על Grunt אני מסביר איך לטעון מודולים אוטומטית ב-Grunt ללא כתיבה של loadNpmTasks שוב ושוב ושוב בכל פעם שאני משתמש במודול חדש.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
grunt

השארת תגובה

ביטול

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

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-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 | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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