Share
Beneficiile programatorilor în dezvoltarea de software sunt evidente. Acestea ajută la automatizarea sarcinilor obișnuite, adesea plictisitoare și vă permit să vă concentrați pe lucruri mai importante, cum ar fi scrierea unui cod minunat. Serios, totuși, abilitatea de a automatiza sarcini cum ar fi compresia imaginilor, minificarea, testarea unității și multe altele este un economizor de timp uriaș.
Pentru mulți dezvoltatori de front-end, runner-ul pentru task-ul curent a fost Grunt, care vă permite să vă definiți sarcinile utilizând JavaScript în interiorul unui fișier numit Gruntfile.js (AKA a Gruntfile). Practic, dacă știți JavaScript, setarea unei sarcini Grunt a fost un proces destul de simplu și lățimea pluginurilor terților pentru alte instrumente precum JSHint, Sass și Uglify îl face unul dintre cele mai flexibile instrumente disponibile.
În cea mai mare parte, Grunt a fost alergătorul de selecție, dar recent, un nou unul numit Gulp.js a fost obtinerea o mulțime de atenție pentru ușurința sa de configurare și format incredibil de ușor de fișier de configurare, care îl face ușor de citit și ușor de gestionat.
În acest tutorial, vă voi arăta cum să instalați Gulp și să creați un simplu fișier de configurare pentru a vă îmbătrâni picioarele cu acest nou alergător.
Gulp.js este un runner de sarcină bazat pe noduri, la fel ca Grunt și ca atare, va trebui să aveți Node.js instalat să îl folosească. Acest lucru se poate face în mai multe moduri diferite, în special în funcție de sistemul dvs. de operare. Fiind pe OS X, am ales să folosesc nvm, scriptul minunat al lui Tim Caswell pentru gestionarea mai multor versiuni ale Node.js. De asemenea, puteți descărca binarele direct de pe site-ul Node.js. Dacă sunteți complet nou la Node.js, asigurați-vă că ați verificat seria Nettuts + la trecerea la viteză pe Node.js.
Gulp.js vine ambalat ca un modul Nod care îl face incredibil de ușor de instalat folosind npm (Node Package Manager). Pentru a instala Gulp, deschideți terminalul și introduceți următoarele:
npm instalează -g gulp
Acest lucru trage Gulp de la NPM și configurați-o la nivel global în sistemul dvs., astfel încât să puteți accesa prin intermediul liniei de comandă.
Pentru toate intențiile, Gulp.js este instalat în acest moment și sunteți pregătit să îl utilizați cu proiectele dvs..
Pentru a utiliza Gulp în proiectul dvs., există câteva lucruri cheie care trebuie făcute:
Acești pași trebuie făcuți în directorul proiectului, astfel încât pachetele și fișierele de configurare să fie disponibile pentru Gulp.
Mai întâi, permiteți instalarea dependențelor:
npm instalează -save-dev gulp gulp-util
Acum, va trebui să instalăm pluginurile Gulp care vor executa sarcinile definite în fișierul nostru de configurare. Aceste pluginuri sunt, de asemenea, module de pachete de noduri, astfel încât vom folosi NPM din nou pentru a le instala.
npm instalează -save-dev gulp-uglify gulp-concat
În cazul meu, instalez două plugin-uri care îmi permit să-mi minimizez / să comprim codul JavaScript utilizând compresorul Uglify.js și să concatenăm toate fișierele mele JavaScipt într-un singur fișier sursă.
Observați că am folosit --salvați-dev steag pentru instalarea dependențelor de tip Gulp și a pluginurilor de care am nevoie pentru proiectul meu. Acest lucru asigură că o intrare pentru fiecare dintre ele este făcută în lista mea de devende din interiorul meu package.json fișier ca acesta:
"gulp-util": "~ 2.2.13", "gulp": "~ 3.5.0", "gulp-uglify" ~ 2.1.7 "
Acest lucru asigură faptul că orice dependență a pachetelor pentru acest proiect poate fi instalată cu ușurință mai târziu utilizând npm. Dacă nu aveți a package.json fișier în proiectul dvs., tastați doar npm init la linia de comandă sau deschideți un fișier nou în editorul dvs., includeți deschiderea și închiderea bretelelor în interior și salvați-le ca "package.json". Apoi reporniți NPM comenzile listate mai sus pentru ao actualiza. Rețineți că este necesară adăugarea unor bretele curbate. În caz contrar, atunci când încercați să utilizați --salvați-dev steag, NPM va arunca o eroare spunând că nu este un fișier JSON valid.
În timp ce folosesc doar două pluginuri pentru tutorialul meu, Gulp oferă peste 200 de pluginuri pentru toate tipurile de funcționalități, inclusiv:
si multe altele.
La fel ca Grunt, Gulp are un fișier de configurare numit gulpfile.js care definește toate pluginurile necesare împreună cu sarcinile pe care le veți executa. Va trebui să creați un fișier numit în rădăcina folderului proiectului.
Sintaxa este simplă și este ușor de citit și ușor de înțeles:
Accentsconagua
var gulp = cer (gulp-uglify), concat = require ("gulp-concat"); Acest lucru îi spune lui Gulp care sunt pluginurile necesare pentru a finaliza sarcinile definite.
În continuare, trebuie să definim sarcinile care vor fi gestionate de Gulp. În cazul meu, caut să fac două lucruri:
Definirea unei sarcini este pentru toate intențiile un apel JavaScript. Folosim metoda Gulp sarcină() pentru a defini sarcina pe care dorim să o executăm:
gulp.task ('js', funcția () gulp.src ('./ js / *. js') .pipe (uglify ()) .pipe (concat ('all.js')). dest ('./ js'));); Privind la codul de mai sus, există o combinație de apeluri de metode din plugin-urile specificate după cum este necesar. Prima metodă, sarcină(), ia un nume semantic pentru sarcină (în acest caz "js") și o funcție anonimă care conține carnea reală. Să defalcăm codul:
gulp.src (“./ js / *. js')
src () vă permite să specificați unde să găsiți fișierele JavaScript pe care aș dori să le comprim și să le transform într-un flux care reprezintă o structură de fișiere care poate fi transmisă pluginurilor pentru procesare. Aceasta face parte din API-ul Streams Node.js și unul dintre motivele pentru care Gulp are capacitatea de a avea o astfel de sintaxă API concisă și concisă.
.pipe (sluți ())
pipe () metoda ia fluxul de sursă derivat din src () și o transmite către pluginul specific la care se face referire. În acest exemplu, plug-in uglify ar primi fluxul sursă.
.conducte (Concat ( 'all.js'))
Ca și uglif, pluginul concat primește fluxul sursă prin pipe () metoda și concatenates toate fișierele JavaScript într-un fișier numit "all.js"
.conducte (gulp.dest (“js ./));
În sfârșit, folosind Gulp dest () metodă, all.js este scris în dosarul meu țintă. Procesul este foarte simplu și poate fi ușor de citit.
Ultimul lucru pe care trebuie să-l facem este să actualizăm sarcina implicită Gulp pentru a executa sarcina noastră "js".
gulp.task ('default', funcția () gulp.run ('js');); Revenind la linia de comandă și introducând-o 'înghiţitură', Gulp găsește gulpfile.js fișierul, încarcă toate pluginurile și dependențele necesare, începe task-ul implicit și rulează meu 'Js' sarcină. Puteți vedea aici rezultatul final al minificării și concatenării fișierului JavaScript jQuery:
Cu un pas mai departe, Gulp oferă și o altă metodă numită ceas() care oferă un mijloc de verificare automată a unei anumite resurse pentru modificări. Acest lucru permite o mare automatizare a sarcinilor față de faptul că trebuie să introduceți manual în mod constant 'înghiţitură' la linia de comandă.
gulp.watch ('./ js / *', funcția () gulp.run ('js');); Când aceasta se execută, Gulp va continua să monitorizeze direct specificatele modificări ale fișierelor și, dacă apare o modificare, va relua funcționarea 'Js' sarcina de a minify și concatenate fișierele JavaScript. Foarte tare!
Când am auzit inițial despre Gulp, prima mea reacție a fost "Oh frate un alt instrument!". Băiatul a fost plecat. Gulp.js are cu adevărat o sintaxă convingătoare și un API care vă face să vă configurați sarcinile. În timp ce nu are lățimea pluginurilor pe care Grunt le are, depozitul de plugin-uri pare să crească într-un clip frumos, mai ales acum cu atât de mult interes pentru dezvoltatori.
Am vorbit deja cu mulți dezvoltatori care migrează în mod activ la ea, astfel încât pare a fi un moment bun pentru a intra în Gulp.js.
