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