Cunostinte de baza

In acest articol vedi capata cateva cunostinte de baza despre Gulp.

Ce este un Build System?

Un Build System este o colectie de task-uri ce sunt programate sa se repete.

Iata o lista de task-uri ce pot fi efectuate de Gulp:

• Compilarea preprocesoarelor de CSS si JavaScript
• Minificare de fisiere
• Concatenarea mai multor fisiere
• Trigger de auto reload

In workflow-ul de front-end curent avem la dispozitie 3 componente:

• Package manager
• Preprocesor
• Task runner

Package Manager

Este folosit pentru a automatiza procesul de instalare, upgradare si stergere a dependentelor si curatarea librariilor folosite la dezvoltare.

Exemple de package managere: bower si npm

Preprocesoare

Preprocesoarele sunt foarte folositoare intr-un workflow modern venind cu o sintaxa imbunatatita.

Preprocesoare populare:

CSS - SASS, LESS, Stylus, etc

JS - CoffeScript, LiveScript, TypeScript, etc

HTML - HAML, Slim, Jade, etc

Task Runnere

Task runnerele automatizeaza task-uri precum compilarea fisierelor SASS in CSS,minificarea de fisiere, optimizare imagini si multe alte task-uri.

Setarea unui proiect

In primul rand avem nevoie de un proiect nou, hai sa facem un folder numit "invata-programare", iar acest folder trebuie sa contina urmatoarele subfoldere:  

• Src - locatia fisierelor HTMl preprocesate
• • Images - locatia imaginilor initiale
  • Scripts - Fisiere javascript inainte de compilare
  • Styles - Contine fisiere de stil necompilate
• Build - In acest folder vor fi salvate fisierele pentru productie
• • Images - Imaginile dupa comprimare
  • Scripts - Un fisier de scripturi ce contine codul minified
  • Styles - Un fisier CSS ce contine codul minified
• gulpfile.js - Fisierul de configurare gulp