Objavljeno: 2016-10-03

Primjer korištenja Gulp task runnera

Primjer korištenja Gulp task runnera

Gulp je alat, koji zajedno sa pratećim dodacima, omogućava automatizaciju učestalih i vremenski zahtjevnih zadataka sa kojima se svakodnevno susrećemo na polju front-end developmenta. U nastavku ćemo vam predstaviti primjer gulpfile.js datoteke i objasniti šta svaka od navedenih funkcija radi, te dodatke (plugins) koji su korišteni.

Za pokretanje Gulp-a, potrebno je prethodno instalirati Node.js, zatim i sami Gulp pomoću komande npm install gulp. Da bi pokrenuli automatizaciju, dovoljno je pokrenuti komandu u direktoriju u kojem se nalazi gulpfile.js.

Za rad sa Gulpom će vam dobro doći i package.json u kojem se spašavaju podaci o trenutno korištenim dodacima, kako za svaki slijedeći projekat ne bi morali ručno dodavati svaki potreban dodatak. Package.json se automatski kreira prilikom instalacije Gulpa, a dodavanje dodataka u listu se vrši nadovezivanjem --save na komandu npm install. Primjer:

npm install gulp --save

Slijedeći put će biti dovoljno upisati samo npm install, i Node.js će automatski instalirati sve dodatke iz datoteke package.json. Spisak svih dodataka možete pronaći na npmjs.com, a u nastavku vam predstavljamo one najkorisnije, koji su sastavni dio većine projekata koje realiziramo za naše klijente:

gulp-load-plugins

Ovaj dodatak eliminiše potrebu za učitavanjem svakog dodatka pojedinačno, te će to uraditi za vas potpuno automatski za svaki dodatak koji je naveden u package.json.

var plugins = require("gulp-load-plugins")({
  pattern: ['gulp-*', 'gulp.*'],
  replaceString: /\bgulp[\-.]/

gulp-sass ili gulp-less

Sass i Less su najpopularniji pre-procesori CSS-a i zapravo predstavljaju proširenje CSS kao jezika sa varijablama, funkcijama... Obzirom da Sass i Less datoteke treba kompajlirati u izovrni CSS, Gulp je idealno okruženje za izvršavanje ovog zadatka.

gulp.task('sass', function() {
    return plugins.rubySass(src + 'sass/app.scss', {style: 'compressed'})
        .pipe(plugins.rename({suffix: '.min'}))
        .pipe(gulp.dest(dest + 'css'));
});

gulp-uglify i gulp-concat

Ova dva dodatka se najčešće koriste u kombinaciji i služe za minificiranje (kompresiju) datoteka (najčešće .css i .js), te formatiranje sintakse prilikom kompajliranja.

gulp.task('scripts', function() {
    return gulp.src(src + 'js/*.js')
      .pipe(plugins.concat('app.js'))
      .pipe(plugins.rename({suffix: '.min'}))
      .pipe(plugins.uglify())
      .pipe(gulp.dest(dest + 'js'));
});

gulp-imagemin

Dodatak koji automatski generiše optimizovanu kopiju slike i spašava je u radni direktorij.

gulp.task('pictures', function() {
  return gulp.src(src + 'pictures/**/*')
    .pipe(plugins.cache(plugins.imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
    .pipe(gulp.dest(dest + 'pictures'));
});

gulp-iconfont i gulp-iconfont-css

Vrlo koristan dodatak koji automatski generiše font sa ikonama i odgovarajući CSS za korištenje na projektu. Dovoljno je samo ubaciti SVG ikonu u odgovarajući direktorij i sve je završeno u roku od par sekundi.

gulp.task('iconfont', function(){
  gulp.src([src + 'icons/*.svg'], {base: 'resources/assets'})
    .pipe(plugins.iconfontCss({
      fontName: fontName,
      targetPath: '../../../resources/assets/sass/icons.scss',
      fontPath: '../fonts/'
    }))
    .pipe(plugins.iconfont({
      fontName: 'icons',
      prependUnicode: true,
      normalize: true,
      formats: ['ttf', 'eot', 'woff', 'woff2', 'svg'],
    }))
      .on('glyphs', function(glyphs, options) {
        // CSS templating, e.g.
        console.log(glyphs, options);
      })
    .pipe(gulp.dest(dest + 'fonts'));
});

gulp-watch

Dodatak koji prati zadane direktorije i datoteke i pokreće odgovarajuće taskove ukoliko se desi bilo kakva izmjena.

gulp.task('watch', function() {
  gulp.watch(src + 'js/*.js', ['scripts']);
  gulp.watch(src + 'sass/*.scss', ['sass']);
  gulp.watch(src + 'pictures/**/*', ['pictures']);
  gulp.watch(src + 'img/**/*', ['img']);
  gulp.watch(src + 'icons/**/*', ['iconfont']);
});
gulp.task('default', ['scripts', 'sass', 'pictures', 'img', 'iconfont', 'watch']);

Kao što se iz prikazane gulpfile.js datoteke može zaključiti, Gulp za vas potpuno automatski preuzima zadatke kao što su kompajliranje i minifikacija CSS-a, otpimiziranje slika pa čak i generisanje fontova za ikone i to sve u roku od par sekundi. Najbolje u svemu tome je što se ovaj proces dešava na svakoj modifikaciji projekta tj. sačuvanju datoteke.

Vrijedi napomenuti da postoji sličnih alata koji obavljaju iste zadatake kao Gulp, kao npr. Grunt.

Želite postati naš klijent?

Zakažite sastanak