Recent Înghiţitură câștigă popularitate și este de înțeles de ce. Este mai rapid, mai frumos și mai simplu decât Grunt... A trebuit adesea să lucrez cu el, dar am luat întotdeauna soluții gata făcute și nu am înțeles pe deplin cum a făcut totul. Weekendul acesta am decis să demontez și să închid această mică problemă. Despre asta vom vorbi astăzi.
Ce este Gulp?
Gulp este un instrument front-a build. Vă permite să automatizați sarcini repetitive (construirea și reducerea fișierelor CSS și JS, rularea testelor, repornirea browserului și altele). Astfel, Gulp accelerează și optimizează procesul de dezvoltare web.
Instalarea Gulp
Instalarea Gulp este destul de ușoară. Dacă ceva nu funcționează pentru tine, scrie în comentarii sau google-ți problema. Deci, pentru a instala, trebuie să faceți 3 pași:
- Instalați Gulp la nivel global
- Instalați Gulp ca devDependențe (dependențe de dezvoltare)
- Creați fișierul gulpfile.js
Primul pas este instalarea Gulp la nivel global. Deschide terminalul si scrie:
npm install --glut gulp
După aceea, trebuie să instalați Gulp ca devDependencies pentru proiectul dvs. Asigurați-vă că aveți un fișier package.json. Dacă nu este acolo, atunci creați-l scriind npm init în consolă. Acum puteți instala Gulp ca dependențe dev:
npm install --save-dev gulp
În cele din urmă, trebuie să creați un gulpfile.js la rădăcina proiectului dvs. care va conține sarcinile dvs. Ca pas intermediar, vom instala pluginul gulp-util. Pentru a arăta cum sunt instalate pluginurile:
npm install --save-dev gulp-util
Acum este momentul să scriem prima noastră problemă. Deschideți gulpfile.js pe care tocmai l-am creat și scrieți în el următoarele:
/ * Fișier: gulpfile.js * / // colectează toate pluginurile noastre var gulp = require ("gulp"), gutil = require ("gulp-util"); // creați o sarcină care va rula implicitînghiţitură. sarcină („implicit”, funcția () (return gutil. log („Gulp rulează!”)));
Și acum trebuie doar să rulăm gulp în terminal și vom vedea ceva similar cu acesta:
> gulp [12:32:08] Folosind gulpfile ~ / Projects / gulp-scotch-io / gulpfile.js [12:32:08] Pornind „implicit” ... [12:32:08] Gulp rulează! [12:32:08] S-a terminat „implicit” după 1 ms
Prezentare generală
Gulp în sine este foarte slab din punct de vedere al caracteristicilor. Dar tot ce aveți nevoie este eliminat în pluginuri separate. Ei fac minuni cu Gulp.
API-ul gulp este foarte mic și conține doar 4 funcții de ordin superior:
- gulp.task
- gulp.src
- gulp.dest
- înghiţitură.ceas
gulp.task ne definește sarcinile. Este nevoie de un nume, dependențe (matrice) și funcție (acțiuni principale) ca argumente. Este posibil să nu existe dependențe:
înghiţitură. task ("mytask", function () (// face ceva)); înghiţitură. task ("dependenttask", ["mytask"], function () ( // faceți ceva după ce „mytask” este terminat });
gulp.src indică fișierele pe care dorim să le folosim. Folosește .pipe pentru a accesa fișierele prin pluginuri.
gulp.dest indică folderul în care dorim să salvăm fișierele modificate.
gulp.src și gulp.dest sunt folosite pentru o copie simplă a fișierelor:
înghiţitură. task ("copyHtml", function () ( // copiați toate fișierele html din sursă / în public /înghiţitură. src ("sursa / *. html"). pipe (gulp. dest ("public")); ));
Gulp are un sistem de răspuns la schimbarea fișierelor încorporat (gulp.watch). Puteți utiliza această sarcină pentru a rula alte sarcini de care aveți nevoie la schimbarea fișierelor.
Doriți să obțineți mai multe puncte în Google Page Speed? Nu sunteți sigur ce este un ansamblu frontal? Atunci va fi interesant pentru tine.
Ce este Node.JS?
Node.JS este denumit în mod obișnuit „JavaScript de nord”. Această platformă vă permite să scrieți programe folosind sintaxa JavaScript.
Există implementări pentru Windows, Mac OS și Linux.
Manager de pachete inclus NPM cu care puteți instala pachete.
Ce este Gulp?
Gulp este un pachet scris în Node.JS care ajută webmasterii să construiască proiecte în stadiul de aspect.
Trebuie să utilizați linia de comandă pentru a instala Gulp.
Npm instala gulp
La sfârșitul acestui articol, există un fișier care vă va ajuta să construiți un proiect tipic.
În acest exemplu, folosind Gulp, vom face următoarele:
- Optimizați automat imaginile pentru web;
- Crearea unui fișier de stil miniat de la preprocesoare (SASS, SCSS);
- Asamblarea unui singur fișier script.
Cum construiesc front-end cu Gulp?
Pentru a înțelege cum funcționează totul, să luăm totul pas cu pas.
Structura poate fi văzută în captură de ecran.
- Dosarul Assets - pentru imagini sursă, stiluri și scripturi;
- Dosarul public - rezultatul construirii proiectului va fi localizat în acesta;
- gulpfile.js - un fișier care descrie logica colectorului;
- package.json este un fișier care conține informații despre programe și pluginuri utilizate pentru a face Gulp să funcționeze corect.
pachet.json
Conținutul fișierului:
("nume": "gulp_project", "version": "1.0.0", "description": "Exemplu", "main": "gulpfile.js", "scripts": ("test": "echo \" Eroare: nu s-a specificat nici un test \ "&& exit 1"), "author": "Dmitriy Ilichev", "license": "ISC", "devDependencies": ("gulp": "^ 3.9.0", "gulp-csso ":" ^ 1.0.0 "," gulp-concat ":" ^ 2.6.0 "," gulp-uglify ":" ^ 1.2.0 "," gulp-imagemin ":" ^ 2.3.0 "," gulp -sass ":" ^ 2.1.1 "))
Următoarele sunt clare din acest fișier:
- Numele, versiunea și descrierea proiectului Gulp_project;
- Fișierul principal este gulpfile.js;
- Autorul proiectului, licența - toate acestea nu sunt atât de importante și pur și simplu aceste câmpuri pot fi goale;
- Un punct interesant este Dependențele. Descrie dependențele.
Fișierul poate fi editat în mod obișnuit editor de text... Poate fi creat și pentru un proiect nou cu comanda npm int.
Pe baza acestui lucru, Node.JS înțelege că pentru lucru avem nevoie de:
- Gulp versiunea 3.9.0 și mai mare pentru construcție;
- Gulp-csso versiunea 1.0.0 și o versiune ulterioară - plugin pentru reducerea stilurilor (css);
- Gulp-concat versiunea 2.6.0 și mai mare - plugin pentru fuzionarea mai multor fișiere într-unul;
- Gulp-uglify versiunea 1.2.0 și o versiune ulterioară - plugin pentru minimizarea javascriptului;
- Gulp-imagemin versiunea 2.3.0 și superioară - plugin pentru optimizarea imaginii;
- Gulp-sass versiunea 2.1.1 și o versiune superioară este un plugin pentru obținerea css de la sass (scss).
Amenda! După aceea, trebuie să instalați toate acestea. Acest lucru se face din linia de comandă. Fiind în folderul cu proiectul, trebuie să rulați comanda:
Instalare NPM
Toate informațiile necesare vor fi preluate de la package.json.
După toată această magie va apărea folderul de servicii module_noduri.
gulpfile.js
Conținutul fișierului:
/ * * * Definiți variabilele * * / var gulp = require ("gulp"), // Gulp JS însuși uglify = require ("gulp-uglify"), // JS minification concat = require ("gulp-concat"), // Gulp files imagemin = require ("gulp-imagemin"), // Minify images csso = require ("gulp-csso"), // Minify CSS sass = require ("gulp-sass"); // Convertiți SASS (SCSS) în CSS / * * * Creați sarcini (sarcini) * * / // Activitate „sass”. Se execută prin comanda "gulp sass" gulp.task ("sass", function () (gulp.src ("./ assets / styles / style.scss") // fișier pe care îl procesăm.pipe (sass (). On („eroare”, sass.logError)) // convertiți sass în css .pipe (csso ()) // micșorați css obținut în pasul anterior .pipe (gulp.dest ("./ public / css /") ); // scriem rezultatul la adresa specificată)); // Sarcina „js”. Se execută prin comanda "gulp js" gulp.task ("js", function () (gulp.src (["./assets/javascripts/jquery-2.1.4.min.js", "./assets/javascripts/ bootstrap. min.js "," ./assets/javascripts/script.js "]) // fișiere pe care le procesăm.pipe (concat (" min.js ")) // lipiți toate JS .pipe (uglify ()) // micșorați „pânza de picior” rezultată .pipe (gulp.dest ("./ public / js /")) // scrieți rezultatul la adresa specificată)); // Sarcina „imagini”. Rulează prin comanda „gulp images” gulp.task („imagini”, funcția () (gulp.src (". Assets / images / ** / *") // preia orice fișiere din folder și subfolders.pipe ( imagemin ()) // optimizați imaginile pentru web.pipe (gulp.dest ("./ public / images /")) // scrieți rezultatul la adresa specificată)); // Sarcina „urmăriți”. Rulat prin comanda „gulp watch” // Monitorizează modificările fișierelor și rulează automat alte sarcini gulp.task („watch”, funcția () (// Când schimbați * fișiere .scss din folderul „stiluri” și subfolderele, rulați sass task gulp. watch ("./ assets / styles / ** / *. scss", ["sass"]); // Când schimbați fișierele * .js din folderul și subfolderele „javascripts”, rulați js task gulp .watch ("./ assets / javascripts / ** / *. js ", [" js "]); // Când schimbați orice fișier din folderul și subfolderele "imagini", rulați sarcina imagini gulp.watch (" . / assets / images / ** / * ", [" images "]);));
Caracteristica principală este în sarcină ceas... După ce l-ați lansat o dată, puteți lucra în siguranță cu sursele, iar proiectul va fi construit automat de fiecare dată când salvați fișierele editate.
Drept urmare, vom obține un șablon pregătit pentru publicare pe Internet.
Sarcinile pot fi executate separat. Drept urmare, următoarele vă așteaptă în arhivă la sfârșitul articolului:
! Notă că după despachetarea acestei arhive, mai întâi de toate, va trebui să executați comanda npm install. Acest folder conține destul de un numar mare de fișiere, iar copierea/lipirea lor de fiecare dată este o pierdere de timp.
In custodie
Există o mulțime de alte plugin-uri utile acolo. De exemplu, excelentul motor șablon Jade, care accelerează semnificativ scrierea codului html, cineva ar putea avea nevoie de MAI MIC și așa mai departe.
Exemplul prezentat este doar o platformă și un șablon de pe care puteți începe rapid și fără prea multe cunoștințe să utilizați toate aceste caracteristici minunate.
Alergătorii de sarcini și sistemele de construire accelerează mult lucrurile prin automatizarea compilării, testării și a altor sarcini de rutină. Ca în orice alt domeniu, există o concurență puternică pe această piață. Până în 2014, între ei a dominat task-runner grunt, dar mai târziu a apărut o echipă mică din proiect, care a decis să realizeze un instrument alternativ, gulp, concentrat pe construirea proiectului.
Pentru a vă ajuta să faceți alegerea corectă, ca parte a articolului, vom lua în considerare principalii manageri de sarcini:
- mormăit
și, de asemenea, vom atinge alte mijloace și metode de asamblare.
Alergând puțin înainte, să spunem că folosim gulp în WaveAccess. Implementarea instrumentului s-a dovedit a fi foarte ușoară: familia de produse JetBrains (IDEA, WebStorm, ReSharper), pe care o folosim de mulți ani, are plugin-uri grozave pentru lucrul cu gulp / grunt și npm / nodejs.
Manager de sarcini vs. Sistemul de construire a proiectelor: care este diferența?
Gestionar de sarcini- un instrument pentru automatizarea sarcinilor. În configurația alergătorului, puteți scrie numele acestor sarcini; funcția care le îndeplinește; pluginuri pentru a accelera acțiunile standard, dar sarcinile în sine pot fi arbitrare. De exemplu:
- Sarcini pentru implementare (zip al proiectului, încărcarea proiectului în server la distanta etc)
- Sarcini de construire a proiectelor (minimizare, optimizare, validare cod, etc.)
- Sarcini pentru migrarea datelor etc.
Exemple de astfel de instrumente sunt mormăitul și înghițitul.
Construiți sistemul este un instrument care rezolvă o singură sarcină tipică de construire a unui proiect într-un script java, care include:
- concatenare,
- verificarea codului pentru validitate,
- reducerea codului etc.
Astfel de instrumente includ Webpack, Broccoli, Brunch, Browserify și altele.
Toate aceste sarcini frontale pot fi efectuate automat folosind alte mijloace: de exemplu, folosind npm run, despre care vom vorbi și în articol.
Exemplu
Luați în considerare un fișier gulp pentru construirea unui proiect:
Const gulp = require (‘gulp’); const coffee = require ('gulp-coffee'); const concat = require (‘gulp-concat’); const uglify = cere ('gulp-uglify'); const imagemin = require (‘gulp-imagemin’); const sourcemaps = require (‘gulp-sourcemaps’); const del = require (‘del’); )
Dar asamblarea este un caz special al unei sarcini tipice mari. Pentru gulp, puteți scrie o altă configurație - de exemplu, pentru implementare:
Var gulp = cere („gulp”); var zip = require ("gulp-zip"); var del = require ("del"); var install = require ("gulp-install"); var runSequence = require ("run-secvență"); var awsLambda = require ("nod-aws-lambda"); gulp.task ("curat", function (cb) (del (["./ dist", "./dist.zip"], cb);)); gulp.task ("copiere", function () (return gulp.src ("index.js") .pipe (gulp.dest ("dist /"));)); gulp.task ("node-mods", function () (return gulp.src (""./ package.json") .pipe (gulp.dest ("dist /")) .pipe (instalare ((producție: true) ));)); // Curățați toate directoarele aws-sdk din node_modules. Nu "// trebuie să le încărcăm, deoarece instanța Lambda o va avea deja // disponibilă la nivel global. Gulp.task (" clean-aws-sdk ", funcție (callback) (del ([" dist / node_modules / ** / aws-sdk "], callback);)); gulp.task (" zip ", function () (return gulp.src ([" dist / ** / * ","! dist / package.json "]) .pipe (zip ("dist.zip")) .pipe (gulp.dest ("./"));)); gulp.task ("upload", function (callback) (awsLambda.deploy ("./ dist .zip ", necesită (" ./ lambda-config.js "), callback);)); gulp.task (" deploy ", funcție (callback) (return runSequence ("[" curățare "], [" copiere "] , ["node-mods"], ["clean-aws-sdk"], ["zip"], ["upload"], callback);));
O nouă sarcină poate fi descrisă ca o combinație a celor existente:
Gulp.task (‘deploy’, gulp.series (‘clean’, ‘copy’, ‘node-mods’, ‘clean-aws-sdk’, ‘zip’, ‘upload’));
Aceasta este diferența. Acum să aruncăm o privire asupra instrumentelor de bază.
gulp vs. mormăit
Deci, avem doi alergători de sarcini: gulp și grunt. Ambele folosesc node.js și npm și au sarcini folosind javascript.
La prima vedere, acestea sunt similare, dar gulp are ceva care îl face mai convenabil pentru asamblare: capacitatea de a procesa sarcini în paralel și o configurare compactă, un API laconic. Să aruncăm o privire mai atentă la modul în care funcționează.
Date în flux
Acesta este un fișier de grant care creează și procesează CSS.
Din acesta puteți vedea acel mormăit atunci când începeți fiecare proces:
deschide un fișier;
începe un proces;
salvează modificările;
închide fișierul procesat pentru a împiedica următorul proces să interfereze cu acesta;
scrie fișierul în folderul rezultat.
Adică, lanțul include crearea mai multor foldere temporare și stocarea fișierelor intermediare:
Pluginurile sunt scrise de diferiți autori. Pentru ca fiecare plugin să poată lucra cu fișiere, ocolind salvarea, fișierele trebuie reprezentate ca obiecte. În gulp, această sarcină este îndeplinită de un virtual Sistemul de fișiere Vynyl-FS. Și gulp trece imediat fișierul la următorul proces fără a crea fișiere temporare și fără a salva pe disc.
Aceeași configurație pentru gulp este mai compactă:
Mecanismul său general de funcționare este fluxul de fișiere fără a scrie pe disc:
Secvența sarcinilor
Există o altă diferență: gulp execută sarcini în mod implicit asincron. Acest lucru are atât avantaje, cât și contra. În același fișier de configurare, instruim să citim fișierele din directorul dev / * scss și să le trimitem la SASS.
Fluxurile trimit rezultatul la .pipe. Metoda .pipe vă permite să colectați rezultatul într-un buffer în părți, iar când acesta este plin, trimiteți imediat informații către un flux pentru citire, fără a fi terminat de primit conținutul directorului.
Execuția secvențială a sarcinilor face ca gulp-ul să fie rapid și puternic, dar uneori devine necesară executarea sarcinilor în mod sincron, ca în grunt. Problema poate fi rezolvată printr-un apel invers, returnarea unui flux sau o promisiune. Sarcina este analizată mai detaliat pe Habré. Există, de asemenea, o opțiune alternativă pe site-ul npm.js în sine
Dacă utilizați grunt, dar sunteți atras de fluxul de date, același modul Vynyl-FS poate fi utilizat pentru a-l implementa în grunt.
API-ul laconic gulp are doar 5 metode:
Sarcină (nume, fn). Înregistrează o funcție cu un nume. Puteți specifica o dependență de alte sarcini dacă trebuie să le efectuați mai întâi.
Rulați (sarcini...). Efectuează sarcini.
Ceas (glob, fn). Execută o funcție dacă fișierul în locul globului se modifică.
Src (glob). Ia o mască de fișier ca parametru și returnează un flux reprezentând acele fișiere. Fluxul poate fi apoi transmis către pluginuri ca intrare.
Dest (folder). Salvează fișierele în folderul specificat.
Aș dori în special să remarc prezența .watch () în API-ul „nativ” al proiectului, deoarece urmărirea modificărilor constante ale fișierelor este cea mai importantă componentă a ansamblului. Concizia API-ului permite acestui manager de sarcini să se concentreze pe principalele sale proiecte de construire a sarcinilor.
Alternative la înghițire și la mormăit
În ciuda popularității gulp (mai mult de 130 de descărcări pe zi) și grunt (mai mult de 86 de descărcări pe zi conform npmjs.com), dezvoltatorii își văd dezavantajele în aceste sisteme: de exemplu, dependență de pluginuri, documentație incompletă, depanare incomodă. Alternativ, luați în considerare sistemele de construire a proiectelor (cum ar fi Broccoli și Webpack) sau scripturile npm.
Sisteme de construire a proiectelor
Să luăm în considerare mai multe soluții alternative pe platforma Node.js. Pentru a construi un proiect, ei pot înlocui gulp și grunt.
Acest sistem, la fel ca gulp, a apărut ca un concurent al gruntului alergătorului de sarcini, dar dezvoltatorii l-au conceput inițial ca un asistent de construcție cu toate avantajele și dezavantajele. Va „înțelege” fără setări că * .js este un fișier cu scripturi, * .coffee este CoffeeScript; configurația sa este mai compactă. Cu toate acestea, el nu va putea efectua nicio acțiune arbitrară în etapa de asamblare.
Iată fișierul de configurare Brunch. Este scris în CoffeeScript (puteți scrie și în JS):
Exports.config = files: javascripts: joinTo: "javascripts / app.js": / ^ app / "javascripts / vendor.js": / ^ (bower_components | vendor) / stylesheets: joinTo: "stylesheets / app.css" order : după: ["vendor / styles / helpers.css"] șabloane: joinTo: "javascripts / app.js"
Aici aș dori să fiu atent la operatorii joinTo și comandă. La nivel de configurare, Brunch înțelege că va trebui să colecteze fișierele în ordinea corectă. Ca urmare, configul durează 20-30 de linii.
Brocoli
Un instrument independent în curs de dezvoltare. Dezvoltatorii săi au vrut să creeze competiție pentru gulp.
În comparație cu înghițirea, instrumentul Broccoli folosește diferite principii:
Accelerarea asamblării. Fiecare plugin implementează stocarea intermediară în cache a rezultatelor compilării în loc de reconstruirea parțială a fișierelor de care aveți nevoie.
Copaci în loc de fișiere. Gulp este cel mai bun la transformarea unui fișier într-un singur fișier final. Broccolli folosește în mod implicit numai copaci, nu fișiere și le transformă în alți copaci (degenerează dintr-un vârf).
În acest moment, instrumentul se dezvoltă activ, apar noi pluginuri, dar este prea devreme să-l folosim pentru proiecte serioase: încă nu există suficiente pluginuri.
Webpack este un sistem de construcție modular flexibil. Are o sintaxă neobișnuită, dar acceptă în sine orice sintaxă a modulelor.
Dându-și seama că vor trebui să concureze cu giganți precum gulp, creatorii au decis să ne ușureze viața atunci când dezvoltăm proiecte mari. Și adăugat la utilitate:
Abilitatea de a construi automat un arbore de dependențe și resurse.
Mijloace convenabile pentru implementarea încărcării dinamice.
Compatibil cu aproape orice module (AMD, UMD, ES 2015, Common JS, module terțe bazate pe acestea).
Compatibil cu preprocesoarele (SASS, Babel, Coffee Script, Type Script etc.).
Live Reload (tehnologie de încărcare asincronă, în care browserul reîmprospătează nu pagini întregi, ci aplicații individuale).
Abilitatea de a împărți codul și de a genera mai multe fișiere bundle, evitând crearea unui singur bundle.js greu.
Capacitatea de a optimiza codul.
Separat, se poate observa o abordare flexibilă a dependențelor. Un modul poate fi fișier JS, CSS și HTML și chiar JPEG cu PNG. Puteți folosi require (“myJSfile.js”) și require (“myCSSfile.css”), partajați și reutiliza părți ale artefactului.
Mai multe detalii despre caracteristici, configurarea instrumentului, pluginuri pot fi găsite pe Github, într-o prezentare cu Fronttalks: Deep Dive into Webpack.
scripturi npm
Sarcinile de compilare pot fi rezolvate și folosind scripturi npm. Mulți sunt speriați de această idee: puține caracteristici, scripturile nu sunt suficient de rapide în comparație cu gulp sau Webpack. Cu toate acestea, aceste dezavantaje sunt exagerate.
Posibilități de scripturi npm
Scripturile NPM fac multe lucruri. Deci, de exemplu, puteți implementa scripturi hook:
("nume": "npm-scripts-example", "version": "1.0.0", "description": "npm scripts example", "scripts": ("prebuild": "echo I run before the build script "," build ":" cross-env NODE_ENV = producție webpack "" postbuild ":" ecou am rulat după scriptul de compilare "))
Scripturile vor fi încărcate în ordine în funcție de prefixe: prebuild, de exemplu, începe înainte de build, deoarece este prefixat cu pre. În consecință, postbuild va fi încărcat ultima. Comanda npm run build le va rula în ordinea corectă.
Puteți apela un script din altul pentru a descompune sarcini provocatoare... De exemplu, aici sarcina de preconstrucție numește sarcina curată.
("nume": "npm-scripts-example", "version": "1.0.0", "description": "npm scripts example", "scripts": ("clean": "rimraf ./dist && mkdir dist "," prebuild ":" npm run clean "," build ":" cross-env NODE_ENV = webpack de producție "))
Dacă sarcina devine prea complexă, puteți apela oricând un fișier separat:
("nume": "npm-scripts-example", "versiune": "1.0.0", "description": "exemplu de scripturi npm", "scripts": ("build": "node build.js"))
Streamingul face ca gulp să fie mult mai convenabil pentru sarcinile de construcție decât mormăitul. Dar poate fi implementat și prin npm. Pe Windows și Unix, streamingul se face implicit, fără a salva fișiere intermediare.
De exemplu, pe Unix, puteți grep conținutul unui fișier și îl puteți direcționa către un fișier nou:
Grep „Numele meu” bigFile.txt> linesThatHaveMyName.txt
Redirecționarea (>) direcționează liniile dorite către fișierul final. Sarcina este executată fără salvarea fișierelor intermediare.
Dar există și dezavantaje: nu puteți lăsa comentarii în package.json. Soluția poate fi crearea de scripturi scurte cu nume clare, care vizează o singură sarcină mică. Mai detaliat, problema înlocuirii task-runner-urilor cu scripturi npm este bine acoperită în articolul în limba engleză Why I Left Gulp and Grunt for npm Scripts.
Rezultat
Există o mulțime de concurență pe piață pentru instrumente pentru automatizarea sarcinilor de rutină (de exemplu, gulp și grunt), precum și instrumente pentru automatizarea proiectelor (Webpack, Broccoli, Medusa, Browserify etc.).
Dacă te uiți la task runners, gulp este mai simplu, mai ușor de înțeles și mai eficient decât grunt: beneficiază de economisirea operațiunilor pe disc. Dar grunt are mai multe pluginuri (de exemplu, există un plugin pentru testare). Din această cauză, are o mulțime de fani.
Dacă vorbim doar despre asamblare, atunci gulp are toate avantajele față de grunt:
O arhitectură de streaming pentru transferuri de fișiere în lanț furnizate de modulul Vynyl-FS.
Implicit este executarea sarcinilor asincron.
API concis cu doar 5 funcții.
În același timp, Webpack este un instrument la fel de interesant pentru construcție. Dispune de tehnologia Live Reload pentru a accelera reîmprospătarea browserului. Acesta este un plus uriaș: tehnologia economisește timp la apăsarea butonului de reîmprospătare pe care dezvoltatorii trebuie să îl apese constant. Gulp are, de asemenea, Live Reload, dar Webpack este dificil de comparat cu gulp sau grunt, deoarece este „ascuțit” doar pentru build și nu poate „rezolva” sarcini arbitrare.
Toate aceste soluții se integrează perfect cu familia de produse de la JetBrains, totuși, noi, cei de la WaveAccess, am preferat grintul pentru oportunitățile largi atât pentru designerii de layout, cât și pentru specialiștii front-end.
Dacă aveți întrebări și trebuie să dezvoltați un proiect web, scrieți-ne la [e-mail protejat]
- În față
- Grunt
- Înghiţitură
- alergători de sarcini
În acest articol, vom analiza în detaliu procesul de construire a unui proiect frontend, care a prins rădăcini în munca mea de zi cu zi și a facilitat foarte mult rutina.
Articolul nu pretinde a fi adevărul suprem, deoarece astăzi există un număr mare de asamblatori și abordări diferite de asamblare, iar toată lumea alege să guste. Voi împărtăși doar gândurile mele cu privire la acest subiect și vă voi arăta fluxul de lucru.
Vom folosi colectorul Gulp. În consecință, trebuie să aveți Node js instalat pe sistemul dvs. De atunci nu vom lua în considerare instalarea unui nod pentru o anumită platformă este căutat în Google în câteva minute.
Și mai întâi, voi răspunde la întrebarea - de ce Gulp?
Dintre alternativele mai mult sau mai puțin suportabile, avem Grunt și Brunch.
Când am început să mă implic în compilatoare, atât Grunt, cât și Gulp erau deja pe piață. Primul a apărut mai devreme și, prin urmare, are o comunitate mai mare și o varietate de pluginuri. Conform npm:
Grunt - 11171 pachete
Gulp - pachet 4371
Dar Grunt mi s-a părut excesiv de pronunțat. Și după ce am citit câteva articole de comparație, am preferat Gulp pentru simplitatea și claritatea sa.
Brunch-ul este un proiect relativ tânăr, cu toate avantajele și dezavantajele care decurg din acesta. Îl urmăresc cu interes, dar nu l-am folosit încă în munca mea.
Să începem:
Să creăm un folder pentru proiectul nostru, de exemplu „habr”. Să-l deschidem în consolă și să executăm comanda
Npm init
Puteți apăsa Enter pentru toate întrebările instalatorului. acum nu mai contează.
Ca urmare, un fișier package.json va fi generat în folderul cu proiectul, aproximativ următorul conținut
("nume": "habr", "versiunea": "1.0.0", "descriere": "", "principal": "index.js", "scripturi": ("test": "eco" Eroare: nu s-a specificat niciun test "&& exit 1"), "author": "", "license": "ISC")
Să îl modificăm puțin pentru a se potrivi nevoilor noastre:
("nume": "habr", "versiunea": "1.0.0", "descriere": "", "autor": "", "licență": "ISC", "devDependencies": ("gulp": "^ 3.8.1"))
în blocul devDependencies, am indicat că avem nevoie de gulp și ne vom înregistra imediat toate pluginurile.
Pluginuri:
Cu stilurile, fac același lucru ca și cu js, dar în loc de rigger "a - folosesc importul SCSS încorporat.
Main.scss-ul nostru va arăta astfel:
/ * * Terță parte * / @import "CSS: ../../ bower_components / normalize.css / normalize.css"; / * * Personalizat * / @import "parțiale / aplicație";
În acest fel, puteți gestiona cu ușurință ordinea în care sunt incluse stilurile.
Să verificăm sarcina noastră executând
Stilul Gulp: construi
Colectarea pozelor
Sarcina de imagine va arăta astfel:
Gulp.task ("imagine: build", function () (gulp.src (path.src.img) // Selectați imaginile noastre.pipe (imagemin ((// Comprimați-le progresiv: true, svgoPlugins: [(removeViewBox: false)) )], utilizați :, interlaced: true))) .pipe (gulp.dest (path.build.img)) // Și aruncați-l în build .pipe (connect.reload ());));
Folosesc setările implicite pentru imagine, cu excepția celor întrețesate. Puteți citi mai multe despre API-ul acestui plugin.
Acum, dacă punem o imagine în src / img și executăm comanda
Gulp image: build
apoi vom vedea imaginea noastră optimizată în construcție. De asemenea, gulp va scrie cu amabilitate în consolă cât spațiu a economisit pentru utilizatorii site-ului nostru :)
Fonturi
Cu fonturi, de obicei nu am nevoie să efectuez nicio manipulare, dar pentru a nu rupe paradigma „Lucrăm în src / și construim în build /” - copiez doar fișierele din src / fonts și le lip în build / fonturi. Aici este sarcina
Gulp.task ("fonturi: build", function () (gulp.src (path.src.fonts) .pipe (gulp.dest (path.build.fonts))));
Acum să definim o sarcină numită „build”, care va rula tot ce am făcut aici.
Gulp.task ("build", ["html: build", "js: build", "style: build", "fonts: build", "image: build"]);
Schimbări de fișiere
Pentru a nu urca în consolă tot timpul, să cerem gulp să ruleze sarcina dorită de fiecare dată când se modifică un fișier. Pentru a face acest lucru, scrieți următoarea sarcină:
Gulp.task ("watch", function () (watch (, function (eveniment, cb)) (gulp.start ("html: build");)); watch (, function (eveniment, cb) (gulp.start ( „style: build”);)); ceas (, funcția (eveniment, cb) (gulp.start ("js: build");)); ceas (, funcție (eveniment, cb) (gulp.start ("imagine : build ");)); watch (, function (event, cb) (gulp.start (" fonts: build ");));));
Înțelegem că nu ar trebui să existe probleme. Urmărim doar căile definite în variabila cale și, în funcția numită atunci când fișierul se schimbă, cerem să executăm sarcina de care avem nevoie.
Încercați să rulați în consolă
ceas Gulp
și modificați diferite fișiere.
Ei bine, nu-i tare?)
Server web
Pentru a ne bucura de miracolul livereload - trebuie să ne creăm un server web local. Pentru a face acest lucru, vom scrie următoarea sarcină:
Gulp.task ("server web", funcție () (connect.server ((gazdă: server.gazdă, port: server.port, livereload: adevărat));));
Nici măcar nu este nimic de comentat. Vom porni serverul cu livereload pe gazdă și portul pe care le-am definit în obiectul server.
Curățare
Dacă adăugați orice imagine, rulați imaginea: construiți sarcina și apoi ștergeți imaginea - aceasta va rămâne în folderul de construire. Deci, ar fi convenabil să îl curățați periodic. Să creăm o sarcină simplă pentru aceasta.
Gulp.task ("curat", function (cb) (rimraf (path.clean, cb);));
Acum, când executați comanda
Gulp curat
va șterge doar folderul de compilare.
Și în cele din urmă, un pic de grație
Această sarcină nu are funcționalitate critică, dar îmi place foarte mult :)
Gulp.task ("openbrowser", function () (opn ("http: //" + server.host + ":" + server.port + "/ build");));
Când vom avea nevoie, îl vom lansa - și o filă cu proiectul nostru se va deschide automat în browserul nostru.
Misto :)
Acord final
Ultimul lucru pe care trebuie să-l facem este să definim o sarcină implicită care va rula întreaga noastră versiune.
Gulp.task ("implicit", ["build", "server web", "watch", "openbrowser"]);
Ultimul dvs. gulpfile.js va arăta cam așa.
Acum să executăm în consolă
Și voila :) Blank-ul pentru proiectul tău este gata și te așteaptă.
Câteva cuvinte în concluzie
Acest articol a fost conceput ca o modalitate de a analiza încă o dată complexitățile proiectelor frontend de construire și de a transfera cu ușurință această experiență noilor dezvoltatori. Nu trebuie să utilizați această opțiune de construire pentru proiectele dvs. Există yeoman.io unde puteți găsi generatoare pentru aproape orice nevoie.
Am scris acest colecționar din două motive.
- Îmi place să folosesc rigger în mine cod html
- În aproape toate ansamblurile pe care le-am întâlnit, este utilizat un folder temporar (de obicei .tmp /), pentru înregistrare rezultate intermediare asamblare. Nu-mi place această abordare și am vrut să scap de folderele temporare.
- Și aș vrea să am totul scoase din cutie :)
Puteți descărca versiunea mea de lucru a colecționarului pe github.
Sper ca articolul ti-a fost de ajutor :)
P.S. despre toate greșelile, neajunsurile și blocajele - vă rugăm să scrieți într-un document personal
Trusa dezvoltatorului front-end pentru gentleman
Nu este un secret faptul că un dezvoltator front-end modern trebuie să aibă unul dintre instrumentele de asamblare a proiectului în armamentul său, cum ar fi Înghiţitură sau Grunt... Până la un timp, Grunt deținea monopolul asupra acestei probleme, dar un grup de dezvoltatori care s-au despărțit de Grunt au decis să își creeze propriul manager de sarcini ușor și rapid Gulp.
În acest articol, vom pregăti un pachet de start de la zero pentru a fi utilizat în proiecte viitoare.
Ce tehnologii folosim
- Platforma software: Node.js
- Pre-procesor CSS: Stylus
- Gestionar de sarcini: Înghiţitură
De ce un frontend are nevoie de un manager de sarcini
Până de curând, mă întrebam și eu de ce trebuie să petrec timp instalând configurația managerului de activități, dacă fac deja o treabă bună cu aspectul, până când am început să folosesc preprocesoarele CSS.
Pre-procesoarele CSS sunt foarte convenabile și accelerează scrierea stilurilor, dar compilarea codului scris pe pre-procesor în CSS obișnuit nu este o sarcină complet banală care poate fi rezolvată cu un singur buton. Aici ne vine în ajutor managerul de sarcini. Conversia codului nu are loc prin simpla apăsare a unui buton, totul se întâmplă online fără participarea dvs. (desigur, dacă totul este configurat corect).
Desigur, sarcinile managerului de sarcini depășesc cu mult procesele asociate cu convertirea codului pre-procesor în CSS pur. Creatorul de proiecte se ocupă și de minificare, concatenare, verificarea codului pentru erori, asamblarea imaginilor în sprite, optimizarea imaginilor pentru web etc. Pur și simplu creați un set de fișiere separate logic în proiectul dvs., care sunt apoi colectate convenabil într-un singur director, deja procesat și gata de lucru în browser. Dar mai multe despre asta mai târziu, și acum să începem cu pregătirea.
Instalarea Node.js
Dacă știți cum să instalați node.js pe sistemul dvs. și să îl utilizați, nu ezitați să treceți la următorul titlu.
Aș dori să vă avertizez imediat că toate acțiunile descrise sunt relevante pentru Mac OS X dar aplicabil în general altora Unix sisteme. Dezvoltare prin manager de sarcini și linie de comandă în Windows ceva mai dificil și nu va fi descris aici. Cu toate acestea, dacă încă utilizați Windows și nu sunteți pregătit să îl abandonați, atunci vă pot sugera un caz de utilizare mașină virtuală cu stabilit Ubuntu, folosesc această opțiune pe sistemul meu de acasă, ceea ce este destul de convenabil în general.
Deci, în primul rând, trebuie să descarcăm și să instalăm pachetul node.js pe sistemul nostru pentru a lucra cu nodul prin consolă. Accesați site-ul oficial node.js și descărcați cea mai recentă versiune stabilă pentru sistemul dvs. Odată instalată, comanda nod trebuie să fie disponibilă pe linia de comandă. Pentru a verifica dacă nodul dvs. funcționează, introduceți comanda în linia de comandă
ca răspuns, ar trebui să apară versiunea instalată a node.js. Dacă totul este bine, mergeți mai departe.
Structura directorului de proiect
În proiectele noastre, vom folosi o versiune unificată a structurii:
Dezvolta - directorul rădăcină de dezvoltare└─începeți - directorul proiectului├─ construiește - construi asamblate de task manager├─resursă - toate fișierele sursă pentru dezvoltare (.psd, etc.)├─src - director de dezvoltare│├─css - director de dezvoltare a stilului││├─imagini - toate imaginile statice││├─sprite - imaginea colectată în sprite││├─parțial - fișiere personalizate stiluri│││├─mixine.stil - mixuri personalizate│││└─styles.styl - stiluri personalizate││├─vânzător - alții fișiere externe stiluri││└─stiluri.stil - fișier de stil principal│├─fonturi - directorul fonturilor│├─img - catalog imagini dinamice │├─js - Director de dezvoltare JavaScript││├─ _ *. Js - fișiere laterale js││├─_main.js - js personalizat de bază││└─main.js - fișierul js principal│├─.htaccess - configurare pentru server│├─ * .html - fișiere de marcare a paginii│├─pages.html - un fișier cu link-uri către toate paginile șablonului│├─index.html - fișier de marcare a paginii index│└─include - directorul fișierelor de marcare incluse│ └─ * .html - includeți fișiere de markup (header.html etc.)├─package.json - configurare manager de pachete npm├─gulpfile.js - Gulp config├─stylus.template.mustache - mască pentru citirea spritelor├─TODO - foaie de lucru└─.gitignore - config pentru Git
Instalare
În consolă, folosind comanda cd, accesați directorul rădăcină de dezvoltare, creați un director pentru proiectul nostru de pornire mkdir și accesați-l.
Să configurăm structura noastră pentru proiect prin intermediul consolei:
mkdir build resource src src / css src / css / imagini src / css / sprites src / css / parțial src / css / furnizor src / js src / șablon src / șablon / include src / img src / fonturi
Să creăm 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 / partial / styles.styl src / css / partial / 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
Să creăm package.json
toate întrebările pop-up pot fi făcute clic prin Enter, nodul își va seta valorile implicite sau va completa câmpurile propuse.
.gitignore
Îi spunem gita ce directoare să ignore și să nu încarce în depozit:
/ node_modules / / build / / resource /
Directorul node_modules va apărea mai târziu după instalarea pluginurilor și va conține toate pluginurile de nod ale proiectului.
src / .htaccess
Instalați compresie gzip suplimentară și cache pentru server:
AddOutputFilterByType DEFLATE text / html text / plain text / xml text / css text / javascript application / javascript
src / css / styles.styl
Să includem fișiere de stil personalizate în fișierul de stil principal:
@import „parțial / stiluri”
Rețineți că pentru fișierele .styl, extensia nu este specificată, în conformitate cu semantica codului pre-procesor Stylus. Pentru a include stiluri într-o altă extensie, de exemplu css, este necesară ultima.
A FACE
Această pagină conține o fișă de dezvoltare. Puteți citi mai multe despre lucrul cu acest fișier pe pagina plugin-ul PlainTasks pentru Sublime Text.
Aceasta finalizează instalarea structurii.
Instalarea pluginurilor prin managerul de pachete npm
Node.js include în mod implicit managerul de pachete npm, care are o mulțime de pluginuri în depozitele sale cu care trebuie să lucrăm.
Instalarea pluginului Gulp
În primul rând, trebuie să instalăm Gulp la nivel global (cu cheia -g) în sistemul nostru.
npm instalați gulp -g
Trebuie să faci asta o dată., nu este necesară o instalare globală suplimentară.
Acum trebuie să instalați Gulp local în directorul de proiect
npm install gulp --save-dev
Comutatorul --save-dev spune că informațiile despre plugin (numele din depozit și versiunea acestuia) vor fi adăugate la configurația package.json și le vor aminti pentru acest proiect. Deoarece nu stocăm folderul greoi cu pluginuri node_modules în gita, informațiile despre pluginurile instalate salvate în config vor permite doar unei comenzi npm i să implementeze toate pluginurile necesare în proiect.
Există abrevieri pentru fiecare comandă, deci putem scrie comanda de mai sus într-un format mai scurt
În viitor, vom folosi și formatul de comandă prescurtat.
Plugin pentru stylus pentru Gulp
În proiectele noastre, folosim pre-procesorul Stylus, care funcționează excelent și se compilează pe nod.
Instalare:
npm i gulp-stylus -D
Plugin-uri CSS
Prefixer automat- înlocuiește automat prefixele -ms- -o- -moz- -webkit- în proprietățile necesare:
npm i gulp-autoprefixer -D
Minificare CSS- pluginul minimizează fișierul CSS de ieșire, eliminând spațiile și file-urile inutile:
npm i gulp-minify-css -D
Pluginuri de procesare a imaginilor
Combinarea imaginilor în sprite-uri- nu mai trebuie să petreceți ore prețioase combinând toate imaginile în sprite și apoi calculând coordonatele acestora, acest plugin va face automat toate acestea pentru dvs.:
npm i gulp.spritesmith -D
Adăugați o mască pentru calcularea pozițiilor în sprite în fișierul creat anterior stylus.template.mustache:
((#articole)) $ ((nume)) = ((px.x)) ((px.y)) ((px.offset_x)) ((px.offset_y)) ((px.width)) (( px.height)) ((px.total_width)) ((px.total_height)) "(((escaped_image)))"; ((/ articole))
Să adăugăm mixins personalizate la mixins.styl:
Lățime Sprite ($ sprite) lățime $ sprite sprite Înălțime ($ sprite) înălțime $ sprite sprite Poziție ($ sprite) fundal-poziție $ sprite $ sprite sprite Imagine ($ sprite) fundal imagine url ($ sprite) sprite ($ sprite) dacă! Match ( "hover", selector ()) &&! match ("active", selector ()) spriteImage ($ sprite) spritePosition ($ sprite) spriteWidth ($ sprite) spriteHeight ($ sprite)
Să conectăm mixinele și fișierul generat cu coordonate la foaia principală de stil src / css / styles.styl:
@import "partial / sprite" @import "partial / mixins"
Rețineți că fișierele sprite trebuie incluse înainte de stilurile personalizate @import "partial / styles"
Optimizarea imaginilor pentru web- pluginul va tăia automat toate informațiile inutile din imaginile dvs. și le va comprima la dimensiunea optimă, ceea ce va permite, în unele cazuri, reducerea volumului de imagini cu până la 90%:
npm i gulp-imagemin -D
Pluginuri de procesare JavaScript
Minificare JS- pluginul minimizează codul JS cât mai mult posibil, reducându-i timpul de încărcare:
npm i gulp-uglif -D
Urmărirea erorilor JS- pluginul vă va verifica cu atenție codul JS pentru a identifica toate neconcordanțele și le va afișa în consolă:
npm i jshint gulp-jshint -D
Pluginuri de procesare HTML
Includeți fișiere- pluginul vă permite să stocați părți statice ale site-ului, precum antet, subsol, deoparte etc., în fișiere separate și să le includeți în orice parte a altui fișier. Nu mai este nevoie, în cazul unor modificări minore în antet, de a schimba zeci sau chiar sute de pagini html ale șablonului:
npm i gulp-rigger -D
Pluginul este, de asemenea, compatibil cu JS.
Să includem JS personalizat în fișierul principal JS src / js / main.js cu construcția:
// = _main.js
Includeți fișierele header.html și footer.html în index.html
// = include / header.html// = include / footer.html
Alte pluginuri
LiveReload- pluginul te scutește de a fi nevoit să reîncarci pagina în browser de fiecare dată pentru a vedea modificările, acum acest lucru se întâmplă automat când salvezi fișierul modificat:
npm i gulp-connect -D
Prevenirea prăbușirii lui Gulp- uneori se întâmplă ca Gulp să se blocheze din modul de vizionare în caz de erori critice (în principal din cauza JS). Acest plugin încearcă să mențină procesele Gulp în funcțiune ori de câte ori este posibil:
npm i gulp-plumber -D
Redenumirea fișierelor- cea mai comună lucrare cu nume de fișiere. Pluginul vă permite să redenumiți complet fișierele, să modificați extensia, să adăugați prefixe și postfixe, de exemplu, pentru a converti un fișier precum style.styl în style.min.css:
npm i gulp-rename -D
Curățător- uneori este nevoie să curățăm complet directorul de compilare, aici pluginul ne vine în ajutor:
Harta surselor- pentru ca fișierele dvs. să rămână lizibile prin depanare de către browser după minificare, trebuie să adăugați hărți sursă la fișierele minificate:
npm i gulp-sourcemaps -D
Funcții avansate ale ceasului- pluginul face ca ceasul să fie inteligent, acum nu suprascrie toate fișierele din compilare atunci când este schimbat un singur fișier, un fișier modificat specific este suprascris, ceea ce economisește timp și resurse:
npm i gulp-watch -D
Verificați package.json
La urma urmelor pluginuri instalate, să verificăm pachetul nostru.json. Ar trebui să arate cam așa:
("nume": "start", "versiune": "1.0.0", "description": "Start pachet pentru front-end develop", "autor": "Ivan Ivanov", "licență": "MIT", "dependencies": (), "devDependencies": ("gulp": "latest", "gulp-autoprefixer": "latest", "gulp-connect": "latest", "gulp-imagemin": "latest", "jshint": "latest", "jshint-stylish": "latest", "gulp-jshint": "latest", "gulp-minify-css": "latest", "gulp-plumber": "latest", "gulp-rename": "cel mai recent", "gulp-rigger": "cel mai recent", "gulp-sourcemaps": "cel mai recent", "gulp-stylus": "cel mai recent", "gulp-uglify": "cel mai recent", "gulp-watch": "cel mai recent", "gulp.spritesmith": "cel mai recent", "rimraf": "cel mai recent"))
În locul celor mai recente, în cazul dvs., vor fi înregistrate versiuni specifice ale pluginurilor instalate. pentru că formăm pachetul nostru de pornire, care va fi utilizat în multe proiecte, de asemenea, se recomandă înlocuirea valorilor versiunii cu cele mai recente, pentru a instala întotdeauna cele mai recente versiuni de plugin-uri în proiect.
Directorul node_modules ar trebui să apară, de asemenea, în folderul proiectului, în care sunt stocate toate fișierele plugin-ului nodului. Sunt instalate toate pluginurile necesare, puteți accesa setările de configurare Gulp.
Configurarea gulpfile.js
gulpfile.js- acesta este fișierul principal de configurare al managerului nostru de activități, în acesta vom stoca toate setările și comenzile.
Toată munca Gulp se reduce la sarcină ( Engleză sarcină). O sarcină este o funcție separată, autonomă numită. Fiecare sarcină poate fi apelată separat.
Modul de conformitate cu standardele moderne
În primul rând, la începutul fișierului, conectați modul de compatibilitate numai conform standardelor moderne:
„folosiți strict”;
Puteți citi mai multe despre această directivă.
Inițializarea pluginului
Pluginurile sunt inițializate cu următoarea construcție:
var initPlugin = require ("plugin-name");
În conformitate cu această construcție, inițializăm toate pluginurile noastre:
Var gulp = require ("gulp"), // plugin principal gulp stylus = require ("gulp-stylus"), // stylus preprocessor prefixer = require ("gulp-autoprefixer"), // adăugarea de prefixe automate cssmin = require (" gulp-minify-css "), // minify css uglify = require (" gulp-uglify "), // minify js jshint = require (" gulp-jshint "), // urmăriți erorile în js rigger = require ( "gulp -rigger"), // lucrul cu incluziuni în html și js imagemin = require ("gulp-imagemin"), // minimizarea imaginilor spritesmith = require ("gulp.spritesmith"), // combinarea imaginilor în sprites rimraf = require ( "rimraf"), // curățare hărți sursă = require ("gulp-sourcemaps"), // sourcemaps rename = require ("gulp-rename"), // redenumi fișierele instalator = require ("gulp-plumber"), // pază pentru oprirea ceasului galp = require ("gulp-watch"), // extinderea capacităților watch connect = require ("gulp-connect"); // livereload
Constantele drumului
Pentru comoditate, vom defini imediat toate căile și măștile:
Calea Var = (build: (// Aici indicăm unde să punem fișierele gata după asamblare html: "build /", js: "build / js /", css: "build / css /", img: "build / css / images / ", fonturi:" build / fonts / ", htaccess:" build / ", contentImg:" build / img / ", sprites:" src / css / images / ", spritesCss:" src / css / partial / " ), src: (// De unde să obținem sursele html: "src / template / *. html", // Sintaxa src / template / *. html îi spune lui gulp că vrem să luăm toate fișierele cu . Extensia html js: "src / js / [^ _] *. js ", // În stiluri și scripturi, avem nevoie doar de fișierele principale jshint:" src / js / *. js ", css:" src / css / styles.styl ", cssVendor:" src /css/vendor/*.* ", // Dacă vrem să stocăm fișierele bibliotecii separat, decomentați linia img:" src / css / images /**/*.* ", // Sintaxă img /**/*.* înseamnă - luați toate fișierele cu toate extensiile din folder și din subdirectoarele fonturi: "src / fonts /**/*.*", contentImg: "src / img / **/*.*", sprites: "src / css / sprites / *. png ", htaccess:" src / .htaccess "), watch: (// Aici vom indica după modificare din care fișiere dorim să vizionăm html: "src / template / ** / *. html", js: "src / js / ** / *. js", css: "src / css /**/*.* ", img: "src / css / imagini /**/*.*", contentImg: "src / img /**/*.*", fonturi: "src / fonturi /**/*.*", htaccess : "src / .htaccess", sprites: "src / css / sprites / *. png"), clean: "./build", // directoare care pot fi curățate outputDir: "./build" // director rădăcină sursă pentru pornirea miniserverului);
Rețineți că putem folosi măști de nume:
- * .js- toate fișierele cu extensie js
- [^ _] *. js- toate fișierele cu extensia js, cu excepția celor care încep cu un subliniere
- *.* - orice fișiere cu orice extensie în directorul curent
- /**/*.html- toate fișierele cu extensia .html din directorul curent și toate directoarele secundare
Sarcină
Acum că toate constantele sunt explicate, puteți începe să scrieți sarcini. Toate sarcinile au următoarea structură:
Gulp.task ("taskName", function () (// unele functii));
Mini Server și LiveReload
În primul rând, vom configura munca serverului local și a LiveReload:
// Server local pentru dezvoltare gulp.task ("conectare", funcția () (connect.server ((// setați configurațiile serverului root:, // directorul rădăcină al portului de pornire al serverului: 9999, // ce port vom folosi livereload: true) // inițializați funcția LiveReload));));
Cel mai probabil, va trebui adesea să lucrați simultan la mai multe proiecte simultan. Serverul vă permite să rulați mai multe servere în același timp, este suficient să vă înregistrați portul pentru diferite proiecte.
HTML build
// sarcină pentru crearea html gulp.task ("html: build", function () (gulp.src (path.src.html) // Selectați fișierele în calea dorită. pipe (rigger ()) // Rulați prin rigger . pipe (gulp.dest (path.build.html)) // încărcați-le în folderul de construire .pipe (connect.reload ()) // Și reîncărcați serverul nostru pentru actualizări));JS build
// verificați js pentru erori și trimiteți-le în consola gulp.task ("jshint: build", function () (returnează gulp.src (cale.src.jshint) // selectați fișierele în calea dorită.pipe (jshint ( )) // rulează prin jshint .pipe (jshint.reporter ("jshint-stylish")); // stilează rezultatul erorii către consolă)); // building javascript gulp.task ("js: build", function () (gulp.src (path.src.js) // Găsește fișierul nostru principal.pipe (rigger ()) // Rulați-l prin rigger .pipe ( sourcemaps .init ()) // Inițializați sourcemap .pipe (uglify ()) // Comprimați js .pipe (sourcemaps.write ()) // Adăugați maps.pipe (redenumiți ((sufix: ".min"))) / / adăugați sufixul .min la fișierul de ieșire .pipe (gulp.dest (path.build.js)) // descărcați fișier gataîn build .pipe (connect.reload ()) // Și reporniți serverul));Sprite build
Toate imaginile care urmează să fie combinate în sprite-uri sunt adăugate în directorul src / css / sprites / și după ce rulează prin Gulp devin o singură imagine sprite. Nu ar trebui să puneți sigle și fundaluri în sprite fără dimensiuni clare.
// build sprites gulp.task ("sprites: build", function () (var spriteData = gulp.src (path.src.sprites) // alege de unde să obții imagini pentru a fuziona într-un sprite.pipe (spritesmith (( imgName: " sprite.png ", // numele imaginii sprite cssName:" sprite.styl ", // numele stilului în care stocăm pozițiile imaginilor în sprite imgPath:" images / sprite.png " , // cale unde sprite-ul este cssFormat: "stylus", // format în care procesăm pozițiile cssTemplate: "stylus.template.mustache", // fișier mască cssVarMap: function (sprite) (sprite.name = "s- „+ sprite.name // numele fiecărui sprite va consta din numele fișierului și construcția„ s- ”la începutul numelui)))); spriteData.img.pipe (gulp.dest (path.build.sprites) ); // cale unde salvăm imaginea spriteData.css.pipe (gulp.dest (cale .build.spritesCss)); // cale unde salvăm stiluri));
Pentru a afișa un sprite, utilizați doar un mixin. De exemplu, pentru fișierul lorem.png, eșantionul din sprite va arăta astfel:
Sprite Lorem ($ s-lorem)
Acum un obiect cu clasa .lorem va lua dimensiunile imaginii și imaginea în sine ca fundal.
Construiți imagini statice
Imaginile statice sunt imagini utilizate în șablonul de aspect.
// construiește imagini statice gulp.task ("imagine: build", function () (gulp.src (path.src.img) // Selectați imaginile noastre.pipe (imagemin ((// Comprimați-le progresiv: true, // compression.jpg svgoPlugins: [(removeViewBox: false)], // compression.svg interlaced: true, // compression.gif optimizationLevel: 3 // raport de compresie de la 0 la 7))) .pipe (gulp.dest (cale. build.img)) // upload to build .pipe (connect.reload ()) // reporniți serverul));
Construirea de imagini dinamice
Imaginile dinamice sunt imagini de conținut care se vor schimba pe site și sunt conectate la nivel de șablon doar pentru demonstrare. De exemplu, pot fi imagini pentru știri etc.
// construiește imagini dinamice gulp.task ("imagescontent: build", function () (gulp.src (path.src.contentImg) .pipe (imagemin ((// Comprimați-le progresiv: true, // compress.jpg svgoPlugins): [(removeViewBox: false)], // compression.svg interlaced: true, // compression.gif optimizationLevel: 3 // raport de compresie de la 0 la 7))) .pipe (gulp.dest (path.build.contentImg)) // încărcați pentru a construi .pipe (connect.reload ()) // reporniți serverul));
Creați CSS
// construirea css personalizată gulp.task ("cssOwn: build", function () (gulp.src (path.src.css) // Selectați principalul nostru styleheet.pipe (sourcemaps.init ()) // inițializați soucemap. pipe (stylus ((comprima: true, "include css": true)))) // Compilează stylus .pipe (prefixer ((browser: ["ultimele 3 versiuni", "> 1%", "adică 8", "adică 7") "]))) // Adăugați prefixe ale furnizorului .pipe (cssmin ()) // Compress.pipe (sourcemaps.write ()) // write sourcemap .pipe (rename ((suffix:" .min "))) / / adăugați sufixul .min la fișierul de ieșire nume.pipe (gulp.dest (path.build.css)) // încărcați pentru a construi .pipe (connect.reload ()) // reporniți serverul));O sarcină separată pentru stilurile externe:
// construirea furnizorului css gulp.task ("cssVendor: build", function () (gulp.src (path.src.cssVendor) // Luați folderul furnizorului .pipe (sourcemaps.init ()) // inițializați soucemap .pipe (cssmin ()) // Compress.pipe (sourcemaps.write ()) // write sourcemap .pipe (gulp.dest (path.build.css)) // upload to build .pipe (connect.reload ()) / / reporniți serverul));
Să adăugăm, de asemenea, o sarcină comună de construire CSS:
// construiește întregul css gulp.task ("css: build", ["cssOwn: build", // "cssVendor: build"]);
Dacă trebuie să procesați stiluri externe separat de stilurile de acasă și să le descărcați fișiere separate trebuie să decomentați linia „cssVendor: build”
Construirea fontului
// build fonts gulp.task ("fonts: build", function () (gulp.src (path.src.fonts) .pipe (gulp.dest (path.build.fonts)) // upload to build));Htaccess build
// build htaccess gulp.task ("htaccess: build", function () (gulp.src (path.src.htaccess) .pipe (gulp.dest (path.build.htaccess))) // upload to build));Construcție generală
Pentru a nu trebui să construim fiecare parte separat, vom scrie o sarcină pentru construcția generală:
// build everything gulp.task ("build", ["html: build", "jshint: build", "js: build", "sprites: build", "css: build", "fonts: build", " htaccess: build "," imagine: build "," imagescontent: build "]);
Curățarea clădirii
Uneori este necesar să goliți complet directorul de compilare. Aici următoarea sarcină ne va veni în ajutor:
// curățați folderul de construcție gulp.task ("clean", funcție (cb) (rimraf (path.clean, cb);));
Urmăriți sau urmăriți modificările în timp real
Una dintre cele mai importante și funcții utile Gulp este o funcție de urmărire care vă permite să monitorizați în timp real toate modificările fișierelor produse și, în funcție de aceasta, să efectuați acțiuni specifice:
// vizionează gulp.task ("watch", function () (// build html în cazul schimbării watch (, function (event, cb)) (gulp.start ("html: build");)); // build sprites în cazul schimbării ceasului (, function (eveniment, cb) (gulp.start ("sprites: build");)); // construiește imagini de context în cazul schimbării watch (, function (event, cb) (gulp. start ("imagescontent: build");)); // build css în cazul schimbării ceasului (, funcție (eveniment, cb) (gulp.start ("css: build");)); // verificați js în caz of change watch (, ["jshint"]); // construiți js în cazul schimbării watch (, function (eveniment, cb) (gulp.start ("js: build");)); // construiți imagini statice în caz de schimb de urmărire (, funcție (eveniment, cb) (gulp.start ("imagine: build");)); // construi fonturi în caz de schimb de urmărire (, funcție (eveniment, cb) (gulp.start (" fonts: build");)) ; // build htaccess în cazul schimbării watch (, function (event, cb) (gulp.start ("htaccess: build");));));
Acțiuni implicite
Acțiunile implicite sunt sarcinile pe care managerul de sarcini le va efectua atunci când introduceți comanda gulp în consolă:
// acțiuni implicite gulp.task ("implicit", ["compilare", "vizionare", "conectare"]);
În cazul nostru, vom finaliza proiectul nostru, vom activa modul de vizionare și vom porni serverul.
Comenzi din linia de comandă
Toate comenzile galp pentru linia de comandă constau din două părți, aceasta este în sine comanda gulpși un spațiu separat de numele sarcinii. Iată o listă de comenzi aplicabile configurației noastre:
- gulp - comanda principală, rulează sarcina implicită
- gulp build - construiește totul
- gulp watch - începe ceasul
- gulp clean - curățați directorul de construire
- gulp connect - rulați serverul
- gulp html: build - build HTML
- gulp jshint: build - verificați JS pentru erori
- gulp js: build - build JS
- gulp sprites: build - build the sprite
- gulp image: build - build images static
- gulp imagecontent: build - build images dinamice
- gulp cssOwn: build - build CSS personalizat
- gulp cssVendor: build - build CSS extern
- gulp css: build - general CSS build
- gulp fonts: build - build fonts
- gulp htaccess: build - build htaccess
În acest moment, configurarea gulpfile.js este finalizată.
Copierea pachetului de pornire în proiect
Mai întâi, treceți prin consola din folderul în care dezvoltăm, de exemplu, cd develop / example și copiați totul din directorul pachetului de pornire în proiectul nostru cp -a ~ / develop / start /. ~ / develop / example /
Această metodă de copiere este cea mai convenabilă deoarece va copia cu exactitate totul, inclusiv fișierele ascunse .gitignore etc.
Concluzie
Folosind acest manual Am pregătit un pachet de pornire pentru utilizarea Gulp în proiectele noastre de dezvoltare front-end.
Acest pachet este disponibil și pe GitHub.
Post Scriptum
Acest articol nu este definitiv și va fi actualizat în funcție de modificări și îmbunătățiri.
