Share
În tutorialul anterior am creat un proiect și am folosit Grunt pentru a viziona și pentru a compila automat Stylus și Jade. În acest tutorial vom face același lucru, dar folosind un alt task runner: Gulp.
Instalați Gulp la nivel global cu:
[sudo] npm instalați gulp -g
Ca și în cazul procesului Grunt, adăugați un fișier "package.json" la proiectul dvs. utilizând npm init comanda.
Instalați Gulp în proiectul dvs. și salvați-l ca dependență de dezvoltare cu:
npm instalează gulp --save-dev
Într-o paralelă cu "Gruntfile" de la Grunt, Gulp folosește un "Gulpfile". În dosarul rădăcină al "Proiectului Gulp" adăugați un fișier numit "gulpfile.js".
Pentru a începe, vom da accesul fișierului la pachetul "gulp" pe care tocmai l-ați instalat în dosarul "node_modules", adăugând această linie în partea de sus a fișierului Gulp:
Accentsconagua
var gulp = necesită ("gulp");Strict vorbind, Gulp nu are de fapt nevoie pentru a utiliza pluginurile Gulp pentru că poate utiliza efectiv pachetele de npm de vanilie. Cu toate acestea, există mai multe pluginuri disponibile, care sunt optimizate în mod special pentru a fi utilizate cu Gulp, iar când începeți, veți găsi mai ușor de utilizat.
Căutați pluginuri Gulp la: http://gulpjs.com/plugins/
Vom instala aceste pluginuri:
Aceste plugin-uri au aceleași roluri ca cele pe care le-am folosit cu Grunt, cu câteva diferențe.
Unul, nu avem nevoie să instalați un plugin "ceas", deoarece Gulp are un built-in.
Două, instalați pluginul "gulp-concat" pentru a trage toate fișierele împreună (concatenați-le) înainte de a minimiza întregul lot. Mulțumesc lui Dan că a arătat asta!
Notă: folosim un plugin numit "gulp-minify-css", dar are același pachet "clean-css" pe care l-ați folosit până acum.
Cu terminalul indicat la dosarul dvs. "Gulp Project" executați fiecare dintre aceste comenzi:
npm instalează gulp-stylus -save-dev
npm instalează gulp-autoprefixer -save-dev
npm instala gulp-minify-css -save-dev
npm instalează gulp-jade --save-dev
npm instalează gulp-uglify --save-dev
npm instalează gulp-concat -save-dev
Când ați terminat, ar trebui să vedeți aceste dosare în dosarul "node_modules" al proiectului:
Mai mult sau mai putin… Așa cum am făcut cu Grunt, trebuie să permitem fiecare dintre plugin-uri, de data asta în Gulpfile noastre. În locul metodei lui Grunt grunt.loadNpmTasks, vom folosi necesita funcționează la NodeJS.
Adăugați aceste linii în fișierul Gulp, sub linia pe care ați adăugat-o deja.
var stylus = necesită ("gulp-stylus"); var autoprefixer = necesită ("gulp-autoprefixer"); var minifyCSS = cere ('gulp-minify-css'); var jade = necesită ("gulp-jade"); var uglify = necesită ("gulp-uglify"); var rename = cer ("gulp-rename"); var concat = necesită ("gulp-concat");Această abordare este diferită de Grunt în sensul că nu avem încă comenzi înregistrate care pot fi executate în acest stadiu. Mai degrabă, tocmai am creat variabile JavaScript, fiecare reprezentând pluginurile noastre, pe care le putem angaja mai târziu în Gulpfile noastre.
Una dintre principalele diferențe dintre Grunt și Gulp este aceea că cu Gulp nu este nevoie să configurați individual o sarcină pentru fiecare plugin pe care îl utilizați în proiectul dvs. În schimb, configurați doar sarcini pentru reale comenzi vrei să fugi.
În Gruntfile mai devreme am setat o sarcină separată fiecare pentru Stylus, Autoprefixer și clean-css. În Gulpfile noastre nu avem nevoie să facem asta. Știm că de fiecare dată când compilam codul Stylus dorim ca CSS-ul rezultat să fie autoprefixat și minimizat, așa că vom crea o singură sarcină pentru a face toate aceste lucruri simultan.
Adăugați acest cod în partea de jos a fișierului Gulp:
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')));Să aruncăm o privire asupra a ceea ce am făcut.
Mai întâi, folosim gulp.task () pentru a defini o nouă sarcină numită css, și făcând spațiu pentru o funcție JavaScript care va fi rulată ori de câte ori executăm comanda gulp css:
gulp.task ("css", funcția () );Apoi, folosim gulp.src () pentru a seta fișierul sursă pe care dorim să-l procesăm în fișierul "source / stylus / main.styl":
gulp.task ('css', funcția () gulp.src ('source / stylus / main.styl'));Apoi începem să folosim Gulp pipe () funcția de a apela pe fiecare dintre pluginurile noastre. Modul în carepipe () lucrările sunt ca niște țevi fizice, unde se alimentează ceva în prima conductă și apoi trece prin fiecare conductă conectată.
Prima noastră "pipă" adaugă compilația Stylus, folosind același lucru comprima și căi opțiuni cum am procedat mai devreme la Grunt:
gulp.task ('css', function () gulp.src ('sursa / stylus / main.styl') .pipe (stylus (compress: false, paths: ;Apoi conectăm oa doua țeavă, care ia codul compilat și adaugă autoprefixarea:
gulp.task ('css', function () gulp.src ('sursa / stylus / main.styl') .pipe (stiluri (compress: false, paths: (autoprefixer ()));Conectăm oa treia țeavă, luând CSS-ul prefixat și curățându-l:
gulp.task ('css', function () gulp.src ('sursa / stylus / main.styl') .pipe (stiluri (compress: false, paths: (autoprefixer ()) .pipe (minifyCSS ()));În acest moment, dacă ar fi să emităm un fișier CSS, ar fi denumit "main.css" pentru a corespunde cu fișierul sursă "main.styl" de la care am început. Așa că vom conecta o a patra țeavă pentru a redenumi fișierul cu care vom ajunge la "style.css":
gulp.task ('css', function () gulp.src ('sursa / stylus / main.styl') .pipe (stiluri (compress: false, paths: (autoprefixer ()) .pipe (minifyCSS ()) .pipe (redenumiți ('style.css'));În cele din urmă, conectăm a cincea și ultima țeavă pentru a trimite fișierul nostru finalizat CSS la destinație, folosind gulp.dest () pentru a seta folderul de ieșire pentru a fi "construit".
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')));Acum css sarcina pe care tocmai ați creat-o este gata să plece. În directorul rădăcină de proiect rulați:
gulp css
... și fișierul dvs. Stylus va fi compilat, autoprefixat și curățat apoi ieșit în folderul "build" ca "style.css".
Vom folosi același proces din nou pentru a configura sarcina noastră pentru compilarea Jade. Vom crea o sarcină numită html, setați-l să utilizeze toate fișierele ".jade" din directorul "sursă / jad" ca sursă, să treacă printr-o compilație Jade, apoi să trimiteți fișierele HTML rezultate în folderul "build".
Adăugați acest cod sub css ce ați creat:
gulp.task ('html', funcția () gulp.src ('sursă / jad / *. jade') .pipe (jade ()) .pipe (gulp.dest ('build'));Rulați noua sarcină cu comanda:
gulp html
... și veți vedea fiecare dintre fișierele Jade compilate în fișierele HTML corespunzătoare din folderul "build".
Acum o să folosim încă o dată aceeași abordare, stabilind o sarcină numită js pentru a prelua fișierele jQuery și Modernizr din folderul "bower_components", uglify (concatenate și minify them), apoi scoateți codul ca fișier numit "output.min.js" în folderul "build".
gulp.task ('js', function () gulp.src (['bower_components / jquery / dist / jquery.js', 'bower_components / modernizr / modernizr.js']) .pipe (concat (' js ')) // concat trage toate fișierele împreună înainte de a le minifica. pip (uglify ()) .pipe (gulp.dest (' build ')));Notă: în acest caz, dorim să specificăm două fișiere sursă, așadar trecem cele două nume de fișiere ca matrice, adică valori separate prin virgulă între paranteze pătrate.
Rulați-vă js sarcina cu comanda
gulp js
... și veți vedea un nou fișier numit "output.min.js" care apare în folderul "build", care conține jQuery și Modernizr în formă minificată.
Acum că avem obiceiul nostru css și html configurarea sarcinilor, putem folosi Gulp în construitgulp.watch () astfel încât acestea să fie difuzate automat pentru noi.
Adăugați acest cod în partea de jos a fișierului Gulp pentru a crea un ceas sarcină:
gulp.task ('watch', function () gulp.watch ('sursa / stylus / *. style', ['css']); gulp.watch ']););Prima utilizare a gulp.watch () stabilește css sarcină care trebuie executată ori de câte ori un fișier ".styl" din interiorul directorului "sursă / stilou" este schimbat.
A doua utilizare a gulp.watch () stabilește html sarcină care trebuie executată ori de câte ori un fișier ".jade" din directorul "sursă / jad" este schimbat.
Rulați-vă ceas sarcina cu comanda
ceas de gulp
... și de fiecare dată când salvați modificările la unul dintre fișierele dvs. Stylus sau Jade, compilația dvs. va fi gestionată automat.
La fel cum am făcut și cu proiectul nostru Grunt, vom încheia creând o sarcină implicită care va rula ori de câte ori vom folosi comanda înghiţitură de la sine.
Adăugați această linie în partea de jos a fișierului Gulp:
gulp.task ("implicit", ['css', 'html', 'js']);Folosim această sarcină pentru a construi întregul nostru proiect, inclusiv JavaScript, prin rularea acestuia css, html și js sarcini.
Pentru a construi întregul proiect cu sarcina implicită, utilizați comanda:
înghiţitură
În continuare, vom adăuga o notă finală proiectelor dvs. Grunt și Gulp, care vor face efectiv mașini de ultimă generație, și anume reîncărcarea și sincronizarea browserului.
Veți învăța cum să creați o comandă care lansează proiectul dvs. pe o previzualizare localhost, adică simulând o gazdă web pe mașina dvs. locală utilizând o http: // protocol în loc de afişier:// protocol pentru a previzualiza site-ul dvs..
Și deoarece fișierele sursă de proiect sunt urmărite pentru modificări și compilate automat, previzualizarea localhost va fi automat reîncărcată, astfel încât imediat după ce salvați modificările, le veți vedea reflectate în browser.
Apoi, vom seta previzualizarea localhost astfel încât fiecare browser pe care îl vizualizați să fie sincronizat, inclusiv browserele de pe diferite dispozitive pe aceeași conexiune la internet, cum ar fi tabletele și telefoanele. Deschideți un meniu într-un singur browser, vedeți cum răspunde în același timp în fiecare browser și dispozitiv.
!
