Share
Când sunteți nou în dezvoltarea front-end și începeți mastering HTML5, CSS și JavaScript, următorul pas evident este de a vă pune mâna pe uneltepe care majoritatea dezvoltatorilor o folosesc pentru a rămâne sănătoși în acest spațiu complex. De asemenea, meritați să aveți mai multă flexibilitate și caracteristici în timp ce scrieți foile CSS utilizând Less. De asemenea, meritați să optimizați lățimea de bandă prin micșorarea codului JS. De asemenea, meritați să puteți verifica automat dacă codul JS este bun utilizând JSHint.
Meriți toate lucrurile bune.
Deci, începeți să utilizați manual toate aceste instrumente minunate, executați manual și mai multe linii de comandă. Uneori, uitați să rulați compilatorul Less ... Uneori uitați să rulați JSHint și un bug este expediat ...
Și dintr-o dată te afli întrebându-te: există vreo soluție pentru a automatiza toate aceste instrumente? Cum puteți crea un flux de lucru repetabil pentru a vă împiedica să faceți greșeli?
Evident, există o soluție și două instrumente în special vă așteaptă să începeți: mormăit și Înghiţitură.
Ca un începător care folosește aceste instrumente, vă întrebați cum funcționează și ce unul să utilizați, nu-i așa? Ei bine, perfect, citiți articolul potrivit!
Vă dau baza pentru utilizarea Grunt și Gulp folosind un exemplu foarte simplu pe care îl puteți descărca de la GitHub.
Este un site web simplu compus din trei fișiere:
Styles.less definește foaia CSS într-o manieră mai bogată decât este posibil utilizând un fișier CSS standard. În final, folosim compilatorul Less pentru a crea un styles.css fişier. Folosind Less, putem, de exemplu, să folosim variabilele din fișierul CSS:
Obțineți mai multe informații despre Less în acest ghid de pornire.
Codurile JavaScript și HTML sunt foarte simple. Pagina ar trebui să arate astfel:
Trebuie să înțelegeți în primul rând modul în care funcționează Node.js Package Manager (npm).
Npm este instrumentul furnizat cu Node.JS. Este folosit pentru a obține instrumente și cadre în timp ce rezolvă automat dependențele lor.
De exemplu, pentru a utiliza mai puțin și ao compila într-un fișier CSS utilitar web, trebuie mai întâi să instalați mai puțin folosind această comandă:
npm install -g mai puțin
Notă: Pentru a obține linia de comandă npm, trebuie să instalați Node.js de pe site-ul Node.
Odată ce acest lucru este făcut, puteți rula această comandă pentru a compila fișierele .less în .css:
stiluri stiri.less> stiles.css
Npm utilizează un fișier pe care îl creează și stochează în folderul local în care lucrează: package.json. Acest fișier utilizează formatul Notă de obiect JavaScript (JSON) pentru a lăsa npm să știe ce instrument și versiune este instalat și cadrele folosite de actualul proiect (care este reprezentat de dosarul curent).
Acest fișier este important pentru Grunt și Gulp, deoarece va conține lista pluginurilor care au fost descărcate și pot fi utilizate în fluxul dvs. de automatizare.
Pentru a crea un fișier package.json gol, puteți utiliza următoarea comandă npm:
npm init
Veți trece prin câteva întrebări pe care le puteți răspunde folosind opțiunea implicită, iar apoi veți fi toate setate pentru a începe.
În acest fișier veți avea două tipuri de dependențe:
În mod normal, Npm vă oferă trei moduri de instalare a pachetelor:
Accentsconagua
-g sau -global opțiune--salvați-dev opțiuneAl treilea va crea o devDependencies secțiune / proprietate din fișierul package.json.
Grunt este un pionier în zona fluxului de lucru de automatizare JavaScript. Există o mulțime de utilizatori cunoscuți, cum ar fi Twitter, jQuery și Modernizr.
Principiul de bază pentru Grunt este să ne dea o cale ușoară de a alerga sarcini. O sarcină este un set de fișiere de cod și fișiere de configurare deja create pentru dvs. Puteți obține sarcini noi prin instalarea pluginurilor Grunt pe care le veți primi folosind npm. Puteți găsi un plugin pentru aproape orice instrument pe care îl puteți utiliza, cum ar fi Less și JSHint.
Pentru a rula Grunt, trebuie să creați un Gruntfile în care să specificați sarcinile pe care doriți să le executați și configurația pentru fiecare dintre ele. Odată ce acest lucru este făcut, trebuie doar să rulați mormăit linia de comandă specificând sarcina pe care doriți să o executați (implicită sau una specifică) și o va face automat.
Acum, hai să trecem printr-un ghid pas cu pas pentru a stabili toate acestea.
Utilizați npm pentru a iniția fișierul:
npm init
Va trebui să răspundeți la câteva întrebări, cum ar fi numele proiectului și care este fișierul implicit .js. De asemenea, puteți să creați fișierul manual și să setați conținutul acestuia la:
"nume": "nume de proiect", "devDependencies": , "dependencies":
Trebuie să instalați Grunt la nivel global pentru a obține linia de comandă și pentru a inițializa la nivel local tot ceea ce este necesar pentru proiect.
Alerga:
npm install -g grunt
Apoi rulați-o local:
npm instalează grunt --save-dev
Notă: Nu uitați -dev parte pentru ca acesta să fie specificat ca fiind unul dintre devDependencies în package.json fişier.
Grunt funcționează utilizând un fișier numit gruntFile.js. Acest fișier conține tot ceea ce este necesar de către Grunt, adică:
Grunt așteaptă ca fișierul să exporte o singură funcție care are un parametru numit "grunt". Veți folosi acest obiect pentru a efectua toate acțiunile relative Grunt.
Aici este un gruntfile minimal care citește numai fișierul package.json și creează un Mod implicit sarcină care nu merge nimic.
Notă: plasați fișierul în dosarul proiectului, alături de fișierul package.json.
module.exports = function (grunt) // configurare proiect. grunt.initConfig (pkg: grunt.file.readJSON ("pachetul.json"),); // Task (e) prestabilit (e). grunt.registerTask ("implicit", []); ; Puteți executa aceasta pentru a vă asigura că totul este configurat corect.
Pentru aceasta, deschideți un prompt de comandă în dosarul proiectului și executați:
mormăit
Ar trebui să vedeți ceva de genul:
Acum că Gruntfile este gata, următorul pas este să adăugați un plugin și să-l utilizați. Toate pluginurile pot fi găsite în lista de pe site-ul Grunt. Una dintre sarcinile obișnuite efectuate într-un Gruntfile verifică dacă sintaxa JavaScript este corectă. Pentru a face acest lucru, folosim de obicei JSHint.
Să adăugăm acest lucru la fluxul de lucru.
Dacă căutați JSHint pe pagina plug-in-uri grunt, veți găsi grunt-contrib-jshint, care corespunde la ceea ce avem nevoie!
În dosarul proiectului, executați:
npm instalează grunt-contrib-jshint -save-dev
Unul este făcut, trebuie să îl adăugați în Gruntfile.js. Există doi pași simpli pentru aceasta:
Pentru a încărca pluginul, utilizați loadNpmTasks funcţie:
// Încărcați pluginul care oferă sarcina "jshint" grunt.loadNpmTasks ('grunt-contrib-jshint');Configurația se face în initConfigfuncția în care trebuie să adăugați o proprietate nouă obiectului dat în parametru. Acesta trebuie să fie numele sarcinii pe care doriți să o adăugați și este legată de pluginul pe care îl utilizați. Cea mai bună modalitate de a cunoaște acest nume și lista opțiunilor disponibile pentru sarcină este să consultați documentația pluginului. Veți găsi mereu un eșantion bine documentat.
De exemplu, în exemplul nostru vrem să verificăm toate fișierele JavaScript cu excepția gruntfile.js. De asemenea, dorim să activam un set de reguli pentru verificarea fișierelor JavaScript eqeqeq pentru a ne asigura că folosim triplu egal atunci când este necesar.
Aici este initConfig funcție modificată:
Puteți executa sarcina utilizând următoarea linie de comandă (unde specificați numele lucrării ca parametru pentru mormăit):
te rog
Rezultatul este aici:
Trebuie doar să executați acea comandă și vă va solicita automat orice erori întâmpinate.
Felicitări, acum aveți o sarcină automatizată în fluxul de lucru!
Sarcina dvs. JSHint funcționează bine, dar este puțin mai puțin în fluxul de lucru. De obicei, folosim instrumente cum ar fi Grunt pentru a executa mai multe sarcini.
Este foarte ușor să adăugați mai multe dintre ele, deoarece trebuie doar să urmați aceiași pași. Să presupunem că acum doriți să adăugați compilația pentru fișierul dvs. mai mic în cadrul procesului automatizat. Dacă căutați în pluginurile Grunt, veți găsi a mormăit-contrib-mai puțin plugin pe care îl puteți instala în dosarul proiectului:
npm instalează grunt-contrib-less -save-dev
Ca și în cazul sarcinii JSHint, trebuie să adăugați configurația:
Apoi, încărcați sarcina:
Acum puteți rula Grunt și specificați Mai puțin sarcina: aceasta va lansa doar mai puțin. E în regulă, dar vrei să conduci toate sarcinile, nu? Acesta este rolul Mod implicitsarcină.
Când fugi mormăit fără a specifica nici o sarcină, ea va căuta o Mod implicit și executați toate sarcinile specificate în matrice. Puteți să-l modificați pentru a rula Mai puțin și jshint. Rețineți că pentru a adăuga un grup de sarcini cum ar fi Mod implicit, trebuie să apelați registerTaskfuncţie:
De acum, când alergi mormăit, se va executa jshint, și apoi Mai puțin:
Puteți adăuga orice sarcină doriți și puteți specifica și alt grup de activități, cum ar fi Mod implicit și le numesc prin trecerea nume lor ca un argument la mormăit Linie de comanda.
Ușor, corect?
Acum sunteți un dezvoltator fericit. Toate sarcinile repetitive sunt automatizate într-un flux de lucru grunt și trebuie doar să rulați pentru a le executa. Dar se poate face chiar mai ușor. Se poate face automat.
Pentru a face acest lucru, puteți adăuga o anumită sarcină numită ceas. Această sarcină va inspecta în mod constant folderul de lucru și, pe baza regulilor, atunci când un fișier este modificat, grunt va rula o sarcină asociată.
Mai întâi, instalați-o ceas în dosarul proiectului:
npm instalează grunt-contrib-watch -save-dev
Încărcați-l ca toate celelalte sarcini utilizând loadNpmTasks funcția și configurați-o. Partea de configurare este puțin diferită aici, deoarece trebuie să specificați o configurație pentru fiecare activitate pe care doriți să o utilizați ceas.
Pentru mai multe informații, puteți citi documentația completă pentru această sarcină.
Când doriți să activați ceas, trebuie doar să executați următoarea comandă:
Ceasul de grunt
Și va executa sarcini de fiecare dată când un fișier este schimbat și acest fișier este în sfera de vizionare a fișierelor pentru sarcina specifică.
Si asta e! Acum știți totul pentru a crea un flux de lucru automatizat folosind funcția de grămadă.
Gulpul este o alternativă la mormânt. Este un pic mai recent și are reputația de a fi mai flexibilă decât să mănânce. Înainte de alegerea pe care o veți folosi, să aruncăm o privire la modul în care funcționează gulpul.
Gulp este un instrument de automatizare a fluxului de lucru. Ca și grunt, funcționează utilizând npm și fișierul package.json. Toate pluginurile disponibile vor fi de asemenea descărcate utilizând npm și adăugate ca devDependencies în fișierul package.json.
Una dintre principalele diferențe este că Gulp folosește fluxuri. Un flux este un set de funcții prin care un fișier va merge și va fi modificat in memoria. Fișierul va fi scris pe disc numai la sfârșitul procesului, deci este mai eficient. Sarcinile sarcinilor, pe de altă parte, lucrează ca silozuri și nu pot fi înlănțuite.
Să aruncăm o privire rapidă asupra modului în care funcționează Gulp, urmând câțiva pași simpli.
Similar cu Grunt, mai întâi trebuie să creați fișierul package.json. Puteți folosi exact aceeași tehnică ca cea folosită pentru proba de grunt.
Odată ce fișierul package.json este creat, instalați gulp global și local utilizând:
npm instalează -g gulp
și
npm instalează gulp --save-dev
Acest lucru va instala linia de comandă gulp și tot ceea ce este necesar pentru a rula un flux de lucru gulp.
Apoi, trebuie să instalați utilități gulp, care conține funcții comune împărtășite de alte pluginuri:
npm instalează gulp-util --save-dev
În cele din urmă, creați fișierul minim de gulp, care va arăta astfel:
După cum puteți vedea, este un pic diferit de sintaxa grunt. În gulp, pluginurile sunt încărcate utilizând necesita sintaxă pe care s-ar putea să o utilizați dacă sunteți dezvoltator Node.js. Este deasemenea o Mod implicit sarcină definită folosind gulp.task funcţie.
Dacă rulați înghiţiturălinie de comandă utilizând un prompt de comandă în dosarul proiectului, ar trebui să vedeți un rezultat ca acesta:
Pentru a utiliza un plugin în gulp, utilizați aceeași funcție ca cea pe care am creat-o Mod implicit sarcină. Acest lucru se datorează faptului că nu trebuie să utilizați un anumit nume pentru a crea o activitate. Doar sunați gulp.task, setați numele dorit și dați-i o funcție JavaScript ca al doilea parametru. Când gulp rulează sarcina, aceasta va executa această funcție.
Pentru a utiliza un plugin, îl apelați utilizând numele pe care l-ați ales când îl solicitați. De obicei, îl numiți ca parte a unui flux de flux care, în general, începe cu o selecție de fișiere. Acest lucru se face cu gulp.src funcţie. Acesta va selecta o grămadă de fișiere și va returna un flux care poate fi utilizat de o altă funcție utilizând țeavă. Așa puteți lărgi mai multe acțiuni fără a le scrie pe disc. Trebuie doar să treci fluxul de la un plugin la altul.
Iată un eșantion de bază pentru Less:
Mai întâi necesită ("fără gulp") pentru a încărca Mai puțin plugin pentru gulp. (Am folosit-o npm instalează gulp-less -save-dev).
Atunci gulp.src va selecta toate .Mai puțin fișiere, noi o "conducem" la Mai puțin()funcția și în cele din urmă este "pipăit" gulp.destcare indică unde să scrie rezultatul. Deoarece gulp.src poate selecta mai mult de un fișier, gulp.dest specifică un dosar.
Odată ce ați înțeles modelul de conducte, puteți obține cu ușurință același rezultat ca cel pe care l-am folosit folosind grunt.
Puterea de gulp este că puteți crea sarcini personalizate în care numiți mai mult de un plugin și unde le puteți asocia în modul dorit.
Notă: există, în mod evident, și a înghițitură-ceas plugin pe care îl puteți utiliza pentru a automatiza lansarea fluxului dvs. de lucru!
Sper că aveți acum o înțelegere mai clară a motivului pentru care aveți nevoie de un flux de lucru de automatizare și cum puteți utiliza Grunt sau Gulp pentru ao obține.
Alegerea uneia dintre ele este mai mult legată de sarcina pe care doriți să o atingeți.
Grunt este ușor de folosit. Nu trebuie să înțelegeți sistemul de conducte, iar realizarea unor sarcini simple va fi mai simplă. Este un instrument cu adevărat matur, folosit de mulți editori și dezvoltatori cunoscuți, și sunt disponibile multe pluginuri.
Acestea fiind spuse, modul în care Gulp este proiectat vă poate oferi o mulțime de flexibilitate. Acesta a existat de ceva timp și chiar dacă nu veți găsi câte pluginuri pentru Grunt, toate cele clasice sunt disponibile pentru Gulp.
Dacă utilizați un flux de lucru într-adevăr standard, cu pași obișnuiți precum JSHint, uglificarea, validarea CSS etc. Grunt este o alegere bună. Dacă vă ocupați de sarcini mai complicate, Gulp va fi un aripă bună.
Microsoft are o grămadă de învățare gratuită pe multe subiecte JavaScript open source și suntem în misiunea de a crea mult mai mult cu Microsoft Edge. Iată câteva pentru a verifica:
Și câteva instrumente gratuite pentru a începe: Visual Studio Code, Azure Trial și instrumente de testare cross-browser - toate disponibile pentru Mac, Linux sau Windows.
Acest articol face parte din seriile de tehnologie web dev din Microsoft. Suntem încântați să împărtășim Microsoft Edge și noul EdgeHTML motor de randare cu tine. Obțineți mașini virtuale gratuite sau testați de la distanță pe dispozitivele Mac, iOS, Android sau Windows @ http://dev.modern.ie/.
