#techtalk #mavidurakio

Furkan BAŞARAN

Toyota Motor Türkiye

JS, NodeJS, PHP

Web Application Developer

frknbasaran@gmail.com

@frknbasaran

github.com/frknbasaran

GULP

Gulp, genellikle sıkıcı ancak gerekli olan bir takım işleri otomatik olarak yapmanızı sağlayan Node.js tabanlı bir komut satırı aracıdır.

Gulp Neler Yapar?

• CSS dosyalarınızı tek dosyada toplayabilir,sıkıştırabilir, CSSlint ile hata kontrolü yapabilir

• SASS, LESS ya da Stylus dosyalarınızı CSS olarak derleyebilirsiniz

• Javascript dosyalarınızı sıkıştırabilir, JSHint ile hata kontrolü yapabilir ve tek dosyada toplayabilirsiniz

• Coffeescript kodlarınızı JS olarak derleyebilirsiniz

• Dosya değişikliklerini izleyerek işlerinizi otomatize edebilirsiniz

Kurulumu

Gereklilikleri

Node / npm

npm install -g gulp

Eklentiler

Gulp için çeşitli görevleri yerine getiren modüllerdir. 

Eklenti Kurulumu

npm install --save-dev gulp-watch gulp-imagemin

var gulp = require('gulp');
var concat = require('gulp-concat');
var imagemin = require('gulp-imagemin');
var sourcemaps = require('gulp-sourcemaps');
var del = require('del');

var paths = {
  scripts: ['client/js/**/*.coffee', '!client/external/**/*.coffee'],
  images: 'client/img/**/*'
};

gulp.task('clean', function(cb) {
    del(['build'], cb);
});

gulp.task('scripts', ['clean'], function() {
   return gulp.src(paths.scripts)
    .pipe(sourcemaps.init())
      .pipe(uglify())
      .pipe(concat('all.min.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('build/js'));
});

gulp.task('images', ['clean'], function() {
  return gulp.src(paths.images)
    .pipe(imagemin({optimizationLevel: 5}))
    .pipe(gulp.dest('build/img'));
});

gulp.task('watch', function() {
  gulp.watch(paths.scripts, ['scripts']);
  gulp.watch(paths.images, ['images']);
});

gulp.task('default', ['watch', 'scripts', 'images']);

Uygulama

Soru

Cevap

Kaynaklar

http://tolga.gezginis.com/gulp-ile-frontend-islerinizi-yonetin.html

http://gratimax.net/search-gulp-plugins/

https://github.com/gulpjs/gulp