Share
I den tidigare handledningen installerade vi ett projekt och använde Grunt för att titta på och automatiskt kompilera Stylus och Jade. I den här handledningen gör vi detsamma, men använder en annan uppdragslöpare: Gulp.
Installera Gulp globalt med:
[sudo] npm installera gulp -g
Som med Grunt-processen, lägg till en "package.json" -fil till ditt projekt med hjälp av npm init kommando.
Installera Gulp i ditt projekt och spara det som ett utvecklingsberoende med:
npm installera gulp - save-dev
I en parallell med Grunts "Gruntfile" använder Gulp en "Gulpfile". Till rotmappen i ditt "Gulp Project" lägg till en fil med namnet "gulpfile.js".
För att komma igång ger vi filåtkomst till paketet "gulp" som du just installerat i mappen "node_modules", genom att lägga till den här raden till toppen av din Gulpfile:
Accentsconagua
var gulp = kräver ("gulp");Strängt sagt, Gulp faktiskt inte behöver att använda Gulp plugins eftersom det faktiskt kan använda vaniljnpm-paket. Det finns dock flera plugins som är optimerade för användning med Gulp, och när du börjar kommer du att hitta dessa enklare att använda.
Sök efter Gulp plugins på: http://gulpjs.com/plugins/
Vi installerar dessa plugins:
Dessa plugins utför i huvudsak samma roller som de vi använde med Grunt, med ett par skillnader.
En, vi behöver inte installera ett "klocka" plugin som Gulp har en inbyggd.
Två, vi installerar plugin-programmet "gulp-concat" för att kunna dra alla våra filer tillsammans (sammanfatta dem) innan vi minskar hela partiet. Tack till Dan för att peka ut det här!
Notera: vi använder ett plugin med namnet "gulp-minify-css" men det använder samma "clean-css" -paket som du har använt hittills.
Med din terminal pekad på din "Gulp Project" -mapp kör alla dessa kommandon:
npm installera gulp-stylus - save-dev
npm installera gulp-autoprefixer --save-dev
npm installera gulp-minify-css - save-dev
npm installera gulp-jade -save-dev
npm installera gulp-uglify - save-dev
npm installera gulp-concat - save-dev
När du är klar bör du se dessa mappar i ditt projekts "node_modules" -mapp:
Mer eller mindre… Precis som vi gjorde med Grunt, måste vi aktivera alla plugins, den här gången i vår Gulpfile. I stället för Grunts metod grunt.loadNpmTasks, vi ska använda fordra funktion inbyggd i NodeJS.
Lägg till dessa rader i din Gulpfile, under den linje du redan har lagt till.
Var-stylus = kräver ('gulp-stylus'); var autoprefixer = kräver ("gulp-autoprefixer"); var minifyCSS = kräver ("gulp-minify-css"); var jade = kräva ("gulp-jade"); var uglify = kräver ('gulp-uglify'); var rename = kräver ('gulp-rename'); var concat = kräver ("gulp-concat");Detta tillvägagångssätt är annorlunda än Grunt, eftersom vi ännu inte har några kommandon registrerade som kan köras i detta skede. Vi har snarare just skapat JavaScript-variabler, som representerar våra plugins, som vi kan använda senare i vår Gulpfile.
En av de viktigaste skillnaderna mellan Grunt och Gulp är att med Gulp behöver du inte konfigurera en uppgift för varje plugin du använder i ditt projekt. Istället konfigurerar du bara uppgifter för det faktiska kommandon du vill springa.
I vår Gruntfile installerar vi tidigare en separat uppgift för Stylus, Autoprefixer och Clean-CS. I vårt Gulpfile behöver vi inte göra det här. Vi vet att varje gång vi sammanställer vår Stylus-kod vill vi att den resulterande CSS ska autoprefixeras och minimeras, så istället skapar vi en enda uppgift att göra alla dessa saker på en gång.
Lägg till den här koden längst ner i din Gulpfile:
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')). pip (gulp.dest ('build')));Låt oss bryta ner vad vi har gjort.
Först använder vi gulp.task () att definiera en ny uppgift som heter css, och gör lite utrymme för en JavaScript-funktion som körs när vi kör kommandot gulp css:
gulp.task ('css', funktion () );Nästa använder vi gulp.src () för att ställa in källfilen vi vill bearbeta till "source / stylus / main.styl" -fil:
gulp.task ('css', funktion () gulp.src ('source / stylus / main.styl'));Sedan börjar vi använda Gulp's rör() funktion att ringa på alla våra plugins. Vägenrör() Verk är som fysiska rör, där du matar in något i det första röret och passerar sedan igenom alla anslutna rör.
Vår första "pipe" lägger till Stylus-kompilering, med samma komprimera och banor alternativ som vi gjorde när vi arbetade med Grunt tidigare:
gulp.task ('css', funktion () gulp.src ('source / stylus / main.styl'). pip (stylus (komprimera: felaktiga sökvägar: ['source / stylus']))) ;Vi kopplar sedan ett andra rör, som tar den sammanställda koden och lägger till autoprefixing:
gulp.task ('css', funktion () gulp.src ('source / stylus / main.styl') .pipe (stylus (komprimera: false, paths: ['source / stylus'])) pip (autoprefixer ()));Vi ansluter ett tredje rör, tar vår prefixade CSS och rengör den:
gulp.task ('css', funktion () gulp.src ('source / stylus / main.styl') .pipe (stylus (komprimera: false, paths: ['source / stylus'])) pip (autoprefixer ()). pip (minifyCSS ()));Vid den här tiden om vi skulle skriva ut en CSS-fil skulle den vara namnet "main.css" för att motsvara källan "main.styl" -filen som vi började med. Så vi kopplar ett fjärde rör för att byta namn på filen vi kommer att sluta med till "style.css":
gulp.task ('css', funktion () gulp.src ('source / stylus / main.styl') .pipe (stylus (komprimera: false, paths: ['source / stylus'])) pip (autoprefixer ()). pip (minifyCSS ()) .pipe (rename ('style.css')));Slutligen ansluter vi vårt femte och sista röret för att skicka vår färdiga CSS-fil till dess destination, med hjälp av gulp.dest () för att ställa in vår utgående mapp för att vara "byggd".
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')). pip (gulp.dest ('build')));Nu den css Uppgiften du just skapat är redo att gå. I din projekt rotmapp kör:
gulp css
... och din Stylus-fil kommer att kompileras, autoprefixed och rengöras och sedan matas ut till din "build" -mapp som "style.css".
Vi använder samma process igen för att ställa in vår uppgift för Jade-kompilering. Vi skapar en uppgift som heter html, ange det att använda alla ".jade" -filerna i mappen "source / jade" som dess källa, rör genom Jade-kompilering och skicka sedan den resulterande HTML-filen till vår "build" -mapp.
Lägg till den här koden under css uppgift du just skapat:
gulp.task ('html', funktion () gulp.src ('source / jade / *. jade') .pipe (jade ()) .pipe (gulp.dest ('build')));Kör din nya uppgift med kommandot:
gulp html
... och du kommer att se var och en av dina Jade-filer kompilerad till motsvarande HTML-filer i din "build" -mapp.
Nu ska vi använda samma tillvägagångssätt en gång till, och skapa en uppgift som heter js att ta jQuery och Modernizr-filer från vår "bower_components" -mapp, uglify (concatenate and minify) dem och mata sedan ut koden som en fil med namnet "output.min.js" till vår "build" -mapp.
gulp.task ('js', funktion () gulp.src (['bower_components / jquery / dist / jquery.js', 'bower_components / modernizr / modernizr.js']) .pipe (concat ('output.min. js ')) // concat drar alla våra filer tillsammans innan de minifineras. pip (uglify ()). pip (gulp.dest (' build ')));Notera: i det här fallet vill vi ange två källfiler, så vi passerar de två filnamnen som en array, dvs kommaseparerade värden mellan ruta parentes.
Kör din js uppgift med kommandot
gulp js
... och du får se en ny fil med namnet "output.min.js" visas i din "build" -mapp, innehållande jQuery och Modernizr i minifierad form.
Nu när vi har vår beställning css och html Inställningar av uppgifter, vi kan använda Gulp's in builtgulp.watch () funktion så att de körs automatiskt för oss.
Lägg till den här koden längst ner i din Gulpfile för att skapa en Kolla på uppgift:
gulp.task ('klocka', funktion () gulp.watch ('source / stylus / *. styl', ['css']); gulp.watch ('source / jade / * .jade', ['html ']););Den första användningen av gulp.watch () ställer in css uppgift som ska köras när en ".styl" -fil i mappen "source / stylus" ändras.
Den andra användningen av gulp.watch () ställer in html uppgift som ska köras när en ".jade" -fil i mappen "source / jade" ändras.
Kör din Kolla på uppgift med kommandot
gulp klocka
... och när du sparar ändringar i en av dina Stylus- eller Jade-filer hanteras din samling automatiskt.
Precis som vi gjorde med vårt Grunt-projekt slår vi om genom att skapa en standarduppgift som körs när vi använder kommandot klunk av sig själv.
Lägg till den här raden längst ner i din Gulpfile:
gulp.task ('default', ['css', 'html', 'js']);Vi använder den här uppgiften att bygga hela vårt projekt, inklusive JavaScript, genom att det körs css, html och js uppgifter.
För att bygga hela ditt projekt med standarduppgiften, använd kommandot:
klunk
När vi kommer fram kommer vi att lägga till finjusteringen till dina Grunt and Gulp-projekt som verkligen kommer att göra dem ultimata effektiviseringsmaskiner, och det är live reloading och webbläsarsynkronisering.
Du lär dig att skapa ett kommando som startar ditt projekt på en localhost-förhandsgranskning, dvs simulera en webbhotell på din lokala dator med hjälp av en http: // protokoll istället för afil:// protokoll för att förhandsgranska din webbplats.
Och eftersom dina projektkällfiler övervakas för ändringar och automatiskt sammanställs, kommer din lokalahost-förhandsgranskning automatiskt att laddas om så att direkt efter att du har sparat dina ändringar ser du dem återspeglas i webbläsaren.
Vi ska sedan konfigurera din localhost-förhandsgranskning så att varje webbläsare du visar den kommer att synkroniseras, inklusive webbläsare på olika enheter på samma internetanslutning som tabletter och telefoner. Öppna en meny i en webbläsare, se hur den svarar i alla andra webbläsare och enheter samtidigt.
!
