Primjer korištenja Gulp task runnera

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.