Gulp ca server de dezvoltare web

Rolul Gulp.js devine din ce în ce mai popular în ultimul timp. Acesta poate fi folosit pentru multe lucruri, cum ar fi concatenarea fișierelor JavaScript sau imaginile miniatură. Dacă sunteți nou la Gulp.js, vă recomandăm să începeți cu Gestionarea sarcinilor dvs. de construire cu Gulp.js. 

În acest tutorial, veți învăța cum să utilizați Gulp.js, pentru a rula un server web local cu built-in, livereload a sustine.

Calea veche

Să presupunem că vrem să dezvoltăm o aplicație pentru o singură pagină. Punctul de intrare pentru această aplicație este simplu index.html fişier. Scopul nostru este să accesați acest fișier prin browser, accesând gazdă locală. În trecut, poate tu configurați un server Apache sau Nginx. Nu mai e nevoie de asta.

O cale mai bună

Astăzi, o implementare în JavaScript există pentru aproape orice, chiar și pentru un server web. Cea mai populară se numește Connect. Vom folosi-o, folosind un plugin Gulp.js numit gulp-connect. 

În secțiunile următoare, vom configura un server web local pentru o aplicație cu o singură pagină, deci presupun că ați configurat deja fișierele de bază, cum ar fi gulpfile.js fişier.

Configurare inițială

Începem prin instalarea pluginului Connect cu comanda de mai jos. Tot ce avem nevoie va fi instalat cu această singură comandă.

npm instala --save-dev gulp-connect

Bacsis: npm instalează -save-dev poate fi abreviat cu npm i -D.

Acum, să definim o sarcină pentru serverul web. Al nostru gulpfile.js ar trebui să arate astfel:

var gulp = necesită ('gulp'), connect = requ ('gulp-connect'); gulp.task ('webserver', funcția () connect.server ();); gulp.task ("implicit", ['webserver']);

Acum putem porni serverul web prin simpla rulare înghiţitură în terminal. Putem să ne deschidem localhost: 8080 în browserul nostru, unde ar trebui să vedem index.html. Serverul web montează structura de fișiere a directorului, unde gulpfile.js trăiește în, până la rădăcina lui localhost: 8080. Serverul va rula până când opriți sarcina apăsând Ctrl + c pe tastatură. Grozav!

Puteți găsi codul sursă pentru acest și toate exemplele de mai jos despre Github. Fiecare exemplu conține toate fișierele necesare pentru a reproduce o configurație de lucru. Trebuie doar să fugi npm install în directorul respectiv.

adăugare livereload A sustine

Setarea serverului de bază a fost ușoară, nu? Deci, să continuăm să ajungem livereload alergare. Trebuie să facem două lucruri: să spunem mai întâi serverului web să înceapă livereload sprijin și în al doilea rând, spunem livereload când să reîmprospătați pagina cu conținut nou.

Primul pas este simplu. Doar setați livereload proprietate la Adevărat. webserver sarcina arata astfel:

gulp.task ('webserver', funcție () connect.server (livereload: true););

Al doilea pas depinde de cazul dvs. de utilizare. În acest exemplu, vom seta compilarea automată a fișierelor LESS într-o foaie de stil CSS și o vom injecta în browser. Să aruncăm acest exemplu în părțile sale. Avem nevoie de un "observator", care să verifice dacă unele fișiere mai puține au fost schimbate. Acest observator ar trebui să declanșeze compilatorul LESS, care transmite un fișier CSS. Acest fișier CSS ar trebui apoi să fie injectat prin livereload.

Pentru acest exemplu, vom folosi pluginul fără gulp. Puteți să-l instalați prin rulare npm instalează -save-dev gulp-less. Observatorul vine deja livrat cu Gulp.js. Structura fișierului nostru de aplicații ar trebui să arate aproximativ în felul următor:

. ├─┘ node_modules │ └─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

În ceas Gulp.js asculta schimbari in toate *.Mai puțin fișiere în stiluri folder și declanșează Mai puțin sarcină. Aici main.less fișierul este punctul de intrare pentru LESS. După fiecare etapă de compilare, rezultatul va fi automat injectat în browser. Codul pentru gulpfile.js arată ca următoarele, nu ezitați să copiaza si lipeste pentru proiectul dvs..

var gulp = necesită ('gulp'), connect = requ ('gulp-connect'), less = require ('gulp-less'); gulp.task ('webserver', funcție () connect.server (livereload: true);); gulp.task ('less', function () gulp.src ('styles / main.less') .pipe (mai puțin ()) .pipe (gulp.dest ('styles' ));); "gulp.task ('watch', function () gulp.watch ('stiluri / *. mai putin', ['less']);)) gulp.task 'ceas']);

Să reluăm înghiţitură în terminal și deschideți din nou localhost: 8080 în browser. Acum putem face unele modificări la un fișier LESS în stiluri pliant. Acesta va fi imediat compilat și actualizat în browser. Rețineți că nu aveți nevoie de extensii de browser. livereload funcționează din cutie.

Câteva ajustări

Rețineți că anterior gulpfile.js este doar o demonstrație minimală a modului în care se utilizează Gulp.js ca server web livereload. Vă recomandăm să jucați în jur cu alte pluginuri. De asemenea, ar trebui să încercați să rearanjați structura sarcinii și să utilizați pluginul non-builtin watch-watch, care vă permite să procesați doar fișierele modificate. Acest lucru devine important dacă lucrați cu o bază de cod mai mare. Mai târziu, în acest tutorial, vom vedea cum ar putea arăta o structură de sarcini alternativă.

Schimbarea numelui de gazdă și a portului

înghiți dintr-conectați plugin-ul în sine are multe opțiuni de configurare. De exemplu, puteți modifica portul serverului web sau numele de gazdă. Puteți utiliza chiar și un nume de gazdă personalizat cu portul 80 (implicit este localhost: 8080).

connect.server (port: 80, gazdă: 'gulp.dev');

Pentru a face acest lucru, trebuie să avem gulp.dev în fișierul gazde și executați comanda sudo gulp. Sunt necesare drepturi de administrator pentru a utiliza portul 80.

Unele caracteristici avansate

Puteți merge și mai mult utilizând pluginul de conectare pentru crearea simultană a mai multor servere web. Acest lucru devine util, de exemplu, dacă doriți să rulați un server web de dezvoltare și să rulați teste de integrare, simultan.

înghiți dintr-conectați oferă, de asemenea, posibilitatea de a utiliza mai multe directoare ca director rădăcină. De exemplu, atunci când utilizați CoffeeScript și doriți să salvați fișierele JavaScript compilate într-un dosar temporar, puteți să montați acest folder fără a vă polua folderul sursă.

Pentru mai multe exemple, vă rugăm să verificați depozitul GitHub.

Refactorizarea Codului nostru

În exemplul anterior stabilim un minim gulpfile.js pentru a compila fisierele LESS catre CSS si a le injecta imediat in browser. A funcționat, dar putem face mai bine. Ar putea fi dificil să amestecăm compila și livereload într-o singură sarcină. Deci, hai să le împărțim și să urmărim schimbările în fișierele generate. Pentru aceasta, vom folosi cele menționate anterior înghițitură-ceas conecteaza.

Să mergem chiar mai departe și să adăugăm un pas pentru compilarea CoffeeScript. Cu acest pas suplimentar, noua structură ar trebui să fie mai clară. Instalăm noile pluginuri într-o singură lot prin:

npm instalează -save-dev gulp-watch ceai-cafea 

Și necesita ei în partea de sus a noastră gulpfile.js. În următoarea configurație, presupun că deja aveți unele .cafea fișiere dintr-un director numit script-uri. Pentru o configurare de exemplu, vă rugăm să finalizați această repo. Refactat gulpfile.js ar putea arăta în felul următor. Vom trece prin schimbări, pas cu pas.

var gulp = necesită ('gulp'), connect = necesită ('gulp-connect'), watch = cafea'); gulp.task ('webserver', funcția () connect.server (livereload: true, root: ['.', '.tmp']);); gulp.task ('livereload', function () gulp.src (['.tmp / stiluri / * .css', '.tmp / scripts / *. js' connect.reload ());); gulp.task ('mai puțin', funcția () gulp.src ('styles / main.less') .pipe (less ()) .pipe (gulp.dest ('.tmp / styles')); gulp.task ("cafea", funcția () gulp.src ('scripts / *. cafe') .pipe (coffee ()) .pipe (gulp.dest ('.tmp / scripts')); gulp.task ('watch', function () gulp.watch ('stiluri / *. mai putin', ['mai putin']); gulp.watch ('scripts / *. ) gulp.task ("implicit", ['mai puțin', 'cafea', 'webserver', 'livereload', 'watch']);

Cea mai mare schimbare pe care o vedem este cea suplimentară livereload sarcină. Această sarcină doar privește (prin înghițitură-ceas plugin) pentru modificările în fișierele compilate și le reîmprospătează în browser. Obiceiul ceas() funcția ne permite să reîncărcați doar fișierele modificate, în timp ce built-in gulp.watch () comanda ar reîncărca toate fișierele și nu doar cele schimbate.

Din cauza acestei singure sarcini suplimentare, nu avem nevoie de a .pipe (connect.reload ()) comandă după fiecare etapă de compilare. Deci am separat sarcinile de preocupările lor, ceea ce este întotdeauna o idee bună în dezvoltarea de software.

De asemenea, am observat că fișierele compilate nu mai sunt salvate în folderul sursă respectiv. Ele sunt acum stocate într-un folder temporar numit .tmp. Conținutul acestui dosar este doar un fișier generat și nu va polua stiluri sau script-uri directoare. De asemenea, este recomandat să excludem acest dosar din sistemul de control al reviziilor. Tot ce trebuie să facem pentru a face acest lucru este de a mânui și noi .tmp ca director rădăcină, care este realizat de

rădăcină: ['.', '.tmp']

Această configurație refactată ar trebui să funcționeze la fel ca cea precedentă. Dar este mult mai curat și mai ușor de prelungit.

Concluzie

Tocmai ați învățat cum să utilizați Gulp.js ca server web. 

Puteți combina această tehnică cu multe alte cazuri de utilizare, cum ar fi testarea sau construirea aplicației pentru o singură pagină. Rețineți că acest server web este destinat exclusiv dezvoltării locale. În scopuri de producție, ar trebui să utilizați o soluție mai performantă, cum ar fi Nginx sau un CDN. 

Observați că toate caracteristicile prezentate sunt, de asemenea, posibile cu Grunt sau alte proiecte similare. Gulp.js oferă doar o foarte simplu și elegant mod de a face lucrurile.