Cunostinte de baza

postat acum 2 ani de Stefanescu Mihai in categorie Gulp

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
Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group