משימה ראשונה עם gulp - כיווץ קבצי javascript

מדריכים קודמים בסדרת ה-gulp

1. מבוא ל-gulp.js
2. כיצד להתקין את gulp?

המשימה הראשונה: כיווץ קבצים באמצעות gulp

במדריך זה נלמד לכתוב את המשימה ראשונה באמצעות gulp. משימה שתכווץ קבצי javascript.

נוסיף את משימה על ידי זה שנכתוב את הקוד הבא בקובץ gulpfile.js. שמה של המשימה scripts, והיא כותבת הודעה לקונסולה.

/* gulpfile.js */

// Requirements
var gulp   = require('gulp');

// Named tasks
gulp.task('scripts', function(){
    console.log("Hello from the scripts task!");
});

נריץ את המשימה מהטרמינל, ונראה את התוצאה בקונסולה של הדפדפן.

> gulp scripts

נוסיף משימה ברירת מחדל שתריץ את כל ה-named tasks ובהם המשימה שכתבנו בשלב הקודם, המשימה scripts.

// Requirements
var gulp   = require('gulp');

// Named tasks
gulp.task('scripts', function(){
    console.log("Hello from scripts task!");
});

// Default task
gulp.task('default', ['scripts']);

כדי להריץ את המשימה ברירת המחדל, נכתוב בטרמינל את הפקודה הבאה:

> gulp

לפני שנוכל להמשיך, צריך להתקין את החבילות הנוספות הדרושות לנו. החבילות הם:

• gulp-uglify שזו חבילה שמכווצת קבצי javascript.
• gulp-rename שמשנה את שם הקובץ המכווץ (ומוסיפה סיומת min)

את החבילות נתקין מהטרמינל באמצעות הפקודה הבאה:

> npm install gulp-uglify gulp-rename --save-dev

gulp עובד על ידי כך שהוא מבצע משימות שונות על הקבצים המקוריים, ומעביר את הקבצים לתיקיית יעד.

בדוגמה הבאה, gulp ייקח את כל קבצי ה-js מתיקיית app/src, יכווץ אותם, ויעביר את הקובץ המכווץ לתיקייה app. הקבצים המכווצים יקבלו באותה הזדמנות את הסיומת min

כך נראית המשימה בקובץ gulpfile.js:

// Scripts task
gulp.task('scripts', function(){
	gulp.src(['app/src/**/*.js'])
		.pipe(uglify())
		.pipe(rename({
		  suffix: '.min'
		}))
	   .pipe(gulp.dest('app'));
});

וכדי לשנות את שם הקובץ שעשינו כדי שיכלול את הסיומת min, נוסיף משימה נוספת כפי שאפשר לראות להלן:

/* gulpfile.js */

// Requirements
var gulp   = require('gulp'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename');

// Scripts task
gulp.task('scripts', function(){
        gulp.src(['app/**/*.js'])
            .pipe(uglify())
			.pipe(rename({
			  suffix: '.min'
			}))
           .pipe(gulp.dest('app/js'));
});

// Default task
gulp.task('default', ['scripts']);

נכתוב את הסקריפט שאותו אנחנו מעוניינים לכווץ בקובץ app/src/general.js. בעיקרון, זה יכול להיות כל קובץ js בתיקיית app/src וכול מספר של קבצים.

// general.js

(function($){
function sayHello(){
  alert("say hello")
}
sayHello();
}(jQuery));

נריץ מהטרמינל:

> gulp

ואחרי שהרצנו את הפקודה מהטרמינל, נמצא את הקובץ המכווץ בתיקיית app/js. שם הקובץ: app/js/general.min.js. שימו לב לסיומת min שהתווספה לשם הקובץ.

במדריך הבא נבצע קומפילציה של קבצי sass.

לכל מדריכי ה-gulp.js

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים