Optimizare CSS si Javascript folosind Gulp

In acest articol am sa va vorbesc despre optimizarea CSS-ului si a JavaScriptului. Procesul de optimizare sterge datele inutile (ex: spatii, caractere nefolositoare, etc) din fisiere, astfel reducand marimea fisierelor si permitandule sa se incarce mai rapid.

Instalarea pluginurilor de Optimizare CSS si JS

Mergem in folderul proiectului din terminal si instalam "gulp-uglify", "gulp-minify-css" si "gulp-concat" folosind aceasta comanda:

npm install gulp-uglify gulp-minify-css gulp-concat

Declararea de dependinte si crearea de task-uri

In fisierul de configurare,gulpfile.js declaram dependintele astfel:

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify-css');

Apoi, trebuie sa facem task-urile pentru optimizarea CSS-ului si a JS-ului astfel:

gulp.task('js', function(){
   gulp.src('src/scripts/*.js')
   .pipe(concat('script.js'))
   .pipe(uglify())
   .pipe(gulp.dest('build/scripts/'));});

gulp.task('css', function(){
   gulp.src('src/styles/*.css')
   .pipe(concat('styles.css'))
   .pipe(minify())
   .pipe(gulp.dest('build/styles/'));});

gulp.task('default',['js','css'],function(){});

Task-ul js va accepta fisiere .js din folderul src/scripts, le va concatena si le va scoate spatiile si caracterele nedorite si va face un fisier build/scrips/script.js.

In mod similar functioneaza si task-ul css.

Rularea task-urilor

Fisierul de configurare este setat si gata sa fie rulat. Pentru  a-l rula folosim urmatoarea comanda:

gulp

Dupa rulare va fi afisat ceva de genul:

C:\invata-programare>gulp
[13:16:34] Using gulpfile C:\invata-programare\gulpfile.js
[13:16:34] Starting 'js'...
[13:16:34] Finished 'js' after 24 ms
[13:16:34] Starting 'css'...
[13:16:34] Finished 'css' after 6.05 ms
[13:16:34] Starting 'default'...
[13:16:34] Finished 'default' after 5.04 μs