Gulp ilk etapta ilgimi çekmemişti ne gerek var diyordum ama sadece bir iki iş için değil birazdan bahsedeceğim bir çok iş için kullanılabiliyor.

Ben en az 8 iş akışında kullandım ve çok sevdim bunu da paylaşmak istedim, çok fazla kaynak var ama bunlar benim yorumlarım.

Gulp Pluginleri:

  • gulp-uglfy = Javascript dosyalarınızın boşlukları ve satırları silerek ***.min.js gibi bir isim veriyor.
  • gulp-concat = Tüm javascript dosyalarınızı birleştirerek tek bir dosyada topluyor

Örnek Gulp yapılandırma dosyam:

const { src, dest, parallel } = require('gulp');
//Modülleri içeri çağır
const sass = require('gulp-sass'); // Scss dosyasını css e çevirir
const minifyCSS = require('gulp-csso'); // css dosyalarını minify eder
const uglify = require('gulp-uglify');//  js dosyalarını minify eder
const concat = require('gulp-concat'); // js dosyalarını birleştirir
const htmlmin = require('gulp-htmlmin'); // html dosyalarını minify eder, yorumları siler
const imagemin = require('gulp-imagemin'); // image dosyalarını compress eder
const rename = require('gulp-rename');// işlenen dosyayı ismini değiştirir
const responsive = require('gulp-responsive');// işlenen dosyayı ismini değiştirir

// css fonksiyonu
function css() {
    return src('source/sass/*.scss') // kaynak göster
        .pipe(sass()) // sass to css
        .pipe(minifyCSS()) // css to minify css (ismini değiştiremez)
        .pipe(rename({ //yeniden adlandır
            suffix: '.min'
        }))
        .pipe(dest('dist/css')) //çıktı dosyasını belirt
}

function js() {
    return src('source/javascript/*.js', { sourcemaps: true })
        .pipe(uglify())
        .pipe(concat('main.min.js')) //js leri birleştir
        .pipe(dest('dist/js', { sourcemaps: true }))
}

function image() {
    return src('source/images/*')
        .pipe(imagemin([
            imagemin.gifsicle({interlaced: true}),
            imagemin.jpegtran({progressive: true}),
            imagemin.optipng({optimizationLevel: 5}),
            imagemin.svgo({
                plugins: [
                    {removeViewBox: true},
                    {cleanupIDs: false}
                ]
            })
        ]))

        .pipe(responsive({
            // resmin kalitesini ve boyutunu değiştir
            '*.jpg': {
                width: 700,
                rename: {
                    suffix: '-700',
                    extname: '.jpg', },
                format: 'jpeg',

            },

            // resmin formatını değiştir
           // '*.png': {width: '50%', format: 'jpeg',},

            // resmi retinaya çevir.
           // '*logo.png': [{width: 200},{width: 200 * 2, rename: 'logo@2x.png'}]
        }))

        .pipe(dest('dist/images'))
}

function html() {
    return src('*.html')
        .pipe(htmlmin({
            collapseWhitespace: true,
            removeComments: true
        }))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(dest('dist'))
}

exports.js = js;
exports.css = css;
exports.html = html;
exports.image = image;
exports.default = parallel(html, css, js, image);
Menu