Share
In de vorige tutorial hebben we een project opgezet en Grunt gebruikt om te kijken en automatisch Stylus en Jade te compileren. In deze tutorial doen we hetzelfde, maar gebruiken we een andere taakrunner: Gulp.
Installeer Gulp wereldwijd met:
[sudo] npm install gulp -g
Net als bij het Grunt-proces, voegt u een "package.json" -bestand toe aan uw project met behulp van de npm init commando.
Installeer Gulp in uw project en sla het op als een ontwikkelingsafhankelijkheid met:
npm install gulp --save-dev
Parallel aan Grunt's "Gruntfile" gebruikt Gulp een "Gulpfile". Voeg een bestand met de naam "gulpfile.js" toe aan de hoofdmap van uw "Gulp Project".
Om aan de slag te gaan, geven we het bestand toegang tot het "gulp" -pakket dat u zojuist in uw "node_modules" -map hebt geïnstalleerd, door deze regel toe te voegen aan de bovenkant van uw Gulpfile:
Accentsconagua
var gulp = vereisen ('gulp');Strikt genomen, Gulp eigenlijk niet nodig hebben om Gulp-plug-ins te gebruiken omdat het daadwerkelijk gebruik kan maken van vanille-npm-pakketten. Er zijn echter verschillende plug-ins beschikbaar die specifiek zijn geoptimaliseerd voor gebruik met Gulp en wanneer u begint, vindt u deze gemakkelijker te gebruiken.
Zoeken naar Gulp-plug-ins op: http://gulpjs.com/plugins/
We installeren deze plug-ins:
Deze plug-ins voeren in essentie dezelfde rollen uit als die we gebruikten met Grunt, met een paar verschillen.
Ten eerste hoeven we geen "watch" -plug-in te installeren omdat Gulp er een heeft ingebouwd.
Twee, we installeren de "gulp-concat" -plug-in om al onze bestanden samen te trekken (aaneenschakelen) voordat we het hele perceel verkleinen. Bedankt aan Dan voor het wijzen van dit!
Notitie: we gebruiken een plugin met de naam "gulp-minify-css", maar hij gebruikt hetzelfde "clean-css" -pakket dat je tot nu toe hebt gebruikt.
Plaats met uw terminal in de map "Gulp Project" elk van deze opdrachten:
npm install gulp-stylus --save-dev
npm install gulp-autoprefixer --save-dev
npm installeer gulp-minify-css --save-dev
npm install gulp-jade --save-dev
npm install gulp-uglify --save-dev
npm install gulp-concat --save-dev
Als u klaar bent, ziet u deze mappen in de map "node_modules" van uw project:
Min of meer… Net zoals we met Grunt hebben gedaan, moeten we elk van de plug-ins inschakelen, dit keer in onze Gulpfile. In plaats van de methode van Grunt grunt.loadNpmTasks, we zullen de gebruiken vereisen function native van NodeJS.
Voeg deze regels toe aan je Gulpfile, onder de regel die je al hebt toegevoegd.
var stylus = require ('gulp-stylus'); var autoprefixer = require ('gulp-autoprefixer'); var minifyCSS = require ('gulp-minify-css'); var jade = require ('gulp-jade'); var uglify = require ('gulp-uglify'); var rename = require ('gulp-rename'); var concat = require ('gulp-concat');Deze aanpak verschilt van Grunt doordat we nog geen geregistreerde opdrachten hebben die in dit stadium kunnen worden uitgevoerd. We hebben juist JavaScript-variabelen gemaakt die elk onze plug-ins vertegenwoordigen en die we later in onze Gulpfile kunnen gebruiken.
Een van de belangrijkste verschillen tussen Grunt en Gulp is dat je met Gulp niet individueel een taak hoeft te configureren voor elke plug-in die je in je project gebruikt. In plaats daarvan configureert u alleen taken voor de werkelijke commando's je wilt rennen.
In ons Gruntbestand eerder zetten we een afzonderlijke taak op voor Stylus, Autoprefixer en clean-css. In ons Gulpfile hoeven we dit niet te doen. We weten dat elke keer als we onze Stylus-code compileren, we willen dat de resulterende CSS automatisch wordt gerefixeerd en verkleind, dus in plaats daarvan maken we één taak om al deze dingen tegelijk te doen.
Voeg deze code toe aan de onderkant van uw Gulpfile:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (kompres: false, paths: ['source / stylus'])) .pipe (autoprefixer ()) .pipe (minifyCSS ()) .pipe (hernoemen ('style.css')) .pipe (gulp.dest ('build')));Laten we opsplitsen wat we hebben gedaan.
Eerst gebruiken we gulp.task () om een nieuwe taak met de naam te definiëren css, en wat ruimte te maken voor een JavaScript-functie die wordt uitgevoerd wanneer we de opdracht uitvoeren slok css:
gulp.task ('css', function () );Vervolgens gebruiken we gulp.src () om het bronbestand in te stellen dat we willen verwerken naar "source / stylus / main.styl" bestand:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl'));Daarna gebruiken we Gulp's pijp() functie om een beroep te doen op al onze plug-ins. De wegpijp() werken is als fysieke leidingen, waar je iets toevoert aan de eerste buis en het gaat dan door elke verbonden pijp.
Onze eerste "pijp" voegt een Stylus-compilatie toe, waarbij dezelfde wordt gebruikt samenpersen en paden opties zoals we deden toen we eerder met Grunt werkten:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (compress: false, paths: ['source / stylus']))) ;Vervolgens verbinden we een tweede pijp, die de gecompileerde code neemt en autoprefixing toevoegt:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (kompres: false, paths: ['source / stylus'])) .pipe (autoprefixer ()));We verbinden een derde pijp, nemen onze vooraf gedefinieerde CSS en maken deze schoon:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (kompres: false, paths: ['source / stylus'])) .pipe (autoprefixer ()) .pipe (minifyCSS ()));Op dit punt als we een CSS-bestand zouden uitvoeren, zou het "main.css" worden genoemd om overeen te komen met het bron "main.styl" -bestand waarmee we begonnen. Dus we zullen een vierde pijp verbinden om het bestand te hernoemen waarmee we eindigen met "style.css":
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (kompres: false, paths: ['source / stylus'])) .pipe (autoprefixer ()) .pipe (minifyCSS ()) .pipe (hernoemen ('style.css')));Ten slotte verbinden we onze vijfde en laatste pijp om ons voltooide CSS-bestand naar zijn bestemming te sturen, met behulp van gulp.dest () om onze output folder in te stellen als "build".
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (kompres: false, paths: ['source / stylus'])) .pipe (autoprefixer ()) .pipe (minifyCSS ()) .pipe (hernoemen ('style.css')) .pipe (gulp.dest ('build')));Nu de css taak die u zojuist hebt gemaakt, is gereed voor gebruik. Voer in de hoofdmap van uw project uit:
slok css
... en uw Stylus-bestand zal worden gecompileerd, automatisch worden gerepareerd en opgeschoond en vervolgens worden uitgevoerd naar uw map "build" als "style.css".
We zullen hetzelfde proces opnieuw gebruiken om onze taak voor Jade-compilatie in te stellen. We zullen een taak met de naam maken html, stel het in om alle ".jade" -bestanden in de map "source / jade" als bron te gebruiken, door Jade-compilatie te pipen en vervolgens het resulterende HTML-bestand (en) naar onze "build" -map te verzenden.
Voeg deze code toe onder de css taak die u zojuist hebt gemaakt:
gulp.task ('html', function () gulp.src ('source / jade / *. jade') .pipe (jade ()) .pipe (gulp.dest ('build')));Voer je nieuwe taak uit met de opdracht:
gulp html
... en u zult elk van uw Jade-bestanden in de overeenkomstige HTML-bestanden in uw map "build" laten compileren.
Nu gaan we dezelfde benadering nog een keer gebruiken en een taak opzetten met de naam js om de jQuery- en Modernizr-bestanden uit onze map "bower_components" te nemen, uglify (concatenate en minify) en voer de code vervolgens uit als een bestand met de naam "output.min.js" naar onze "build" -map.
gulp.task ('js', function () gulp.src (['bower_components / jquery / dist / jquery.js', 'bower_components / modernizr / modernizr.js']) .pipe (concat ('output.min. js ')) // concat trekt al onze bestanden samen voordat ze worden verkleind. pipe (uglify ()) .pipe (gulp.dest (' build ')));Notitie: in dit geval willen we twee bronbestanden opgeven, dus geven we de twee bestandsnamen door als een array, d.w.z. door komma's gescheiden waarden tussen vierkante haken.
Voer je uit js taak met het commando
gulp js
... en je ziet een nieuw bestand met de naam "output.min.js" verschijnen in je "build" -map, met daarin jQuery en Modernizr in verkleinde vorm.
Nu dat we onze gewoonte hebben css en html taken setup, kunnen we Gulp's in gebouwd gebruikengulp.watch () functie, zodat ze automatisch voor ons worden uitgevoerd.
Voeg deze code toe aan de onderkant van uw Gulpfile om een kijk maar taak:
gulp.task ('watch', function () gulp.watch ('source / stylus / *. styl', ['css']); gulp.watch ('source / jade / *. jade', ['html ']););Het eerste gebruik van gulp.watch () stelt de css taak wordt uitgevoerd wanneer een ".styl" -bestand in de map "source / stylus" wordt gewijzigd.
Het tweede gebruik van gulp.watch () stelt de html taak wordt uitgevoerd wanneer een ".jade" -bestand in de map "source / jade" wordt gewijzigd.
Voer je uit kijk maar taak met het commando
kloof kijken
... en telkens wanneer u wijzigingen in een van uw Stylus- of Jade-bestanden opslaat, wordt uw compilatie automatisch afgehandeld.
Net zoals we deden met ons Grunt-project, sluiten we af met het maken van een standaardtaak die wordt uitgevoerd wanneer we de opdracht gebruiken slok alleen.
Voeg deze regel toe aan de onderkant van uw Gulpfile:
gulp.task ('standaard', ['css', 'html', 'js']);We gebruiken deze taak om ons hele project, inclusief JavaScript, te bouwen door het te laten werken css, html en js taken.
Gebruik de opdracht om uw volledige project met de standaardtaak te bouwen:
slok
Komende volgende zullen we de finishing touch toevoegen aan uw Grunt en Gulp-projecten die hen echt ultieme efficiencymachines zullen maken, en dat is live herladen en browsersynchronisatie.
U leert hoe u een opdracht kunt maken die uw project start in een preview van een lokale server, d.w.z. een webhost simuleert op uw lokale computer met behulp van een http: // protocol in plaats van eenhet dossier:// protocol om een voorbeeld van uw site te bekijken.
En terwijl de bronbestanden van uw project worden gecontroleerd op wijzigingen en automatisch worden gecompileerd, wordt de preview van uw lokale host automatisch opnieuw geladen, zodat direct nadat u uw wijzigingen hebt opgeslagen, deze in de browser worden weergegeven.
We zullen dan ook uw localhost-voorbeeld instellen, zodat elke browser waarin u het bekijkt, wordt gesynchroniseerd, inclusief browsers op verschillende apparaten op dezelfde internetverbinding, zoals tablets en telefoons. Open een menu in één browser en zie hoe het tegelijkertijd reageert op elke andere browser en elk ander apparaat.
!
