Combinarea de taskuri

Taskurile ne permit sa configuram Gulp intr-un mod modular.Trebuie sa facem cate un task pentru fiecare dependenta, ceea ce inseamna ca trebuie sa gasim si sa instalam plugin-uri ce ne sunt necesare.

Instalarea de plugin-uri

Hai sa ne uitam la acest plugin numit minify-css care uneste fisierele css si le face minify. Poate fi instalat folosind urmatoarea comanda:

npm install gulp-minify-css --save-dev

Pentru a folosi acest plugin trebuie sa instalam inca un plugin numit "gulp-autoprefixer"

npm install gulp-autoprefixer --save-dev

Pentru a concatena fisierele CSS trebuie sa instalam si plugin-ul "gulp-concat"

npm install gulp-concat --save-dev

Dupa ce am instalat aceste plugin-uri trebuie sa scriem dependintele in fisierul de configurare:

var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var concat = require('gulp-concat');

Adaugarea unui task in Gulp

Acum trebuie sa facem cate un task pentru fiecare dependinta.

gulp.task('styles', function() {
   gulp.src(['src/styles/*.css'])
   .pipe(concat('styles.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'));});

Plugin-ul 'concat' va concatena toate fisierele intr-un singur fisier, plugin-ul 'autoprefix' adauga prefixele necesare in functie de browsere, iar minifyCSS cred ca este destul de usor de inteles ce face.

Pentru a rula acest task rulam urmatoarea comanda in folderul proiectului

gulp styles

Combinarea mai multor task-uri

Putem rula mai multe task-uri facand un task default in fisierul de configurare:

gulp.task('default', ['imagemin', 'styles'], function() {

});

Fisierul gulp este gata de executie. Rulam codul de mai jos pentru a rula task-urile combinate:

gulp