GULP.js Nedir? Nasıl Kullanılır?

Node.js tabanlı “işlemleri otomatize etme” aracıdır. Yaptığımız işlemlerin çıktısını görebilmek için bir komut çalıştırılması gerekiyor. Gulp.js bu noktada devreye giriyor.

Tek bir komutla sass-less komutlarını css’e;

Jade-Html komutlarını HTML’e;

CoffeeScript kodunu da JavaScript’e çevirebiliriz. Çok rahat bir şekilde buildler elde edilir.Örneğin Resim dosya boyutları küçültülebilir (minify edilebilir).

Gulp yüklemek için:

npm install gulp kodu kullanılır.

Kurulum tamamlanmışsa versiyonumuzu öğrenmek için:

gulp -v veya gulp version

Gulp.js yi projeye dahil etmek için, (Projeye ait dizinin altında alttaki komut yazılır ise Gulp aynı Grunt’daki gibi projeye dahil edilmiş olur ve proje altında node_mudules altında folder açarak dosyaları bunun içine atar.)

npm install gulp --save -dev

Herşeyi temizlemek için clean paketini indirelim.

npm install --save -dev gulp-clean

Javascriptleri birleştirmek için:

npm install --save -dev gulp-concat

Script’i minify etmek için:

npm install --save -dev gulp-uglify

Resim Dosyası eklemek için:

npm install — save-dev gulp-imagemin

Bootstrap’ta kullanılan css ve kendi oluşturduğumuz css’leri birleştirmek için:

npm install — save -dev gulp-css

HTML kodunu JADE koduna çevirmek için:

npm install — save -dev gulp-jade

İndirdiğimiz paketler ile oluşması gereken dosyamız:

var gulp = require(‘gulp’);
var gulp = require(‘gulp-connect’),
var clean = require(‘gulp-clean’);
var concat = require(‘gulp-concat’);
var uglify = require(‘gulp-uglify’);
var imagemin = require(‘gulp-imagemin’);
var css = require(‘gulp-css’);
var jade= require(‘gulp-jade’);
gulp.task(‘server’, [ ‘css’, ‘jade’, ‘html’, ‘css’, ‘connect’, ‘watch’])
gulp.task(‘connect’, function() {
 connect.server({
 root: ‘./dist’,
 port: 8080,
 livereload: true
 });
});
gulp.task(‘clean’, function () {
return gulp.src(‘build’, {read: false})
.pipe(clean());
});
gulp.task(‘manage’, function() {
return gulp.src(‘script/*.js’)
.pipe(concat(‘project.js’))
.pipe(gulp.dest(‘build/project.js’))
});
gulp.task(‘manage’, function() {
return gulp.src(‘script/*.js’)
.pipe(concat(‘project.js’))
.pipe(uglify())
.pipe(gulp.dest(‘build/project.js’))
});
gulp.task(‘default’, () =>
gulp.src(‘src/images/*’)
.pipe(imagemin())
.pipe(gulp.dest(‘dist/images’))
);
//Css leri birleştirmek için:
gulp.task(‘css’, function () {
 return gulp.src([‘src/components/bootstrap/dist/css/bootstrap.css’,
 ‘.tmp/css/main.css’,
 ‘//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css’])
 .pipe(concat(‘app.css’))
 .pipe(gulp.dest(‘dist/css’))
 .pipe(connect.reload());
 });
gulp.task(‘jade’, function () {
 gulp.src(‘src/**/*.jade’)
 .pipe(jade({ pretty: true }))
 .pipe(gulp.dest(‘.tmp/html’));
});
gulp.task(‘html’, function () {
 gulp.src(‘.tmp/html/**/*.html’)
 .pipe(gulp.dest(‘dist’))
 .pipe(connect.reload());
});
gulp.task(‘watch’, function() {
 gulp.watch(‘src/**/*.jade’, [‘jade’, ‘html’]);
 gulp.watch(‘.tmp/css/**/*.css’, [‘css’]);
});
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.