Share
I den forrige opplæringen konfigurerer vi et prosjekt og brukte Grunt til å se og automatisk kompilere Stylus og Jade. I denne opplæringen gjør vi det samme, men bruker en annen oppgaveløper: Gulp.
Installer Gulp globalt med:
[sudo] npm installer gulp -g
Som med Grunt-prosessen, legg til en "package.json" -fil til prosjektet ditt ved hjelp av npm init kommando.
Installer Gulp i prosjektet ditt og lagre det som en utviklingsavhengighet med:
npm installer gulp - save-dev
I en parallell med Grunts "Gruntfile" bruker Gulp en "Gulpfile". Til rotmappen i "Gulp-prosjektet" legger du til en fil med navnet "gulpfile.js".
For å komme i gang, gir vi filtilgangen til "gulp" -pakken du nettopp har installert i mappen "node_modules", ved å legge denne linjen øverst i Gulpfile:
Accentsconagua
var gulp = krever ('gulp');Strengt tatt, Gulp egentlig ikke trenge å bruke Gulp plugins fordi det faktisk kan gjøre bruk av vanilje npm pakker. Imidlertid finnes det flere plugins som er spesielt optimalisert for bruk med Gulp, og når du starter, finner du disse enklere å bruke.
Søk etter Gulp plugins på: http://gulpjs.com/plugins/
Vi installerer disse pluginene:
Disse pluginene utfører i det vesentlige samme roller som de vi brukte med Grunt, med et par forskjeller.
En, vi trenger ikke å installere et "watch" -tillegg som Gulp har en innebygd.
To, vi installerer "gulp-concat" plugin for å trekke alle våre filer sammen (sammenkoble dem) før vi reduserer hele partiet. Takk til Dan for å peke ut dette!
Merk: Vi bruker et plugin med navnet "gulp-minify-css", men det bruker den samme "clean-css" -pakken du har brukt så langt.
Med din terminal peket på mappen "Gulp Project" kjører du alle disse kommandoene:
npm installer gulp-stylus - save-dev
npm installer gulp-autoprefixer --save-dev
npm installer gulp-minify-css - save-dev
npm installer gulp-jade - save-dev
npm installer gulp-uglify - save-dev
npm installere gulp-concat - save-dev
Når du er ferdig, bør du se disse mappene i prosjektets "node_modules" -mappe:
Mer eller mindre… Akkurat som vi gjorde med Grunt, må vi aktivere alle plugins, denne gangen i vår Gulpfile. I stedet for Grunts metode grunt.loadNpmTasks, vi skal bruke krever funksjon innfødt til NodeJS.
Legg til disse linjene i Gulpfile, under linjen du allerede har lagt til.
Var stylus = krever ('gulp-stylus'); var autoprefixer = krever ('gulp-autoprefixer'); var minifyCSS = krever ('gulp-minify-css'); var jade = krever ('gulp-jade'); var uglify = krever ('gulp-uglify'); var rename = krever ('gulp-rename'); var concat = krever ('gulp-concat');Denne tilnærmingen er forskjellig fra Grunt fordi vi ennå ikke har noen kommandoer registrert som kan kjøres på dette stadiet. I stedet har vi nettopp opprettet JavaScript-variabler, som hver representerer pluginene våre, som vi kan ansette senere i vår Gulpfile.
En av de største forskjellene mellom Grunt og Gulp er at med Gulp trenger du ikke å konfigurere en oppgave for hver plugin du bruker i prosjektet. I stedet konfigurerer du bare oppgaver for selve kommandoer du vil kjøre.
I vår Gruntfile tidligere installerer vi en separat oppgave hver for Stylus, Autoprefixer og clean-css. I vår Gulpfile trenger vi ikke å gjøre dette. Vi vet at hver gang vi kompilerer vår Stylus-kode, vil vi at CSS som blir resultert, blir autoprefixed og redusert, så i stedet lager vi en enkelt oppgave for å gjøre alle disse tingene på en gang.
Legg til denne koden nederst på Gulpfile:
gulp.task ('css', funksjon () gulp.src ('kilde / stylus / main.styl') .pipe (stylus (komprimer: falsk, stier: ['kilde / stylus'])) (autoprefixer ()). pip (minifyCSS ()). pip (rename ('style.css')). pip (gulp.dest ('build')));La oss slå ned det vi har gjort.
Først bruker vi gulp.task () å definere en ny oppgave som heter css, og gir litt plass til en JavaScript-funksjon som vil bli kjørt når vi kjører kommandoen gulp css:
gulp.task ('css', funksjon () );Deretter bruker vi gulp.src () å angi kildefilen vi vil behandle til "kilde / stylus / main.styl" -fil:
gulp.task ('css', funksjon () gulp.src ('kilde / stylus / main.styl'));Så begynner vi å bruke Gulp rør() funksjon å ringe på alle våre plugins. Veienrør() Arbeid er som fysiske rør, hvor du mate noe inn i det første røret, og det går da gjennom hvert tilkoblet rør.
Vår første "pipe" legger til Stylus-kompilering, med det samme komprimere og baner alternativer som vi gjorde da vi jobbet med Grunt tidligere:
gulp.task ('css', funksjon () gulp.src ('kilde / stylus / main.styl') .pipe (stylus (komprimer: falsk, stier: ['kilde / stylus']))) ;Vi kobler deretter et andre rør, som tar kompilert kode og legger til autoprefixing:
gulp.task ('css', funksjon () gulp.src ('kilde / stylus / main.styl') .pipe (stylus (komprimer: falsk, stier: ['kilde / stylus'])) (autoprefixer ()));Vi kobler et tredje rør, tar vår prefixed CSS og renser den:
gulp.task ('css', funksjon () gulp.src ('kilde / stylus / main.styl') .pipe (stylus (komprimer: falsk, stier: ['kilde / stylus'])) (autoprefixer ()). pip (minifyCSS ()));På dette tidspunktet hvis vi skulle sende ut en CSS-fil, ville det bli kalt "main.css" for å korrespondere med kilden "main.styl" -filen vi begynte med. Så vi kobler et fjerde rør for å gi nytt navn til filen vi skal ende med å "style.css":
gulp.task ('css', funksjon () gulp.src ('kilde / stylus / main.styl') .pipe (stylus (komprimer: falsk, stier: ['kilde / stylus'])) (autoprefixer ()). pip (minifyCSS ()). pip (rename ('style.css')));Til slutt forbinder vi vårt femte og siste rør for å sende vår ferdige CSS-fil til bestemmelsesstedet, ved bruk av gulp.dest () å sette utgangsmappen til å være "bygge".
gulp.task ('css', funksjon () gulp.src ('kilde / stylus / main.styl') .pipe (stylus (komprimer: falsk, stier: ['kilde / stylus'])) (autoprefixer ()). pip (minifyCSS ()). pip (rename ('style.css')). pip (gulp.dest ('build')));Nå css oppgaven du nettopp har opprettet er klar til å gå. I prosjektets rotasjonsmappe kjøres:
gulp css
... og din Stylus-fil blir kompilert, autoprefixed og rengjort og deretter utgitt til "build" -mappen din som "style.css".
Vi bruker den samme prosessen igjen for å sette opp vår oppgave for Jade-kompilering. Vi oppretter en oppgave som heter html, sett den til å bruke alle ".jade" -filene i "kilde / jade" -mappen som kilde, rør gjennom Jade-kompilering, og send deretter den resulterende HTML-filen (e) til vår "bygge" -mappe.
Legg til denne koden under css Oppgave du nettopp opprettet:
gulp.task ('html', funksjon () gulp.src ('kilde / jade / *. jade') .pipe (jade ()) .pipe (gulp.dest ('build')));Kjør din nye oppgave med kommandoen:
gulp html
... og du vil se hver av dine Jade-filer samlet i tilsvarende HTML-filer i mappen "build".
Nå skal vi bruke samme tilnærming en gang til, og sette opp en oppgave som heter js å ta jQuery- og Modernizr-filene fra vår "bower_components" -mappe, uglify (concatenate and minify) dem, og utdata koden som en fil med navnet "output.min.js" til vår "build" -mappe.
gulp.task ('js', funksjon () gulp.src (['bower_components / jquery / dist / jquery.js', 'bower_components / modernizr / modernizr.js']) .pipe (concat ('output.min. js ')) // concat trekker alle våre filer sammen før de minifiseres. pip (uglify ()). pip (gulp.dest (' build ')));Merk: i dette tilfellet vil vi spesifisere to kildefiler, så vi overfører de to filnavnene som en matrise, dvs. kommaseparerte verdier mellom firkantede parenteser.
Kjør din js oppgave med kommandoen
gulp js
... og du vil se en ny fil med navnet "output.min.js" vises i "build" -mappen din, som inneholder jQuery og Modernizr i minifisert form.
Nå som vi har vår skikk css og html Oppsett av oppgaver, vi kan bruke Gulp's i byggetgulp.watch () fungere slik at de automatisk kjører for oss.
Legg til denne koden nederst på Gulpfile for å opprette en se oppgave:
gulp.task ('watch', funksjon () gulp.watch ('kilde / stylus / *. styl', ['css']); gulp.watch ('kilde / jade / * .jade', ['html ']););Første bruk av gulp.watch () setter css Oppgave å bli kjørt når en ". stil" -fil i mappen "kilde / stylus" endres.
Den andre bruken av gulp.watch () setter html Oppgave å bli kjørt når en ".jade" -fil i "kilde / jade" -mappen er endret.
Kjør din se oppgave med kommandoen
gulp klokke
... og når du lagrer endringer i en av dine Stylus- eller Jade-filer, blir samlingen din håndtert automatisk.
Akkurat som vi gjorde med vårt Grunt-prosjekt, slår vi opp ved å lage en standardoppgave som vil løpe når vi bruker kommandoen gulp av seg selv.
Legg denne linjen til bunnen av din Gulpfile:
gulp.task ('standard', ['css', 'html', 'js']);Vi bruker denne oppgaven til å bygge hele vårt prosjekt, inkludert JavaScript, ved å få det til å kjøre css, html og js oppgaver.
For å bygge hele prosjektet med standardoppgave, bruk kommandoen:
gulp
Når vi kommer opp neste, legger vi til slutt på Grunt og Gulp-prosjekter som virkelig vil gjøre dem til ultimative effektivitetsmaskiner, og det er live reloading og nettlesersynkronisering.
Du lærer hvordan du lager en kommando som lanserer prosjektet ditt på en lokalhost forhåndsvisning, dvs. simulering av en webverten på din lokale maskin ved hjelp av en http: // protokoll i stedet for afil:// protokoll for å forhåndsvise nettstedet ditt.
Og ettersom prosjektkildelfilene blir overvåket for endringer og automatisk kompilert, blir forhåndsvisning av ditt lokalehost automatisk lastet opp slik at du umiddelbart etter at du lagrer endringene, vil se dem reflektert i nettleseren.
Vi vil da også sette opp forhåndsvisning av localhost slik at hver nettleser du ser på den, blir synkronisert, inkludert nettlesere på forskjellige enheter på samme internettforbindelse som tabletter og telefoner. Åpne en meny i en nettleser, se hvordan den reagerer i hver annen nettleser og enhet samtidig.
!
