ולסיכום הסידרה, סקריפט מלא של 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

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

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