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
Stefanescu Mihai
