Noțiuni de bază cu Gulp.js

Gulp este un instrument bazat pe Javascript care vă permite să automatizați biții din fluxul de lucru. Automatizarea vă poate salva literalmente ore pe zi. Indiferent dacă sunteți un dezvoltator sau un designer care creează din când în când cadre de fire HTML, vă încurajez să vă grăbiți.

În acest articol vom analiza elementele de bază ale utilizării Gulp - de la instalare la sintaxă de bază și câteva exemple. Până la sfârșitul articolului ar trebui să puteți găsi, instala și utiliza pachetele pe care alții le-au creat pentru Gulp să compilați SASS, să optimizați imaginile, să creați sprite, să concatenați fișiere și multe altele!

Instalarea Gulp

Nu vă faceți griji, instalarea este foarte ușoară. Va trebui să folosim terminalul în OSX și Linux sau în linia de comandă pentru Windows. Voi vorbi despre el ca Terminal de acum înainte.

Deschideți-l și tastați npm -v și apăsați enter. Dacă vedeți numărul versiunii afișat, aveți deja Nod instalat - aceasta este o dependență pentru Gulp.

Dacă primești a “comanda nu a fost găsită” (sau o eroare similară), mergeți în jos pe pagina Descărcări Node.js și selectați pachetul corespunzător pentru sistemul dvs. Odată instalat, comanda npm va fi disponibilă în terminal.

Instalarea Gulp este la fel de ușor. Inserați următoarea comandă în terminal:

npm install - gulp global

Aceasta va instala comanda Gulp, care va fi disponibilă la nivel global în sistemul dumneavoastră.

Adăugarea de Gulp la un proiect

Gulp este acum instalat, dar va trebui să îl adăugăm la fiecare proiect de care avem nevoie, separat. Creați un dosar gol acum și navigați la acesta în terminalul dvs. În folderul pentru proiect, utilizați următoarea comandă:

npm instalează -save-dev gulp

Acest lucru ar trebui să creeze un folder node_modules și un fișier npm-debug.log în dosarul proiectului. Acestea sunt folosite de Gulp pentru a-și face lucrul în proiectul dvs., nu trebuie să vă gândiți la ele în acest stadiu.

Motivul pentru care trebuie să adăugăm Gulp la fiecare proiect specific este asta fiecare proiect are cerințe diferite. Se poate solicita SASS, altul pentru Less. Se poate folosi Coffeescript, celălalt nu poate și așa mai departe.

The Gulpfile

Gulpfile este locul în care se întâmplă magia, unde definiți automatizările de care aveți nevoie și când vrei să se întâmple. Să creăm o sarcină implicită gol creând un fișier numit gulpfile.js și lipirea următorului cod în el.

var gulp = necesită ("gulp"); gulp.task ("implicit", funcția () // Aceasta nu face nimic pentru moment, vom adăuga în curând funcționalitate);

Odată ce acest fișier este salvat, puteți să vă întoarceți la terminalul dvs. și să executați comanda gulp pe cont propriu. Gulp detectează proiectul în care se află și execută sarcina implicită - cea pe care tocmai am creat-o. Ar trebui să vedeți ceva de genul:

Nimic nu se întâmplă aici, deoarece sarcina este goală, dar funcționează bine. Acum, să mergem cu câteva exemple adecvate!

Copierea unui fișier

Acesta este unul plictisitor, o să recunosc atât de mult, dar vă va ajuta să înțelegeți ce se întâmplă cu ușurință.

În folderul proiectului creați un fișier numit to_copy.txt , și un dosar numit dev. Să intrăm în Gulpfile noastre și să creăm o nouă sarcină numită copie.

gulp.task ('copy', function () retur gulp.src ('to_copy.txt') .pipe (gulp.dest ('dev')););

Prima linie definește o sarcină numită copie. În acest scop, folosim gulp.src pentru a specifica ce fișiere vizează această sarcină - în acest caz este un singur fișier numit to_copy.txt.

Apoi, conducem aceste fișiere la funcția gulp.dest care specifică locul în care vrem să punem aceste fișiere - am folosit directorul dev.

Întoarceți-vă la terminale și tastați copie gulp pentru a rula această sarcină, ar trebui să copiați fișierul specificat în directorul specificat, ceva de genul:

Comanda conductei este în inima lui Gulp. Este o modalitate eficientă de a muta datele între comenzi. Comanda src specifică fișierele care sunt conectate la comanda dest. În scenariile mai complexe, ne-am conduce fișierele la alte comenzi înainte de a specifica o destinație.

De asemenea, trebuie să știți că sursa poate fi dată ca un singur fișier sau mai multe fișiere. Dacă avem un dosar numit producere și vrem să mutăm toate fișierele de pe site-ul nostru dezvoltare în dosar, am putea folosi următoarea comandă:

gulp.task ('copy', function () retur gulp.src ('development / *') .pipe (gulp.dest ('production')););

Caracterele stea se vor potrivi cu orice element din director. De asemenea, ați putea să potriviți toate fișierele din toate subdirectoarele și să faceți tot felul de alte potriviri fanteziste. Uitați-vă la documentația nod-glob pentru mai multe informații.

Compilarea SASS

Compilarea unei foi de stiluri din fișierele SASS este o sarcină comună pentru dezvoltatori. Se poate face cu Gulp destul de ușor, dar va trebui să facem o pregătire. În afară de comenzile de bază, cum ar fi src, dest și o serie de alte, toate funcționalitățile sunt adăugate prin intermediul unor addons ale unor terțe părți. Iată cum le folosesc.

eu scriu SASS Gulp în Google, primul rezultat este, de obicei, ceea ce am nevoie, ar trebui să găsiți pagina pentru pachetul SASS. Acesta vă arată cum să îl instalați (npm install gulp-sass). Probabil că va trebui să folosiți sudo pentru a-l instala ca administrator, deci va fi probabil (sudo npm install gulp-sass) .

După ce ați terminat, puteți utiliza sintaxa pe care pachetul o dictează pentru a vă compila codul. Pentru a face acest lucru, creați un fișier numit styles.scss cu următorul conținut:

$ primar: # ff9900; corp fundal: $ primar; 

Acum creați următoarea sarcină Gulp în Gulpfile.

gulp.task ('sass', funcția () gulp.src ('* .scss') .pipe (sass ()) .pipe (gulp.dest ('./ css')););

Înainte de a rula comanda, nu uitați să "cereți" pachetul din partea superioară a Gulpfilei astfel:

var sass = necesită ("gulp-sass");

Când alergi gulp sass, toate fișierele cu extensia scss vor fi transmise la funcția Sass, care le va converti în css. Acestea sunt apoi direcționate către funcția de destinație care le plasează în dosarul CSS.

Vizionarea fișierelor și a dosarelor

Până acum, acest lucru este util, dar trebuie să introducem o comandă de fiecare data vrem să executăm o sarcină, care nu este foarte eficientă, mai ales atunci când vine vorba de schimbările stilului. Gulp vă permite să vizionați fișierele pentru modificări și să executați comenzile în mod automat.

În Gulpfile, creați o comandă numită automatizarea care va folosi comanda de vizionare pentru a viziona un set de fișiere pentru modificări și va rula o comandă specifică atunci când se modifică un fișier.

gulp.task ('automate', funcția () gulp.watch ('*. scss', ['sass']););

Dacă tastați gulp automate în terminal, va începe și va termina sarcina, dar nu va reveni la prompt, deoarece monitorizează modificările. Am specificat că vrem să urmărim toate fișierele scss din directorul rădăcină și dacă se schimbă, dorim să executăm comanda sass pe care am configurat-o anterior.

Dacă schimbați acum fișierul dvs. stil.scss, el ar trebui să fie compilat automat în fișierul css din directorul css.

Executarea mai multor sarcini

Există multe situații în care este posibil să doriți să executați mai multe sarcini. Când urmăriți dosarul javascript, este posibil să doriți să compilați concatenarea a două fișiere și apoi să le micșorați. Există două moduri în care puteți obține acest lucru.

Dacă sarcinile sunt legate, îmi place lantul lor. Un bun exemplu ar fi concatenarea și minificarea fișierelor javascript. Mai întâi conducem fișierele la acțiunea concat, apoi le conducem la uluire, apoi folosim funcția de destinație pentru a le ieși.

Dacă sarcinile nu au legătură, ai putea apelați mai multe sarcini. Un exemplu ar fi o sarcină în care vrem să concatenăm și să minimalizăm scripturile noastre și, de asemenea, să ne compilam SASS. Iată-l pe Gulpfile plin de cum ar arăta asta.

var gulp = necesită ("gulp"); var uglify = necesită ("gulp-uglify"); var concat = necesită ("gulp-concat"); var sass = necesită ("gulp-sass"); gulp.task ('scripts', function () gulp.src ('js / ** / *. js') .pipe (concat ('scripts.js' ) .pipe (uglify ()) .pipe (gulp.dest ('.')); gulp.task ('stiluri', functie () gulp.src ('/ *. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css')); gulp.task ('automate', funcția () gulp.watch (['* .ssss', 'js / ** / *. js'], ['scripts', 'styles']); gulp.task ("implicit", ["scripturi", "stiluri"]);

Dacă tastați scripturi gulp în terminal, toate fișierele javascript din directorul js vor fi concatenate, ieșite în directorul principal, apoi uglificate și salvate în directorul principal.

Dacă tastați gulp sass, toate fișierele dvs. scss vor fi compilate și salvate în directorul css.

Dacă tastați înghiţitură (sarcina implicită), dvs. script-uri sarcina va fi rulată, urmată de dvs. stiluri sarcină.

gulp automate task-ul urmărește mai multe foldere pentru modificările în fișierele noastre scss și js și va efectua ambele sarcini pe care le-am definit, dacă este detectată o modificare.

Prezentare generală

Folosirea lui Gulp nu este dificilă, de fapt, mulți oameni îl preferă pe Grunt datorită sintaxei sale mai simple. Rețineți pașii pe care trebuie să îi faceți atunci când creați o nouă automatizare:

• Căutați pluginul
• Instalați pluginul
• Aveți nevoie de plugin în Gulpfile
• Utilizați sintaxa în documentație

Cele cinci comenzi disponibile în Gulp (task, run, watch, src, dest) sunt singurele pe care trebuie să le cunoașteți, toate addonurile de la terțe părți au o documentație excelentă. Iată o listă cu câteva lucruri pe care le folosesc cu care ați putea începe cu acum:

• Optimizarea imaginilor cu optimizarea imaginii gulp-image
• Crearea de sprite de imagine cu gulp-sprite
• Concatenarea fișierelor cu gulp-concat
• Minifierea fișierelor cu gulp-uglify
• Ștergerea fișierelor cu gulp-del
• Javascript linging cu gulp-jslint
• JSON de lustruire cu gulp-jsonlint
• Autoprefix CSS cu gulp-autoprefixer
• Căutați și înlocuiți folosind gulp-frep
• Reduceți CSS cu gulp-minify-css