Share
I den sista lektionen lärde du dig att få hela ditt projekt sammanställt eller byggt med korta kommandon som grymta, grunt klocka, klunk och gulp klocka.
I den här lektionen lär du dig att skapa kommandon som lägger till ett extra lager som är fantastiskt för dina projekt, vilket möjliggör återuppladdning och synkronisering av webbläsare.
Om du inte har slutfört de andra handledningarna i denna serie, vänligen gå tillbaka och slutför dem innan du börjar här.
Notera: För att förhindra förvirring finns det en skrivbordsapp och Chrome-plugin-kombination som heter LiveReload, som ofta används tillsammans med många npm-paket för att hantera automatisk återladdning. Med det sätt som vi kommer att installera krävs dock inte pluggarna för stationära appar och webbläsare.
För att tillåta live reloading till jobbet måste det finnas ett lokalt värd som kan uppdateras, det vill säga ett sätt att se din webbplats lokalt simulera en webbhotell med en http: // protokoll i stället för fil://.
Med ditt Grunt-projekt kommer vi att ta hand om att göra det möjligt för ett localhost att betjäna ditt projekts statiska filer och leva om det lokalahostet, med hjälp av grunt-express plugin.
Installera grunt-express i ditt projekt med:
npm installera grunt-express -save-dev
Aktivera sedan plugin-modulen i din Gruntfile genom att lägga till den här nedanför din befintliga grunt.loadNpmTasks rader:
grunt.loadNpmTasks ( 'grunt-express');
Konfigurera expressuppgiften genom att lägga till den här koden:
uttrycka: alla: alternativ: baser: "bygg", leverans: sant, öppet: "http: // localhost: 3000 ',
Du märker det i vår uttrycka uppgiftskonfiguration vi har livereload alternativet inställt på Sann, så efter att vår lokala förhandsvisning lanserats kommer den automatiskt att ladda om när ändringar upptäcks.
Nu lägger vi till en ny uppgift som heter Start. Vi använder denna uppgift för att utlösa både uttrycka uppgift och Kolla på uppgift på en gång.
Lägg till detta under din befintliga grunt.registerTask linje:
Accentsconagua
grunt.registerTask ('start', ['express', 'watch']); Kör nu kommandot:
grunt start
... och du borde se din standardwebbläsare öppna med din projektförhandsvisning som visas inuti.
De Kolla på uppgiften är nu igång och kommer att kompilera din Stylus och Jade ändringar i "build" mappen.
Express följer i sin tur mappen "build" för eventuella ändringar, så om dina HTML-, CSS- eller JS-filer omkompileras kommer det automatiskt att ladda om förhandsgranskningen.
Därefter fortsätter vi och uppnår samma typ av lokala värdprov i ditt Gulp-projekt. Den här gången kommer vi istället att använda plug-in-pluggen.
Installera gulp-connect i ditt projekt med detta kommando:
npm installera - save-dev gulp-connect
Gör det tillgängligt i din Gulpfile genom att lägga till den här raden under de andra raderna där du har använt fordra() fungera:
var connect = kräver ('gulp-connect'); Ange en ny uppgift som heter ansluta genom att lägga till den här koden under din andra uppgiftskod:
gulp.task ('connect', funktion () connect.server (root: 'build', levereload: true, open: true););Som vi gjorde med Grunt, kommer vi nu att skapa en anpassad uppgift som heter Start som både startar vår lokala värdförhandsgranskning och initierar vår klockuppgift.
Lägg till den här raden längst ner i din Gulpfile:
gulp.task ('start', ['connect', 'watch']);För att möjliggöra omladdning av vår lokala värdförhandsgranskning, kommer vi att ansluta ett annat "rör" till slutet av båda css och html uppgifter.
Lägg till den här omladdningsutlösaren till slutet av varje:
.rör (connect.reload ())
Att göra uppgifterna blir:
gulp.task ('css', funktion () gulp.src ('source / stylus / main.styl') .pipe (stylus (komprimera: false, paths: ['source / stylus'])) pip (autoprefixer ()). pip (minifyCSS ()). pip (rename ('style.css')) .pipe (gulp.dest ('build')) .pipe (connect.reload ()));... och:
gulp.task ('html', funktion () gulp.src ('source / jade / *. jade') .pipe (jade ()) .pipe (gulp.dest ('build')) .pipe ladda om()) );Kör nu kommandot:
gulp start
... sedan gå till http: // localhost: 8080 och du får se din lokala webbplatsförhandsgranskning.
Spara en ändring till någon av dina Jade- eller Stylus-filer och se till att blixten snabbt kompileras och laddas om!
Nu när du har förhandsgranskat ditt lokalahost automatiskt, kan du lämna det där och fortfarande ha en avancerad installationsprocess för ditt projekt. Men när det gäller att kunna köra webbläsare och korsningstestning, är det också värt att du också har BrowserSync på bilden..
Med BrowserSync har du en förhandsgranskningsadress som du kan ansluta till en webbläsare på din dator, liksom webbläsare på någon annan enhet på samma internetanslutning.
Alla förhandsgranskningar som du har kört laddas sedan om när du gör ändringar så att du kan se resultaten över hela linjen och alla dina interaktioner kommer att speglas i varje fall. Om du bläddrar eller öppnar en meny i en webbläsare ser du hur alla andra webbläsare och enheter svarar samtidigt.
För att installera grunt-browser-synkroniseringsprogrammet i ditt Grunt-projekt, kör följande kommando:
npm installera grunt-browser-sync - save-dev
Kommentera eller ta bort raden du använde för att aktivera grunt-express:
// grunt.loadNpmTasks ("grunt-express");Lägg sedan till den här raden för att aktivera grunt-browser-synkronisering istället:
grunt.loadNpmTasks ( 'grunt-browser-sync');
Kommentera eller ta bort uttrycka uppgift du skapade tidigare och lägg till den här konfigurationskoden för uppgiften browserSync istället:
browserSync: bsFiles: src: ['build / *. css', 'build / *. html'], alternativ: watchTask: true, server: baseDir: "build",
Hitta din Start uppgift och ändra det så att det körs browserSync uppgift istället för uttrycka uppgift, från:
grunt.registerTask ('start', ['express', 'watch']);... till:
grunt.registerTask ('start', ['browserSync', 'watch']);Nu när du kör kommandot:
grunt start
... du kommer fortfarande se en localhost-förhandsgranskning öppen och den kommer fortfarande att ladda om när du sparar ändringar, men skillnaden är nu att webbläsarsynkronisering är aktiv liksom möjligheten att visa förhandsvisningen på andra enheter.
I terminalen efter att du startat din BrowserSync-server ser du detta:
- Lokal: http: // localhost: 3000 Extern: http://192.168.1.3:3000 - UI: http: // localhost: 3001 UI Extern: http://192.168.1.3:3001 -
Ta tag i adressen märkt Lokal, stansa den i några av de andra webbläsarna på din maskin och skriv in adressen märkt Extern till andra enheter som du har samma anslutning till. Kolla sedan på de synkroniserade svaren du får i alla fall när du interagerar med någon av dem.
För mer information om BrowserSync via Grunt, gå till: http://www.browsersync.io/docs/grunt/
Nu ställer vi in samma process, den här gången med hjälp av webbläsarsynkroniseringsprogrammet för Gulp.
Installera pluginprogrammet i ditt Gulp-projekt med:
npm installera browser-sync gulp - save-dev
Kommentera eller radera den här raden:
// var ansluta = kräva ('gulp-connect');... och ersätt det med:
var browserSync = kräver ("browser-sync");Kommentera eller ta bort det befintliga ansluta uppgift och lägg till i det här nya browser-sync uppgiften istället:
gulp.task ("browser-sync", funktion () browserSync (server: baseDir: "build"););I slutet av css och html-uppgifterna, lokalisera de två platserna du lade till:
.rör (connect.reload ())
... och ersätt var och en av dessa två linjer med:
.rör (browserSync.reload (ström: true))
Och äntligen hitta din befintliga Start uppgiften och redigera den för att köra browser-sync uppgift istället för ansluta uppgift, ersätter detta:
gulp.task ('start', ['connect', 'watch']);… med detta:
gulp.task ('start', ['browser-sync', 'watch']);Nu när du kör kommandot:
gulp start
... ett webbläsarfönster öppnas med förhandsvisningen i den. Precis som när du använde BrowserSync via Grunt, synkroniseras förhandsgranskningswebbadresserna nu i alla webbläsare på vilken enhet som helst som slutar använda din internetanslutning.
För mer information om BrowserSync via Gulp besök: http://www.browsersync.io/docs/gulp/
Du har nu gått igenom alla nödvändigheter för att skapa egna projekt från början för att utnyttja kommandoraden under utveckling. Men vad sägs om när du inte vill börja från början. Vad sägs om när du vill använda befintliga ramar från tredje part, eller om du bara vill komma igång?
I nästa handledning lär du dig att använda kommandoraden för att ställa in helt nya projekt på bara några minuter, komplett med all tredje partskod som de behöver, samt Grunt eller Gulp-arbetshantering, alla inställningar och redo att gå.
Jag ser dig i nästa handledning!
