נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

ולסיכום הסידרה, סקריפט מלא של gulpfile.js

מחבר:
בתאריך:

אחרי שבמדריכים קודמים בהם עסקנו ב- gulp למדנו כיצד להתקין את gulp , וכיצד להשתמש בפיצ'רים שונים של gulp לאוטומציה של תהליכים דוגמת קומפילציה של קבצי sass , דחיסה של קבצי javascript וכיווץ של תמונות , הגיע הזמן לארוז את כל מה שלמדנו לסקריפט אחד שמטפל בכל ההיבטים של צד הלקוח באתר.

הסקריפט הבא, שאותו נמקם בתוך קובץ הקונפיגורציה gulpfile.js עושה את הדברים הבאים:

  1. קומפילציה של קבצי scss ל- css
  2. דחיסה של קבצי javascript
  3. דחיסה של תמונות
  4. livereload רענון אוטומטי של הדפדפן בתגובה לעריכה ולשמירה של הקבצים, כולל קבצי html
/* gulpfile.js */

// Requirements
var gulp        = require('gulp'),
    uglify        = require('gulp-uglify'),
    rename    = require('gulp-rename'),
    sass         = require('gulp-sass'),
    imagemin = require('gulp-imagemin'),
    reload       = require('gulp-livereload');

	
// Error log
function errorLog(error) {
	console.log(error.toString());
	this.emit('end');
}


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


// Sass task
gulp.task('sass', function(){
	gulp.src(['app/src/sass/*.scss'])
		.pipe(sass())
		.on('error',errorLog)
	            .pipe(gulp.dest('app/css'))
		.pipe(reload({ start: true }));
});


// Html task
gulp.task('html', function(){
    gulp.src('*.html')
    .pipe(reload({ start: true }));
});


// Compress images task
gulp.task('img', function(){
	gulp.src(['app/src/img/*'])
	    .pipe(imagemin())
	    .pipe(gulp.dest('app/img'));
});


// Watch task
gulp.task('watch', function(){
	gulp.watch('app/src/js/*.js',['scripts']);
	gulp.watch('app/src/sass/*.scss',['sass']);
	gulp.watch('*.html', ['html']);
});


// Default task
gulp.task('default', ['scripts','sass','html','img','watch']);

 

תכנות נעים מאתר רשתטק.

לכל מדריכי ה-javascript

הוסף תגובה חדשה

 

= 6 + 3