Linia de comandă pentru Web Design Live Reload & BrowserSync

În ultima lecție ați învățat cum să obțineți întregul dvs. proiect compilat sau construit cu comenzi scurte cum ar fi mormăit, Ceasul de grunt, înghiţitură și ceas de gulp.

În această lecție veți învăța cum să creați comenzi care adaugă un strat suplimentar de minunat pentru proiectele dvs., permițând reîncărcarea live și sincronizarea browserului.

Dacă nu ați terminat încă celelalte tutoriale din această serie, vă rugăm să reveniți și să le finalizați înainte de a începe aici.

Live Reload

Notă: Pentru a preveni confuzia, există o aplicație desktop și o combinație de plugin-uri Chrome numită LiveReload, care este adesea folosit împreună cu multe pachete npm pentru a face față reîncărcării automate. Cu modul în care vom configura totuși, aplicațiile pentru desktop și pluginul pentru browser nu vor fi necesare.

Live Reîncărcați prin Grunt

Pentru a permite funcționarea reîncărcării live, trebuie să existe o localitate care poate fi actualizată, adică o modalitate de a vizualiza site-ul dvs. care simulează local o gazdă web cu http: // protocol în loc de fişier://. 

Cu proiectul dvs. Grunt vom avea grijă să permiteți unui localhost să servească fișierele statice ale proiectului dvs. și să reîncarce live that localhost folosind pluginul grunt-express.

Instalați grunt-express în proiectul dvs. cu:

npm instalează grunt-express --save-dev

Apoi, activează plugin-ul în Gruntfile prin adăugarea acestuia sub nivelul dvs. existent grunt.loadNpmTasks linii:

grunt.loadNpmTasks ( 'groh-express');

Configurați sarcina expresă prin adăugarea acestui cod:

 expres: toate: opțiuni: bases: 'build', livereload: true, open: 'http: // localhost: 3000',

Veți observa că în cazul nostru expres sarcina de configurare avem livereload opțiunea setată la Adevărat, astfel încât, după lansarea previzualizării locale, aceasta va fi reîncărcată automat în momentul detectării modificărilor.

Acum vom adăuga o nouă sarcină numită start. Vom folosi această sarcină pentru a declanșa ambele expres și sarcina ceas o dată.

Adăugați aceasta mai jos grunt.registerTask linia:

grunt.registerTask ("start", ['express', 'watch']);

Acum executați comanda: 

începutul început

... și ar trebui să vedeți browserul dvs. implicit deschis cu previzualizarea proiectului dvs. afișată în interior.

ceas sarcina se execută acum și vă va compila modificările Stylus și Jade în folderul "build".

Express, la rândul său, monitorizează folderul "build" pentru orice modificări, deci dacă fișierele HTML, CSS sau JS sunt recompilate, acesta va reîncărca automat previzualizarea.

LiveReload prin Gulp

În continuare, vom continua și vom obține același tip de previzualizare localhost în proiectul dvs. Gulp. De data aceasta vom folosi în schimb pluginul gulp-connect.

Instalați gulp-connect în proiectul dvs. cu această comandă:

npm instala --save-dev gulp-connect

Faceți-o accesibilă în Gulpfile adăugând această linie sub celelalte linii în care ați utilizat require () funcţie:

var connect = necesită ('gulp-connect');

Configurați o nouă sarcină numită conectați prin adăugarea acestui cod sub alt cod de activitate:

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

Așa cum am făcut și cu Grunt, acum vom crea o sarcină personalizată numită start care va lansa atât previzualizarea localhost, cât și inițierea sarcinii noastre de vizionare.

Adăugați această linie în partea de jos a fișierului Gulp:

gulp.task ('start', 'connect', 'watch']);

Pentru a permite reîncărcarea previzualizării localhost, vom conecta o altă "conductă" la sfârșitul celor două css și html sarcini.

Adăugați acest declanșator de reîncărcare la sfârșitul fiecărui:

.pipe (connect.reload ())

Realizarea sarcinilor:

gulp.task ('css', function () gulp.src ('sursa / stylus / main.styl') .pipe (stiluri (compress: false, paths: (autoprefixer ()) .pipe (minifyCSS ()) .pipe (redenumiți ('style.css')) .pipe (gulp.dest ('build')) .pipe (connect.reload ()));

… și:

gulp.task ('html', function () gulp.src ('sursa / jade / *. jade') .pipe (jade ()) .pipe (gulp.dest ('build')). reload ()));

Acum executați comanda: 

gulp start

... apoi mergeți la http: // localhost: 8080 și veți vedea previzualizarea site-ului dvs. local. 

Salvați o schimbare la oricare dintre fișierele Jade sau Stylus și urmăriți recompilarea rapidă și reîncărcarea fulgerului!

BrowserSync

Acum, dacă aveți previzualizarea locală a dvs. local, puteți să o reîncărcați automat, puteți lăsa acest lucru și veți avea în continuare un proces de dezvoltare de vârf pentru proiectul dvs. Cu toate acestea, atunci când este vorba de posibilitatea de a face cross browser-ul și testarea dispozitivelor încrucișate, de asemenea, având BrowserSync în imagine este într-adevăr în valoare de dvs..

Cu BrowserSync vi se oferă o adresă URL de previzualizare pe care o puteți conecta la orice browser de pe aparat, precum și pe browsere de pe orice alt dispozitiv care are aceeași conexiune la internet.

Toate previzualizările pe care le-ați rulat vor fi apoi reîncărcate în timp ce faceți modificări, astfel încât să puteți vedea rezultatele peste bord și toate interacțiunile dvs. vor fi reflectate în fiecare instanță. Dacă defilați sau deschideți un meniu dintr-un browser, veți vedea cum răspund simultan fiecare browser și dispozitiv.

BrowserSync prin Grunt

Pentru a instala pluginul grunt-browser-sync în proiectul dvs. Grunt executați următoarea comandă:

npm instala grunt-browser-sync -save-dev

Comentează sau șterge linia pe care ai folosit-o pentru a activa grunt-express:

// grunt.loadNpmTasks ('grunt-express');

Apoi, adăugați această linie pentru a permite sincronizarea browser-ului în schimb:

grunt.loadNpmTasks ( 'groh browser-sincronizare');

Comentează sau șterge expres sarcina pe care ați creat-o mai devreme și adăugați acest cod config pentru sarcină browserSync in schimb:

 
Găsiți-vă start și schimbați-o astfel încât să ruleze browserSync în loc de expres sarcina, de la:
grunt.registerTask ("start", ['express', 'watch']);
… la:
grunt.registerTask ('start', ['browserSync', 'watch']);
Acum, când executați comanda:
începutul început
... veți vedea în continuare o previzualizare locală locală și va fi reîncărcată atunci când salvați modificările, însă diferența este acum că sincronizarea browserului este activă, ca și capacitatea de a vizualiza previzualizarea pe alte dispozitive. 
În terminal după pornirea serverului dvs. BrowserSync veți vedea:
- Local: http: // localhost: 3000 Extern: http://192.168.1.3:3000 - UI: http: // localhost: 3001 UI Extern: http://192.168.1.3:3001 -
Luați adresa etichetată Local, puneți-l într-unul din celelalte browsere de pe mașină și introduceți adresa etichetată Extern în orice alte dispozitive pe care le-ați partajat aceeași conexiune. Apoi urmăriți răspunsurile sincronizate pe care le obțineți în toate situațiile în timp ce interacționați cu oricare dintre acestea.
 
Pentru mai multe informații despre BrowserSync prin intermediul Grunt accesați: http://www.browsersync.io/docs/grunt/
 
BrowserSync prin Gulp
 
Acum vom seta același proces, de data aceasta folosind pluginul de sincronizare browser pentru Gulp.
Instalați plugin-ul în proiectul dvs. Gulp cu:
npm instalare browser-sincronizare gulp --save-dev
Comentează sau șterge această linie:
// var connect = necesită ('gulp-connect');
... și înlocuiți-l cu:
var browserSync = necesită ("browser-sync");
Comentează sau șterge existența conectați și adăugați în acest nou browser-ul de sincronizare sarcină în loc de:
gulp.task ('browser-sync', funcția () browserSync (server: baseDir: "build"););
La sfârșitul sarcinilor css și html localizați cele două locuri pe care le-ați adăugat linia:
.pipe (connect.reload ())
 
... și înlocuiți fiecare din aceste două linii cu:
.pipe (browserSync.reload (flux: true))
Și în sfârșit localizați-vă existența start și modificați-l pentru a rula browser-ul de sincronizare în loc de conectați sarcină, înlocuind aceasta:
gulp.task ('start', 'connect', 'watch']);
… cu asta:
gulp.task ('start', ['browser-sync', 'watch']);
Acum, când executați comanda:
gulp start
... o fereastră de browser se va deschide cu previzualizare în ea. La fel ca atunci când ați folosit BrowserSync prin intermediul Grunt, adresele URL ale examinării se vor sincroniza acum în orice browser de pe orice dispozitiv care rulează în afara conexiunii la internet.
 
Pentru mai multe informații despre BrowserSync prin Gulp vizitați: http://www.browsersync.io/docs/gulp/
 
În Următorul tutorial
 
Ați trecut acum toate elementele esențiale ale stabilirii propriilor proiecte de la zero până la utilizarea liniei de comandă în timpul dezvoltării. Dar atunci când nu vrei să începi de la zero. Ce se întâmplă atunci când doriți să utilizați cadre terțe existente sau doriți doar să coborâți la un început?
În următorul tutorial veți învăța cum să utilizați linia de comandă pentru a elabora proiecte complet noi în doar o chestiune de momente, complet cu tot codul de terță parte de care au nevoie, precum și gestionarea sarcinilor Grunt sau Gulp toate configurarea și gata de plecare.
Ne vedem în tutorialul următor!



		
			
	   
	




Web design