Nu este un secret că un dezvoltator modern de front-end trebuie să aibă în arsenalul său unul dintre instrumentele pentru construirea de proiecte cum ar fi Gulp sau Grunt. Până la un moment dat Grunt a avut loc un monopol pe această temă, dar separat de Grunt echipa de dezvoltare a decis să creeze un ușor și rapid sarcina-manager Gulp.
În acest articol, vom pregăti un pachet de pornire de la bază pentru utilizare în proiecte viitoare.
Ce tehnologii folosim?
- Platformă software: Node.js
- Pre-procesor CSS: Stylus
- Manager de activități: Gulp
De ce managerul de task-line
Până de curând, mă întrebam de ce trebuie să-mi petrec timpul acordând configurația managerului de activități, dacă mă descurc deja bine cu aspectul layout-ului, până când am început să folosesc pre-procesoarele CSS.
Pre-procesoarele CSS sunt într-adevăr convenabile și grăbesc stilurile de scriere, dar compilarea codului scris pe un procesor pre-procesor într-un CSS normal nu este o sarcină trivială rezolvată printr-un singur buton. Aici suntem ajutați și managerul de sarcini vine. Conversia codului nu se întâmplă prin apăsarea unui buton, totul se întâmplă online fără participarea dvs. (bineînțeles, dacă totul este configurat corect).
Task managerul sarcinilor depășește limitele proceselor asociate conversiei codului pre-procesor în CSS pur. Colectorul de proiecte se ocupă și de minorizare, concatenare, verificarea codurilor pentru erori, asamblarea unei imagini în sprite, optimizarea imaginilor pentru web și așa mai departe. Pur și simplu creați în proiect o mulțime de fișiere logic separate, care sunt apoi colectate în mod convenabil într-un singur director deja procesat și gata de utilizare în browser. Dar despre acest lucru un pic mai târziu, dar acum vom începe cu pregătirea.
Instalarea Node.js
Dacă știți cum să instalați node.js pe sistemul dvs. și să îl utilizați, puteți naviga în siguranță la următoarea rubrică.
Aș dori să avertizez imediat că toate acțiunile descrise sunt relevante pentru Mac OS X. Dar, în general, acestea sunt valabile și pentru alte sisteme Unix. Dezvoltarea prin managerul de activități și linia de comandă în Windows este oarecum mai dificilă și aici nu va fi descrisă. Cu toate acestea, dacă utilizați în continuare Windows și nu sunteți gata să renunțați la aceasta, vă pot sugera utilizarea unei mașini virtuale cu Ubuntu instalată. Folosesc această opțiune pe sistemul meu de acasă, care este, în general, destul de convenabil.
Deci, în primul rând, trebuie să descărcați și să instalați pachetul node.js în sistemul nostru pentru a lucra cu nodul prin consola. Mergem la site-ul oficial node.js și descarcă cea mai recentă versiune stabilă pentru sistemul tău. După instalare, nodul de comandă trebuie să fie disponibil pe linia de comandă. Pentru a verifica funcționarea nodului dvs., introduceți următoarele în linia de comandă:
versiunea node.js. instalată ar trebui să apară ca răspuns. Dacă totul este bine, dă-i drumul.
Structura directoarelor de proiect
În proiectele noastre, vom folosi o versiune unificată a structurii:
În consola, utilizați comanda cd pentru a merge la directorul rădăcină al dezvoltării, a crea directorul pentru proiectul nostru de pornire mkdir și mergeți la el.
Să stabilim structura noastră pentru proiect prin consola:
mkdir resursă construi src src / css src / css / imagini src / css / sprite src / css / partiala src / css / furnizor src / js src / src șablon / template / include src / img src / fonturi
Creați fișiere inițiale în structura proiectului:
atingeți gulpfile.js stylus.template.mustache .gitignore src / .htaccess src / TODO src / css / styles.styl src / css / partiala / styles.styl src / css / partiala / mixins.styl src / js / main.js src / js / _main.js src / template / pages.html src / template / index.html src / template / include / header.html src / template / include / footer.html
Creați pachetul
toate întrebările de tip pop-up pot fi accesate prin Enter, nodul le stabilește la valori implicite sau completează câmpurile sugerate.
.gitignore
Spunem gita care cataloguri să ignore și să nu completeze depozitul:
Directorul node_modules va apărea mai târziu după instalarea pluginurilor și va conține toate pluginurile nodului proiectului.
src / .htaccess
Noi instalăm compresia gzip suplimentară și cache-ul pentru server:
src / css / stiles.styl
Conectați fișierele de stil utilizator la foaia de stil principală:
Rețineți că pentru a conecta fișierele .styl, extensia nu este specificată, în funcție de semantica codului pre-procesor Stylus. Pentru a conecta stilurile într-o altă extensie, de exemplu, Css, este necesară indicarea ultimei extensii.
Această pagină conține o listă de dezvoltare todo. Mai multe detalii despre lucrul cu acest fișier puteți citi pe pluginul PlainTasks pentru textul Sublime.
Aceasta completează instalarea structurii.
Instalarea plug-in-urilor prin managerul de pachete npm
Node.js include în mod implicit managerul de pachete npm. în depozitele din care au fost colectate multe plug-in-uri, cu care trebuie de asemenea să lucrăm.
Instalarea pluginului Gulp
În primul rând, trebuie să instalați Gulp la nivel global (cu opțiunea -g) pe sistemul nostru
npm instalează gulp -g
Trebuie să faceți asta o singură dată. în viitor, nu este necesară o instalare globală.
Acum trebuie să instalați local Gulp în directorul de proiect
npm instalează gulp --save-dev
Comutatorul --save-dev spune că informațiile despre plugin (numele din depozit și versiunea sa) vor fi adăugate în fișierul config.config și se vor aminti pentru acest proiect. Deoarece nu stocăm un dosar greu cu plug-inurile node_modules în gita. informațiile despre pluginurile instalate salvate în configurație vor permite doar o comandă npm i să implementeze toate plug-in-urile necesare în proiect.
Pentru fiecare comandă există abrevieri, deci comanda de mai sus poate fi scrisă într-un format mai scurt
În viitor, vom folosi și formatul de comandă abreviat.
Stylus plugin pentru Gulp
În proiectele noastre folosim Stylus-ul pre-procesor care funcționează bine și se compilează pe nod.
npm i gulp-stylus -D
Procesoare CSS de procesare
Auto-prefixer - înlocuiește automat prefixele -ms- -o- -moz- -webkit- în proprietățile necesare:
npm i gulp-autoprefixer -D
Minizare CSS - pluginul minifizează fișierul CSS de ieșire, salvând-l din spațiile și filele inutile:
npm i gulp-minify-css-D
Procesoare de procesare a imaginilor
Combinând imaginile în sprite - nu mai trebuie să petreceți ore de timp prețios, combinând toate imaginile în sprite, și apoi calculați coordonatele acestora, toate acestea pentru dvs. vor face automat acest plugin:
npm i gulp.spritesmith -D
Adăugați la stylus.template.mustache fișierul anterior creat masca de calcul a poziției în sprite:
Adăugați mixuri speciale în mixins.styl:
Conectăm mixinurile și fișierul generat cu coordonatele fișierului de stiluri principale src / css / styles.styl.
Rețineți că fișierele sprite trebuie să fie conectate la stilurile de utilizator @import 'partial / stiluri'
Optimizarea imaginilor pentru web - plugin-ul taie automat toate informațiile inutile din imaginile și să le uzhmet la dimensiunea optimă, care, în unele cazuri, se va face reducerea volumului imaginii de până la 90%:
npm și gulp-imagemin -D
Minimizarea JS - plug-in-ul maximizează codul JS prin scurtarea timpului de descărcare:
npm i gulp-uglify-D
Urmărirea erorilor JS - plug-in-ul va verifica în mod automat codul JS pentru a identifica toate neconcordanțele și a le transmite în consola:
npm i jshint gulp-jshint -D
Pluginurile HTML de procesare
Plug-in fișiere - plugin-ul vă permite să stocați părți statice ale site-ului, cum ar fi antetul. subsol. deoparte, etc. în fișiere separate și conectați-le la orice parte a altui fișier. Nu mai este nevoie, în cazul unor modificări mici în capac, să se schimbe zeci sau chiar sute de pagini html ale șablonului:
npm i gulp-rigger -D
Pluginul este, de asemenea, compatibil cu JS.
Conectăm JS personalizat la fișierul principal JS src / js / main.js cu un culler:
Vom conecta în index.html fișierele header.html și footer.html
Alte pluginuri
LiveReload - plug-in-ul elimină necesitatea reîncărcării paginii în browser de fiecare dată pentru a vedea modificările, acum se întâmplă automat la salvarea fișierului modificat:
npm și gulp-connect -D
Safe Gulp de plecare - uneori se întâmplă ca Gulp poate zbura în afara regimului de monitorizare în cazul unor erori critice (în principal din cauza JS). Acest plug-in, dacă este posibil, încearcă să mențină procesele Gulp de lucru:
npm i gulp-instalator-D
Redenumirea fișierelor este cea mai obișnuită lucrare cu numele fișierelor. Pluginul vă permite să redenumiți complet fișierele, să modificați extensia, să adăugați prefixe și postfixe, de exemplu, pentru a aduce fișierul style.styl la style.min.css.
npm i gulp-redenumiți-D
Cleaner - câteodată este nevoie să curățați complet directorul de construire. Aici ajungem la un plug-in:
Sourcemap - pentru ca fișierele dvs. să poată fi citite după depanarea de către browser, trebuie să adăugați sourcemap la fișierele minifiabile:
npm și gulp-sourcemaps -D
ceas îmbunătățită - Plugin face ceas inteligent, acum nu va suprascrie fișierele din construi atunci când schimbați doar un singur fișier este suprascrisă de modificări specifice ale fișierului, care economisește timp și resurse:
npm i gulp-watch-D
Să verificăm pachetul
După toate pluginurile instalate, consultați pachetul nostru. Ar trebui să arate ceva de genul:
În loc de cele mai recente în cazul tău, vor fi scrise versiuni specifice ale pluginurilor instalate. pentru că vom crea pachetul nostru de pornire, care va fi utilizat într-o varietate de proiecte, se recomandă, de asemenea, înlocuirea valorilor versiunii cu cele mai recente. pentru a instala întotdeauna versiunea curentă a plug-in-urilor în proiect.
În directorul proiectului, ar trebui să apară și directorul node_modules în care sunt stocate toate fișierele plug-in-nod. Sunt instalate toate plug-in-urile necesare, puteți continua configurarea configurării Gulp.
Configurarea gulpfile.js
gulpfile.js este fișierul de configurare principal al managerului nostru de activități, este în care vom stoca toate setările și comenzile.
Toate lucrările lui Gulp sunt reduse la sarcină. Sarcina este o funcție independentă separată, cu un nume. Fiecare sarcină poate fi apelată separat.
Compatibilitate cu standardele moderne
În primul rând, la începutul fișierului vom conecta modul de compatibilitate numai în conformitate cu standardele moderne:
Mai multe informații despre această directivă pot fi citite aici.
Inițializați pluginul
Plugin-urile sunt inițializate cu următoarea construcție:
var initPlugin = necesită ("plugin-name");
În conformitate cu acest design, inițializăm toate pluginurile noastre:
Constantele căii
Pentru comoditate, definim imediat toate căile și măștile:
Rețineți că putem folosi măști de nume:
- * .js - toate fișierele cu extensia js
- [^ _] *. js - toate fișierele cu extensia js, cu excepția celor care încep cu un underscore inferior
- *. * - orice fișiere cu orice extensie din directorul curent
- /**/*.html - toate fișierele cu extensia .html din directorul curent și toate directoarele de copii
Activitate (sarcini)
Acum, când toate constantele sunt scrise, puteți începe să scrieți sarcinile. Toate sarcinile au următoarea construcție:
Mini-server și LiveReload
Mai întâi de toate, vom configura serverul local și LiveReload:
Cel mai probabil, va trebui de multe ori să lucrați simultan în mai multe proiecte simultan. Serverul vă permite să lansați simultan o mulțime de servere, este suficient ca diferite proiecte să vă înregistreze portul.
Construiți sprite
Toate imaginile pentru îmbinarea în sprite sunt adăugate în directorul src / css / sprites / și după rularea prin Gulp devine o singură imagine sprite. În sprite, nu trebuie să adăugați logo-uri și fundaluri fără dimensiuni clare.
Pentru a scoate sprite este suficient să folosiți un amestec. De exemplu, pentru fișierul lorem.png, selecția din sprite va arăta astfel:
Acum, un obiect cu clasa .lorem va lua dimensiunile imaginii și imaginea în sine ca fundal.
Creați imagini statice
Imaginile statice sunt imaginile utilizate în șablonul de aspect.
Creați imagini dinamice
Imaginile dinamice sunt imagini de conținut care se vor schimba pe site și la nivel de șablon sunt conectate numai pentru demonstrație. De exemplu, ar putea fi imagini pentru știri etc.
CSS Building
O sarcină separată pentru stilurile externe:
Adăugați, de asemenea, sarcina pentru construirea generală a CSS:
Construiți fonturi
Construiți .htaccess
Construcția totală
Pentru a nu trebui să construim fiecare parte separat, vom aloca o sarcină pentru construirea generală:
Clear Build
Uneori este necesară ștergerea completă a directorului de construire. Aici va veni ajutorul nostru următorul mesaj:
Urmăriți sau monitorizați modificările în timp real
Una dintre funcțiile cele mai importante și utile ale lui Gulp este funcția de ceas. care vă permite să urmăriți în timp real toate modificările cu fișierele produse și, în funcție de acestea, să efectuați acțiuni specifice:
Acțiunile implicite
Acțiunile implicite sunt acele sarcini pe care managerul de activități le va efectua atunci când comanda gulp este introdusă în consola:
În cazul nostru, vom aduce împreună proiectul, vom porni modul de vizionare și vom porni serverul.
Comenzi pentru linia de comandă
Toate comenzile pentru gulp de linie de comandă constau din două părți: aceasta este comanda gulp în sine și un nume separat spațiu pentru sarcină. Iată lista de comenzi aplicabile pentru config-ul nostru:
- gulp - comanda principală, începe implicit
- gulp build - construiți toate
- gulp ceas - ceas
- gulp clean - curățarea directorului de construire
- gulp connect - porniți serverul
- gulp html: construiți - construiți HTML
- gulp jshint: build - verificați JS pentru erori
- gulp js: construiți - construiți JS
- spirite de gulp: construi - construi sprite
- imagine gulp: construi - construi imagini statice
- gulp imagecontent: construiți - construiți imagini dinamice
- gss CSS: construiți - construiți CSS personalizat
- gulp cssVendor: construiți - construiți CSS extern
- gulp css: construiți - construiți în comun CSS
- gulp fonts: build - build fonturi
- gtap htaccess: construiți - construiți .htaccess
În acest stadiu, configurația gulpfile.js este completă.
Copiați pachetul de pornire în proiect
În primul rând, trecem prin consolă în dosarul în care dezvoltăm, de exemplu, cd develop / example și copiați totul de la directorul pachetului de pornire la proiectul nostru cp -a
Acest mod de copiere este cel mai convenabil, pentru că copiați cu exactitate totul, inclusiv fișiere ascunse, gitignore etc.
concluzie
Folosind acest ghid, am pregătit un pachet de pornire pentru utilizarea Gulp în proiectele noastre pentru dezvoltarea Front-end.
Descărcați pachetul finit: start.zip
De asemenea, acest pachet este disponibil pe GitHub
Post Scriptum
Aproape pe fiecare site există o secțiune cu recenzii și un formular pentru scrierea lor. Necesitatea unei astfel de secțiuni este scrisă în cărți inteligente privind proiectarea resurselor de pe Internet, spunând că astfel veți primi feedback de la utilizatori. Acesta este doar acest feedback are un dezavantaj.
Aproape fiecare companie, un produs, și chiar mai mult o agenție, necesită de multe ori copywriteri. Nu contează dacă este postul de copywriter, manager de conținut, specialist PR sau simplu manager, esența este adesea una - de a scrie texte. În ciuda simplității aparente, nu toți scriu texte bine versatile.
Mulți copywriteri începători se tem să se ducă imediat la agenție. Nu sunt siguri că vor putea să facă față încărcăturii și că sunt, în general, potrivite pentru această poziție, prin urmare, la sfatul unor tovarăși de rang înalt, aceștia sunt trimiși la bursă. Simpla idee a unor astfel de schimburi se inspiră: lucrați ca freelancer, construiți un program gratuit, fără a fi legat de loc. Dar ochelarii cu trandafir cad dupa primul ordin sau exercitii matematice simple.