Pakkaa kuvat, JS- ja CSS-tiedostot optimoidaksesi verkkosivujen lataamisen ja paljon muuta. Tämän prosessin yksinkertaistamiseksi suosittelemme käyttämään Gulp 4 -projektikokoonpanoa, jota Andrey Gorokhov jatkuvasti parantaa. Alta löydät latauslinkit, mutta nyt käydään läpi pääkohdat: kuvaus ja asennus.

Gulp-projektin rakentaja

Gulp on projektirakentaja, työkalu yllä kuvattujen tehtävien automatisointiin. Se auttaa sinua nopeuttamaan työtäsi ja valmistelemaan projektisi kunnolla julkaisua varten.

Voit ladata kokoonpanon Githubin arkistosta tai Git-komentorivin kautta. Jatkossa voit muokata sitä tarpeidesi mukaan.

Erikoisuudet

• luokkien nimeäminen BEM:n mukaan
• BEM-rakennetta käytetään
• SCSS-esiprosessoria käytetään
• käyttää Babel-transpileria tukemaan nykyaikaista JavaScriptiä (ES6) selaimissa
• Webpackia käytetään JavaScript-moduulien rakentamiseen
• Bootstrapiin perustuvaa CSS-älyverkkoa käytetään nopeaan mukautuvaan asetteluun
• tiukkaa koodiopasta käytetään

Asennus

• asenna NodeJS (tarvittaessa) ja lanka
• lataa koontiversio Gitillä: git clone https://github.com/andreyalexeich/gulp-scss-starter.git
• asenna gulp maailmanlaajuisesti: yarn global add gulp-cli
• siirry ladattavaan kansioon, jossa on kokoonpano: cd gulp-scss-starter
• lataa tarvittavat riippuvuudet: lanka
• Aloita kirjoittamalla komento: yarn run dev (kehitystila)
• rakentaaksesi projektin anna komento yarn run build (koontitila)

Jos teit kaiken oikein, selaimesi pitäisi avautua paikallisen palvelimen kanssa. Rakennustila sisältää projektin optimoinnin: kuvien pakkaamisen, CSS- ja JS-tiedostojen pienentämisen palvelimelle lataamista varten.

Jos sinulla on ongelmia asennuksessa, katso tämä video:

Tiedoston rakenne

gulp-scss-starter ├── dist ├── gulp-tehtävät ├── src │ ├── lohkot │ ├── kirjasimet │ ├── │ ├── im ── tyylit │ ├── näkymät │ └── .htaccess ├── gulpfile.babel.js ├── webpack.config.js ├── package.json ├── .babelrc.js ├─rcem─estlin . ├─ ─ .stylelintrc ├── .stylelintignore └── .gitignore

• Kansion juuri:
  • .babelrc.js - Babelin asetukset
  • .bemrc.js - BEM-asetukset
  • .eslintrc.json - ESLint-asetukset
  • .gitignore – estää Gitiä seuraamasta tiedostoja
  • .stylelintrc - Stylelint-asetukset
  • .stylelintignore – estää Stylelintiä seuraamasta tiedostoja
  • gulpfile.babel.js - Gulp-asetukset
  • webpack.config.js - Verkkopaketin asetukset
  • package.json - riippuvuuksien luettelo
• src-kansio - käytetty kehityksen aikana:
  • BEM-lohkot: src/blocks
  • fontit: src/fonts
  • kuvat: src/img
  • JS-tiedostot: src/js
  • sivuston sivut: src/views/pages
  • SCSS-tiedostot: src/styles
  • HTML-tiedostot: src/views
  • Apache-verkkopalvelimen asetustiedosto gzip-asetuksella (häviötön pakkaus): src/.htaccess
• dist-kansio on kansio, josta paikallinen kehityspalvelin käynnistetään (kun ajetaan yarn run dev)
• Kansio gulp-tehtävät - kansio Gulp-tehtävillä

Joukkueet

• yarn run lint:style - tarkista SCSS-tiedostot. VSCodea varten sinun on asennettava laajennus. WebStormille tai PHPStormille sinun on otettava Stylelint käyttöön kohdassa Languages ​​& Frameworks - Style Sheets - Stylelint (virheet korjataan automaattisesti tiedostoa tallennettaessa)
• yarn run lint:style --fix - korjaa virheet SCSS-tiedostoissa
• yarn run dev - käynnistä palvelin projektin kehitystä varten
• yarn run build - rakenna projekti optimoimalla käynnistämättä palvelinta
• yarn run build view - käännä mopsitiedostoja
• yarn run build styles - käännä SCSS-tiedostoja
• yarn run build scripts - rakenna JS-tiedostoja
• yarn run build images - build images
• yarn run build webp - muunna kuvat .webp-muotoon
• yarn run build sprites - build sprites
• yarn run build fonts - build fonts
• yarn run build favicons - build favicons
• yarn run build gzip - build Apache-kokoonpano

Komponenttipohjainen lähestymistapa verkkosivustojen kehittämiseen

• Jokaisella BEM-lohkolla on oma kansio src/blocks/modules sisällä
• yhden BEM-lohkon kansio sisältää yhden HTML-tiedoston, yhden SCSS-tiedoston ja yhden JS-tiedoston (jos lohko käyttää komentosarjaa)
  • Lohkon HTML-tiedosto tuodaan src/views/index.html-tiedostoon (tai vaadittuun sivutiedostoon, josta lohkoa kutsutaan)
  • Lohkon SCSS-tiedosto tuodaan tiedostoon src/blocks/modules/_modules.scss
  • Lohkon JS-tiedosto tuodaan kansioon src/js/import/modules.js

Esimerkki kansiorakenteesta, jossa on BEM-lohko:

Lohkot ├── moduulit │ ├──header │ │ ├── header.html │ │ ├── header.js │ │ ├──sss header.

Jotta vastaavaa kansiota ja tiedostoja ei luoda manuaalisesti, anna konsoliin komento bem create my-block luodaksesi BEM-lohkokansion, jossa my-block on BEM-lohkon nimi.

Projektin sivut

• Projektin sivut sijaitsevat src/views/pages-kansiossa
  • kotisivu: src/views/index.html

Fontit

• fontit ovat src/fonts-kansiossa
  • käytä .woff- ja .woff2-muotoja
  • fontit sisältyvät tiedostoon src/styles/base/_fonts.scss
  • Voit muuntaa paikallisia fontteja tämän palvelun avulla

Kuvat

• kuvat ovat src/img-kansiossa
  • Favicon-luonnon kuvan on sijaittava src/img/favicon-kansiossa ja sen koon on oltava vähintään 1024px 1024px
  • kuvat muunnetaan automaattisesti .webp-muotoon. Yksityiskohtaiset tiedot käytöstä.

Kolmannen osapuolen kirjastot

• kaikki kolmannen osapuolen kirjastot asennetaan node_modules-kansioon
  • lataa ne käyttämällä komentoa yarn add paketin_nimi
  • yhdistääksesi kirjaston JS-tiedostoja, tuo ne aivan BEM-lohkon JS-tiedoston (eli komentosarjan käyttämän BEM-lohkon) alussa, esimerkiksi:

  Tuo $ mistä "jquery";

  • yhdistääksesi kirjastotyylitiedostoja tuo ne tiedostoon src/styles/vendor/_libs.scss
  • JS-tiedostoja ja kirjastojen tyylitiedostoja ei voi muokata itsenäisesti

⚠️ Jos projektisi käyttää useita kirjastoja, jotka on sisällytettävä usealle sivulle, virheiden välttämiseksi sinun tulee:

• luo sivukansio polun src/js/import varrelle
• luo sivut-kansioon sivulle js-tiedosto, esimerkiksi pageA.js , ja tuo sinne kirjasto, jota käytetään vain tällä sivulla
  • tee sama vaihe muille sivuille
• Webpack.config.js-tiedostossa lisää sivun js-tiedostot aloituskohtaan, esimerkki:

Sisäänpääsy: (pääasiallinen: " ./src/js/index.js",sivu A: " ./src/js/import/pages/pageA.js", sivu B: " ./src/js/import/pages/pageB.js" }

• yhdistä käännetyt js-tiedostot vaadituille sivuille

CSS-älyverkko

Keräilijä sisältää Dmitry Lavrikin älykkään CSS-gridin. Sen avulla voit päästä eroon merkintöjen tarpeettomista luokista käyttämällä SCSS:n mixinejä ja nopeuttaa mukautuvaa asettelua. Kokoonpano on jo määritetty Bootstrap-ruudukon mukaisesti. Käyttöesimerkki:

Kohteet ( @sisällytä rivi-flex (); @include md (justify-content, center); .item ( @include col (); @sisällytä koko (3); @include size-md (5); @include size- xs (10 ); ) )

Tuolloin, jolloin verkkosivustot olivat pieniä, erillistä käyttöliittymäkokoonpanoa ei tarvittu. CSS:n ja JS:n volyymi ja monimutkaisuus kuitenkin kasvoivat, ja näkymä, jossa sitä oli kätevää kehittää, muuttui hyvin erilaiseksi kuin se, jossa tulos tulisi esittää käyttäjälle. Sellaiset tehtävät kuin tiedostojen ketjuttaminen (liimaus), koodin minimointi ja jopa esikääntäminen ilmestyivät. Tämän tuloksena syntyivät erikoistuneet etuosakokoonpanojärjestelmät, joista puhumme.

Tietenkin heti kun kokoonpanon tarve tuli havaittavaksi, takaosan käyttämät työkalut alkoivat välittömästi hiipiä etupäälle. Heidän suurin ongelmansa ja syy siihen, että niitä käytetään tällä hetkellä yhä harvemmin etupäässä on se, että niitä ei ole lainkaan räätälöity sen erityispiirteisiin, koska projektin rakenne, käytetyt teknologiat ja kehityssykli riippuvat suuresti hankkeen tehtävät ja voivat vaihdella merkittävästi. Esimerkiksi Antilla on monisanainen syntaksi, eikä se erityisesti osaa tehdä käyttöliittymälle tarpeellisia asioita: sisäänrakennettuja tehtäviä on hyvin vähän ja se on huonosti laajennettavissa. Jos puhumme GNU makesta, se on paljon universaalimpi, koska se toimii komentotulkkikomennoilla. Haittoja ovat erityinen syntaksi, joka vaatii lisätutkimuksia, tarve tuntea kuori hyvin ja Makefile-tiedostojen taipumus muuttua nopeasti monimutkaisemmiksi rakennusvaatimusten kasvaessa.

Katsotaanpa keskikokoista verkkosivustoa, jolla on vakiorakenne, ja yritetään luetella sen läpikäyneet kokoonpanon päävaiheet. Yksinkertaisuuden vuoksi oletetaan, että et vaivaudu luomaan eri JS-tiedostoja eri sivuille, vaan haluat samalla säilyttää useita pieniä tiedostoja kehitysympäristössä tukemaan jonkinlaista modulaarisuutta. Yleensä se näyttää tältä:

/libs/ jquery.min.js underscore.min.js /js/ common.js carousel.js popups.js ....

Rakennusjärjestelmä tekee yleensä seuraavaa:

• ketjuttaa kaikki JS-tiedostot yhdeksi (oikeassa järjestyksessä, emme halua ladata skriptejämme ennen jQuerya);
• tarkistaa JS-koodin kelvollisuuden (esimerkiksi JSHintillä);
• minimoi koodin, hämärtää sen tarvittaessa (eli tekee siitä käsittämättömän);
• ketjuttaa CSS-tiedostoja (järjestys on myös tärkeä tässä, koska ominaisuudet ohitetaan usein);
• minimoi CSS:n;
• asettaa tiedostot erilliseen hakemistoon, josta lisäät ne HTML-koodiisi.

Usein tätä yksinkertaista kaavaa monimutkaistavat lisävaatimukset: suoritetaan testejä, käännetään CSS-esiprosessorikoodi, optimoidaan kuvia, kootaan malleja.

Kaikki nämä tehtävät, ja vielä enemmän, voidaan ratkaista nykyaikaisilla kokoonpanotyökaluilla. Harkitsemme suosituimpia Node.js-alustalla toimivia ratkaisuja. Niiden yhteinen etu on selkeä kieli, jonka kaikki käyttöliittymän kehittäjät osaavat (tai luulevat tietävänsä), keskittyminen käyttöliittymäongelmien ratkaisemiseen sekä ymmärrettävä Node.js-ympäristö, jossa saatat jo kehittää sovellustasi.

Grunt

Grunt on vanhin, tärkein ja suosituin rakennustyökalu. Lähes kaikki tarkastelemamme rakennusjärjestelmät vertaavat itseään Gruntiin tavalla tai toisella, ja jotkut ovat peräisin nopeammilta tai yksinkertaisemmista vaihtoehdoista. Tästä huolimatta sillä on pari merkittävää haittaa.

Ensinnäkin, kuten monet käyttöliittymäkehittäjät huomauttavat, Grunt on monisanainen. Yksinkertaisen koontijärjestelmän asentaminen vaatii noin sadan rivin kokoonpanon. Tämä ei kuitenkaan sinänsä ole mikään huono puoli: konfiguraatio on melko helppolukuinen, ja Gruntin suosion vuoksi valmiin konfiguraation löytäminen tyypilliseen tehtävään ei yleensä ole vaikeaa.

Toiseksi Grunt kehitettiin universaaliksi tuotteeksi, eli sen perusteella voit ratkaista melkein kaikki projektin kokoamiseen liittyvät ongelmat. Se on siistiä, mutta sillä on hinta monipuolisuudesta. Sekä edellä mainittu sananmukaisuus että nopeus. Verrattuna muihin Node.js-koontijärjestelmiin, Grunt on huomattavasti hitaampi, ja mikä ärsyttävintä, sillä on taipumus hidastua projektin kasvaessa. Menemättä Gruntin arkkitehtuurin yksityiskohtiin, syynä on se, että joka kerta kun sinun täytyy rakentaa esimerkiksi JS-tiedosto, se rakentaa kaikki JS-tiedostot uudelleen. Voit yrittää nopeuttaa rakennusprosessia määrittämällä manuaalisesti tarvittavat yhteydet tiedostojen välillä, mutta projektissa, jossa on monimutkainen tiedostoriippuvuuspuu, tämä voi olla liian monimutkaista.

Kaikesta tästä huolimatta Gruntilla on valtava ekosysteemi: satoja laajennuksia, tuhansia projekteja, miljardeja kehittäjiä, siinä kaikki. Eli ei vain Grunt ole universaali, vaan tehtävääsi varten oleva laajennus on todennäköisesti jo kirjoitettu.

Yhteenvetona voidaan todeta, että Grunt on loistava valinta pieniin ja keskisuuriin projekteihin, varsinkin jos et ole aiemmin asentanut rakennusjärjestelmiä. Valtava yhteisö, joukko laajennuksia, selkeä dokumentaatio ja jopa venäjänkielisiä artikkeleita ja raportteja niille onnettomille ihmisille, jotka eivät voi elää ilman sitä. Ja tietysti, jos tulevaisuudessa jostain syystä Grunt ei enää sovi sinulle, voit aina vaihtaa toiseen järjestelmään, jossa ei ole puutteita.

Kulaus

Gulp on tällä hetkellä aktiivisesti kehittyvä rakennusjärjestelmä. Sen arkkitehtuuri perustuu säikeiden käyttöön Node.js:ssä, mikä eliminoi tarpeen kirjoittaa tilapäisiä tiedostoja ja kansioita levylle. Gulpin tärkeimmät edut ovat konfiguroinnin nopeus ja lyhyys. Lisäksi, jos ensimmäinen on kiistaton, niin lyhyys Gruntiin verrattuna saavutetaan yksinkertaisesti sen erilaisen rakenteen vuoksi. Jos Grunt-konfiguraatiossa käytät laajennuksia yksitellen ja määrität niistä jokaisen, Gulp-kokoonpanossa sinun on kuvattava prosessi, joka jokaisen tiedoston (tai tiedostojoukon) on käytävä läpi, jotta ne voidaan kerätä. Tässä on tosielämän esimerkki SASS-kokoelmasta:

Gulp.task("tyylit", function() ( return gulp.src("styles/*.scss") .pipe(sass(( tyyli: "laajennettu" ))) .pipe(rename((pääte: ".min "))) .pipe(minifycss()) .pipe(gulp.dest("build/styles/css")); ));

Ensimmäisellä rivillä rekisteröimme Gulp-tehtävän nimeltä styles. Sitten kuvataan peräkkäin mitä tulee tehdä kullekin styles/*.scss maskia vastaavalle tiedostolle: käännä SASS, lisää .min tiedoston nimeen, pienennä se, laita se viimeiseen hakemistoon. Jos joudumme tekemään jotain muuta tälle tiedostolle, lisäämme vain sopivan komennon, esim.pipe (lisää ASCII-yksisarvinen kommentti tiedoston alkuun) (Toivon, että he tekevät vihdoin lisäosan tälle joka päivä tehtävä). Pidän tästä lähestymistavasta asetusten kirjoittamiseen paremmin: se kuvaa paremmin, mitä tiedostoillesi todellisuudessa tapahtuu.

Tietysti Gulp on edelleen huonompi kuin Grunt liitännäisten lukumäärän suhteen, mutta laajennuksia on moniin tehtäviin. Todennäköisesti olemassa olevat laajennukset riittävät sinulle, ja jos jotain todella puuttuu, voit aina kirjoittaa oman (vitsinä). Muuten, siellä on gulp-grunt-paketti, jonka avulla voit suorittaa Grunt-tehtäviä Gulpista, jos todella tarvitset.

Jos pidät tästä lähestymistavasta rakentamiseen, nopeus on tärkeä, eikä sinun tarvitse suorittaa tiettyjä tehtäviä, joihin vain Gruntilla on laajennus, Gulp voi olla loistava valinta. Tällä hetkellä Gulp on edelleen Gruntin vakavin kilpailija.

Parsakaali

Harkittavissa olevista kokoonpanotyökaluista nuorin on nyt itse asiassa kehitysvaiheessa. Broccollin kehittäjät eivät piilota saaneensa inspiraationsa Gulpista, mutta he pitävät joitakin sen taustalla olevia käsitteitä virheellisinä. He esimerkiksi päättivät tallentaa välimuistiin kaikki välivaiheen koontitulokset (jotka jokainen lisäosa toteuttaa) sen nopeuttamiseksi sen sijaan, että olisi rakennettu osittain uudelleen vain vaaditut tiedostot. He eivät myöskään pitäneet siitä, että Gulp toimii parhaiten muuntamalla yksi tiedosto yhdeksi lopulliseksi, eli yksi yhteen. Parantaakseen monitoimitoimintoja Gulp kehittää parhaillaan monimutkaista virtuaalista tiedostojärjestelmää, jota Broccolli pitää tarpeettomana monimutkaisena ja Gulpin alkuperäisten konseptien heikkoutena. Broccolli toimii aluksi puiden sijaan tiedostojen sijaan ja suorittaa puiden muunnoksia vain muiksi puiksi (jopa rappeutuneiksi puiksi samasta kärjestä).

Erittäin järkevä teoreettinen lähestymistapa kokoonpanoongelmaan ei ratkaise Broccollin laajennusten lukumäärää koskevaa ongelmaa. Valitettavasti niitä on noin kaksi tusinaa ja he suorittavat vain kaikkein perustehtäviä. Jos haluat kokeilla jotain uutta, katso Broccollia, se on riittävän nopea, kehitetään aktiivisesti, mutta on luultavasti vielä liian raaka käytettäväksi vakavissa projekteissa.

Brunssi

Brunssi luotiin samalla tehtävällä - voittaa Grunt kaikilla rintamilla, mutta lähestyi sitä täysin eri näkökulmasta. Brunchin kehittäjät päättivät ymmärtää aihealueen hyvin, eli tehdä vähemmän universaalin työkalun, joka räätälöidään erityisesti käyttöliittymätehtäviin esimerkiksi ilman asetuksia ymmärtääkseen, että *.js on tiedosto skripteillä *.coffee on CoffeeScript ja niin edelleen. Brunssi on melko nopea, paljon nopeampi kuin Grunt, mutta hieman hitaampi kuin Gulp. Brunchin kiistattomiin etuihin kuuluu myös todella kompakti kokoonpano, joka on useita kertoja pienempi kuin Gruntin ja Gulpin. Tässä on esimerkiksi yksinkertainen brunssiasetus:

Exports.config = tiedostot: javascripts: joinTo: "javascripts/app.js": /^app/ "javascripts/vendor.js": /^(bower_components|vendor)/ stylesheets: joinTo: "stylesheets/app.css" järjestys :after: ["vendor/styles/helpers.css"] templates: joinTo: "javascripts/app.js"

Huomaa, että konfiguraatio voidaan kirjoittaa sekä CoffeeScriptillä (kuten tässä tapauksessa) että tavallisella JS:llä. Luomme tavallisen moduulin, joka palauttaa JSONin koontiasetukset.

Kiinnitä huomiota liittämiseen ja tilaamiseen. Tämä on mainitsemani verkkotunnus - määritystasolla Brunch tietää, että haluat todennäköisesti yhdistää tiedostoja, jotkut ennen toisia. Tämän ansiosta voit korvata 400 riviä Grunt-konfiguraatiosta 20–30 rivillä Brunch.

Lisäksi Brunchin ekosysteemi on paljon pienempi kuin Gruntin ja jopa Gulpin ekosysteemi. Laajennuksia on noin 50 (verrattuna esimerkiksi Gulpin yli 450:een), kehitys ei ole kovin nopeaa, yleensä kaikki on melko surullista.

Yhteenvetona: jos todella pidät lyhyistä konfiguroinneista, nopeus on tärkeä, mutta et tarvitse erityisiä toimia rakennusvaiheessa, voit katsoa Brunssia. Tietysti liitännäisten pieni määrä hämmentää, mutta ehkä tilanne muuttuu.

ENB

Ja lopuksi makein osa. Haluaisin kertoa sinulle Marat Dulinin Yandexissä kehittämästä kokoonpanojärjestelmästä, jonka nimi on ENB. Tätä käytämme tällä hetkellä projektissamme. Sen lähestymistapa poikkeaa oleellisesti kaikista kuvatuista järjestelmistä: se luotiin alun perin työskentelemään BEM-metodologiaa käyttävien projektien kanssa, vaikka, kuten kirjoittaja huomauttaa, sen alusta on vapaa BEM-ideologiasta ja sitä voidaan käyttää kaikissa sopivan rakenteen omaavissa projekteissa. .

Lyhyesti sanottuna se on pointti. ENB:ssä toimimme kohteen käsitteellä eli lopullisella kerättävällä tiedostolla tai solmulla (yleensä kansio, sivu), jolle on kerättävä tietty joukko tiedostoja. Kohdetiedoston rakentamiseen käytämme useita tekniikoita (karkeasti sanottuna Grunt-liitännäisiä, vaikka tekniikat ovat pienempiä ja erikoistuneempia). Ensinnäkin ENB määrittää alkuperäisen tiedostojoukon, joita tarvitaan kohteiden kokoamiseen (useita perustekniikoita tekevät tämän, jotka toimivat oletusarvoisesti BEM-metodologian kanssa, eli ne etsivät *.bemdecl-tiedostoa, joka sisältää riippuvuuksia annettu solmu eri lohkoissa), laajentaa täysin riippuvuuspuun (kun lohko, josta sivusi on riippuvainen, on itse riippuvainen toisesta, molemmat yhdistetään oikeassa järjestyksessä) ja etsii sitten jokaiselle rekisteröidylle tekniikalle tarvittavat tiedostot. Sitten ENB noudattaa konfiguraatiossa kuvattua tiedostomuunnosten järjestystä (tässä näet jonkin verran analogiaa Gulpin kanssa). Huolimatta joistakin eroista rakennusjärjestelmien vakiolähestymistavasta, peruskäsitteiden ymmärtämisen jälkeen ENB:n kanssa työskentely on melko helppoa.

ENB:n tärkeimmät edut: kokoonpanon nopeus, joka johtuu joustavasta välimuistijärjestelmästä ja mahdollisuudesta vaihtaa välitietoja eri teknologioiden välillä, itsenäisten prosessien rinnakkaistaminen ja raskaiden teknologioiden erottaminen erillisiksi osaprosesseiksi. Uusien teknologioiden kirjoittaminen ENB:lle on erittäin helppoa, jos olet jotenkin tyytymätön standardien käyttäytymiseen.

Haittoja ovat se, että ENB-konfiguraatio on melko monisanainen, koska sillä on mahdollista hallita täysin kaikkia rakentamisen vaiheita. Lisäksi ENB on edelleen kirjoitettu BEM-metodologiaa varten, ja sen liittäminen täysin erilaisen rakenteen omaavaan projektiin vaatii turhia liikkeitä. ENB:lle ei ole kirjoitettu paljon teknologioita (noin 60), mutta se selviää suurimmasta osasta BEM-projektien tehtävistä räjähdysmäisesti.

Yhteenvetona: ENB on paras valinta BEM-metodologiaan perustuviin projekteihin, joita pidän henkilökohtaisesti sopivimpana keskikokoisille ja suurille kohteille, koska koodin järjestäminen lohkoiksi kiviksi ja piippauksiksi. Se on erittäin nopea, kerää kymmeniä sivuja ja satoja tiedostoja sekunneissa, on helppo asentaa ja miellyttävä käyttää. Jos projektisi on suuri, hämmennät koodia ja muokkaat tiedostoja tuhansia rivejä kerrallaan, suosittelen tutustumaan BEM:iin tarkemmin tapana organisoida front-end-projektien rakenne. Ja kun rakastat BEM:ää, tulet rakastamaan ENB:tä alkuperäisimpänä työkaluna BEM-projektien rakentamiseen.

Tässä artikkelissa tarkastellaan esimerkkiä Gulp-ympäristöstä, jota voidaan käyttää verkkoprojektin mukavaan etupään kehittämiseen. Tämä esimerkki on oletusarvoisesti määritetty luomaan sivustoja ja verkkosovelluksia Bootstrap 4 -kehykseen perustuen.

Tässä artikkelissa käsitelty projekti sijaitsee Githubissa osoitteessa: https://github.com/itchief/gulp-project-bootstrap-4

Video tälle artikkelille:

Ohjeet Gulp-ympäristön asentamiseen

Jotta voit luoda ympäristön, sinulla on oltava seuraavat ohjelmat asennettuna:

• "Node.js" (voit ladata "Node.js"-asennusohjelman käyttöjärjestelmääsi tältä sivulta; projekti vaatii vähintään 10:n ohjelmaversion);
• "Gulp" (voit asentaa Gulpin suorittamalla seuraavan komennon konsolissa: npm install -g gulp-cli).

Seuraava vaihe on npm-pakettien ja niiden riippuvuuksien asentaminen. Tätä varten sinun on suoritettava konsolissa (on oltava projektin juurihakemistossa) komento:

Npm asennus

Tämä komento asentaa kaikki paketit, joita tarvitaan sekä itse ympäristölle että käyttöliittymälle. npm suorittaa nämä toiminnot "package.json"-tiedostoon kirjoitettujen ohjeiden mukaisesti.

Kun käytät projektin ensimmäistä versiota (1.0.0), joka käyttää Bowerin paketinhallintaa, sinun on suoritettava toinen komento:

Bowerin asennus

Tämä ohjelma asentaa "bower.json"-tiedostossa määritetyt käyttöliittymäpaketit.

Kuinka käyttää Gulp-ympäristöä?

Avaa komentokehote (polun tulee osoittaa projektin juurikansioon) ja kirjoita gulp (normaali tila):

Tämän komennon antamisen jälkeen oletustehtävä alkaa, ts. "oletus". Tämä tehtävä puolestaan ​​suorittaa sarjan muita tehtäviä: "koonti", "verkkopalvelin" ja "katsella".

"Build"-tehtävä rakentaa projektin tuotantoa varten (eli se suorittaa "clean:build", "html:build", "css:build", "js:build", "fonts:build" ja "image:build" " "). Nämä tehtävät sijoittavat tuloksena olevat projektitiedostot "resurssit/rakennus"-kansioon.

"Web-palvelin" -tehtävä on suunniteltu käynnistämään paikallinen verkkopalvelin, jossa on "reaaliaikainen uudelleenlataus" selaimessa. Sen avulla on erittäin helppoa tarkastella projektia ja testata sitä.

"Katso"-tehtävää käytetään seuraamaan muutoksia "assets/src"-kansiossa oleviin lähdetiedostoihin ja suorittamaan erilaisia ​​tehtäviä, jos näin tapahtuu. Toisin sanoen sen avulla voit suorittaa tarvittavat tehtävät automaattisesti ja pitää tuloksena olevat tiedostot ("assets/build" -kansion sisältö) ajan tasalla.

Lisäksi voit suorittaa projektin yhden tai toisen osan valikoivaa (riippumatonta) kokoonpanoa.

Jos esimerkiksi haluat rakentaa vain sivuston CSS-osan, kirjoita komento:

Gulp css:build

Lista muista tehtävistä:

Gulp clean:build // "assets/build"-hakemiston puhdistaminen gulp html:build // HTML-tiedostojen rakentaminen gulp js:build // JS-tiedostojen rakentaminen gulp fonts:build // fonttien rakentaminen gulp image:build // kuvan kokoamista varten

Kuvaus Gulp-ympäristöstä

Tässä osiossa tarkastelemme:

• Gulp-ympäristön perustyökalut ja tiedostorakenne;
• kuinka kytkeä Bootstrap-lähteet projektiin ja määrittää ne;
• kuinka itsenäisesti (alusta) alustaa Gulp-projekti ja asentaa riippuvuuksia (ilman valmiita paketteja.json)
• miten Bower alustetaan ja käyttöliittymäpaketit asennetaan tyhjästä (ilman valmiin "bower.json"-tiedoston käyttöä)*;
• Gulp-projektinrakennustiedoston (gulpfile.js) sisältö

* Bowerin pakettien hallintaa ei ole käytetty projektissa version 2.0.0 jälkeen.

Luettelo työkaluista

Front-end-projektin (sivuston) kehittämiseen tarkoitettu ympäristö rakennetaan seuraavien työkalujen pohjalta:

• Node.js (ympäristö, jossa ympäristö suoritetaan);
• npm (Node.js:n mukana toimitettu paketinhallinta; käytetään Gulpin, lisäosien ja käyttöliittymäpakettien lataamiseen);
• jQuery, Popover, Bootstrap (paketit, joita käytetään sivuston css- ja js-osien rakentamiseen);
• Gulp ja sen lisäosat (käytetään projektin rakentamiseen ja muiden verkkotehtävien suorittamiseen).

Projektin ensimmäisissä versioissa käytettiin myös Bower-pakettienhallintaa. Sitä käytettiin jQuery-, Popover- ja Bootstrap-kirjastojen lataamiseen. Projektiversioissa 2.0.0 alkaen nämä kirjastot ladataan npm:llä.

Gulp-projektin tiedostorakenne

Projektin tiedostorakenne voidaan järjestää eri tavoin. Tämä voi riippua sekä tietyn kehittäjän mieltymyksistä että projektista, jota varten se luodaan.

Tässä artikkelissa noudatamme seuraavaa rakennetta:

Projektin juuressa on kansio "assets" ja tiedostot "gulpfile.js", "package.json". Tiedosto "gulpfile.js" sisältää tehtäviä Gulp-projektin rakentajalle.

Projektin ensimmäisessä versiossa käytettiin myös ".bowerrc"- ja "bower.json"-tiedostoja. Tiedosto "bower.json" on Bower managerin asetustiedosto, jonka perusteella määritettiin lataukseen tarvittavat käyttöliittymäpaketit. Tässä projektissa sitä käytettiin Bootstrapin, jQueryn ja Popperin lataamiseen.

"Assets"-kansio sisältää kaksi kansiota: "src" (lähdetiedostoille) ja "build" (valmiille tiedostoille; Gulp builder sijoittaa ne tähän kansioon). "src"-kansio sisältää hakemistot "fonts" (fonteille), "img" (lähdekuville), "js" (js-tiedostoille), "style" (tyyleille) ja "template" (HTML-fragmenteille). ja tiedosto "index.html".

Projektin ensimmäisessä versiossa "src"-kansio sisälsi edelleen "bower_components" -hakemiston. Se oli tarkoitettu komponenteille, jotka on ladattu Bowerilla. Nykyisessä versiossa sitä ei ole.

"js"-hakemisto sisältää kaksi tiedostoa: "main.js" ja "my.js". My.js-tiedostoa käytetään komentosarjojesi kirjoittamiseen, ja main.js-tiedostoa käytetään määrittämään luettelo tiedostoista, joiden sisältö on sisällytettävä lopulliseen js-tiedostoon. Lopullinen tiedosto on tarkoitettu tulostiedostona ("build"-hakemistossa).

"Tyyli"-hakemisto on varattu tyyleille. Tämä hakemisto sisältää kolme tiedostoa: "main.scss" (sisältää luettelon tiedostoista, joiden sisältö on sisällytettävä lopulliseen tyylitiedostoon), "my.scss" (käytetään omien tyylien kirjoittamiseen) ja "variables.scss" ( sisältää SCSS-muuttujia, joilla muutamme Bootstrap 4 -tyylejä ja käytämme sitä myös omien muuttujien luomiseen).

Tiedosto "index.html" on luodun projektin pääsivu. "index.html":n lisäksi voit sijoittaa muita html-sivuja tähän hakemistoon.

"Malli"-hakemisto on tarkoitettu HTML-sivujen fragmenttien sijoittamiseen siihen. Tässä hakemistossa voit esimerkiksi luoda tiedostot "head.html" ja "footer.html" ja tuoda niiden sisällön (käyttämällä syntaksia //= polku_tiedostoon) useille sivuille kerralla. Tämä helpottaa html-sivujen luomista ja muokkaamista, koska... sivujen yksittäiset osat ovat jo erillisissä tiedostoissa.

Bootstrap 4 -lähteiden yhdistäminen projektiin ja niiden määrittäminen

On olemassa erilaisia ​​​​tapoja yhdistää Bootstrap 4 -kehys projektiin sekä vaihtoehtoja sen kanssa työskentelemiseen.

Joustavin vaihtoehto on käyttää lähdekoodeja. Tässä tapauksessa et voi vain Bootstrap-oletustyylejä on erittäin helppo muuttaa, mutta myös liittyä projektiin vain ne luokat ja komponentit, joita siinä käytetään.

Bootstrap 4:n CSS-tyylien lähdekoodit on kirjoitettu SCSS-kielellä ja ne esitetään suuren määrän pieniä tiedostoja.

Luettelo SCSS-tiedostoista (sijaitsee "node_modules/bootstrap/scss/"-hakemistossa): "functions.scss", "variables.scss", "mixins.scss", "variables.scss", "print.scss", " reboot. scss", "type.scss", "images.scss", "code.scss", "grid.scss", "tables.scss", "forms.scss", "buttons.scss", "transitions. scss" , "dropdown.scss" jne.

Jokainen tällainen tiedosto suorittaa joko tietyn palvelutehtävän tai vastaa kehyksen tai komponentin tietyn toiminnon muotoilusta. SCSS-tiedostoilla on lyhyet ja selkeät nimet. Vain niitä käyttämällä voit ymmärtää melko tarkasti kunkin tarkoituksen.

Bootstrap 4:n oletustyylien mukauttaminen tai muuttaminen suoritetaan ohittamalla SCSS-muuttujien arvot. Mukavuuden vuoksi kaikki SCSS-muuttujat kerätään yhteen paikkaan (tiedostoon "variables.scss"). Mutta on suositeltavaa määrittää niiden arvot uudelleen, ei tietenkään tässä tiedostossa, vaan omassa tiedostossasi (esimerkiksi jolla on sama nimi "muuttujat.scss", mutta joka sijaitsee tiedostossa "assets/style/variables.scss").

Esimerkiksi teeman värien vaihtaminen menestys Ja vaara, tehdään muuttamalla $green- ja $red-muuttujien arvoja:

// Bootstrap 4 -muuttujien oletusarvojen ohittaminen $red: #cc2eaa; $vihreä: #2ecc71;

Huomautus että kun olet kopioinut Bootstrap 4 -muuttujat CSS-tiedostoosi ("assets/style/variables.scss"), sinun on poistettava niistä!default-tunniste.

!default-tunnisteen tarkoituksena on asettaa SCSS-muuttuja sen oletusarvoon. Jos SCSS-muuttujalla on jo arvo, uutta arvoa ei aseteta, jos se on määritetty !default-avaimella.

SCSS-tiedoston "assets/style/main.scss" avulla määritetään, mitkä Bootstrap 4 -lähde-SCSS-tiedostot tulisi sisällyttää käännökseen CSS:ksi ja mitkä eivät. Toisin sanoen tämän tiedoston sisältö määrittää tyylijoukon, joka kääntämisen jälkeen yhdistetään verkkosivulle.

Lisäksi tiedostot "assets/style/variables.scss" (Bootstrap-muuttujien ohittamista varten) ja "assets/style/my.scss" (omien tyylien luomista varten) on myös yhdistetty tähän tiedostoon.

Tiedoston "main.scss" sisältö (esimerkki):

// Bootstrap 4 -muuttujien oletusarvojen ohittaminen ja omien @import "muuttujien" määrittäminen; // Tarvittavien SCSS-lähteiden yhdistäminen Bootstrap 4 @import "../../../node_modules/bootstrap/scss/_functions"; @import "../../../node_modules/bootstrap/scss/_variables"; @import "../../../node_modules/bootstrap/scss/_mixins"; @import "../../../node_modules/bootstrap/scss/_root"; @import "../../../node_modules/bootstrap/scss/_reboot"; @import "../../../node_modules/bootstrap/scss/_type"; @import "../../../node_modules/bootstrap/scss/_images"; @import "../../../node_modules/bootstrap/scss/_code"; @import "../../../node_modules/bootstrap/scss/_grid"; @import "../../../node_modules/bootstrap/scss/_tables"; @import "../../../node_modules/bootstrap/scss/_forms"; @import "../../../node_modules/bootstrap/scss/_buttons"; @import "../../../node_modules/bootstrap/scss/_transitions"; @import "../../../node_modules/bootstrap/scss/_dropdown"; @import "../../../node_modules/bootstrap/scss/_button-group"; @import "../../../node_modules/bootstrap/scss/_input-group"; @import "../../../node_modules/bootstrap/scss/_custom-forms"; @import "../../../node_modules/bootstrap/scss/_nav"; @import "../../../node_modules/bootstrap/scss/_navbar"; @import "../../../node_modules/bootstrap/scss/_card"; @import "../../../node_modules/bootstrap/scss/_breadcrumb"; @import "../../../node_modules/bootstrap/scss/_pagination"; @import "../../../node_modules/bootstrap/scss/_badge"; @import "../../../node_modules/bootstrap/scss/_jumbotron"; @import "../../../node_modules/bootstrap/scss/_alert"; @import "../../../node_modules/bootstrap/scss/_progress"; @import "../../../node_modules/bootstrap/scss/_media"; @import "../../../node_modules/bootstrap/scss/_list-group"; @import "../../../node_modules/bootstrap/scss/_close"; @import "../../../node_modules/bootstrap/scss/_toasts"; @import "../../../node_modules/bootstrap/scss/_modal"; @import "../../../node_modules/bootstrap/scss/_tooltip"; @import "../../../node_modules/bootstrap/scss/_popover"; @import "../../../node_modules/bootstrap/scss/_carousel"; @import "../../../node_modules/bootstrap/scss/_spinners"; @import "../../../node_modules/bootstrap/scss/_utilities"; @import "../../../node_modules/bootstrap/scss/_print"; // Yhdistä SCSS-tiedostosi @import "my";

Lisäksi jotkin Bootstrap 4 -komponentit vaativat myös JavaScript-koodin toimiakseen.

Luettelo Bootstrap 4 js -tiedostoista (sijaitsee "node_modules/bootstrap/js/dist/"-hakemistossa): "util.js", "alert.js", "button.js", "carousel.js", "collapse. js ", "dropdown.js", "modal.js", "tooltip.js", "popover.js", "scrollspy.js", "tab.js" ja "toast.js".

Main.js:n avulla määritetään, mitkä Bootstrap 4 framework js-tiedostot tulee sisällyttää lopulliseen projektin js-tiedostoon ja mitkä eivät.

Vaadittujen tiedostojen tuonti tuloksena olevaan build/main.js-tiedostoon suoritetaan seuraavalla konstruktiolla:

//= tiedoston_polku

Gulp-laajennus "gulp-rigger" suorittaa tämän toiminnon. Sen asentaminen ja liittäminen kuvataan alla.

Voit myös tuoda tähän tiedostoon jQueryn, Popperin (tarvitaan Dropdown-, Tooltip- ja Popover-komponenttien toiminnalle) ja tarvittaessa omia js-tiedostoja.

Main.js-tiedoston sisältö (esimerkki):

// Tuo jQuery //= ../../../node_modules/jquery/dist/jquery.js // Tuo Popper //= ../../../node_modules/popper.js/dist/umd /popper.js // Tuo tarvittavat Bootstrap 4 js -tiedostot //= ../../../node_modules/bootstrap/js/dist/util.js //= ../../../node_modules/ bootstrap/js/dist/alert.js //= ../../../node_modules/bootstrap/js/dist/button.js //= ../../../node_modules/bootstrap/js/ dist/carousel.js //= ../../../node_modules/bootstrap/js/dist/collapse.js //= ../../../node_modules/bootstrap/js/dist/dropdown. js //= ../../../node_modules/bootstrap/js/dist/modal.js //= ../../../node_modules/bootstrap/js/dist/tooltip.js //= ../../../node_modules/bootstrap/js/dist/popover.js //= ../../../node_modules/bootstrap/js/dist/scrollspy.js //= ../. ./../node_modules/bootstrap/js/dist/tab.js //= ../../../node_modules/bootstrap/js/dist/toast.js // Tuo muita js-tiedostoja //= oma . js

Kuinka alustaa Gulp-projekti ja asentaa riippuvuuksia tyhjästä?

Projektin kehitys alkaa yleensä "package.json"-tiedoston (manifest) luomisella.

"Package.json"-tiedosto sisältää yleistä tietoa projektista (nimi, versio, kuvaus, tekijä jne.) sekä tietoja paketeista, joista tämä projekti riippuu.

Luettelon luomiseksi sinun on mentävä projektin juurikansioon ja annettava komento:

Npm init

Kun olet antanut komennon, sinun on vastattava seuraaviin kysymyksiin:

• projektin nimi (nimi) - "bootstrap-4";
• versionumero - "2.0.0";
• kuvaus – "Aloita projekti Bootstrap 4:llä";
• tekijä (tekijä) - "sivusto";
• git-arkisto - "";
• aloituspiste, testikomento, lisenssi, avainsanat – oletusarvot.

Kysymykseen "Onko tämä ok?" vastaa "kyllä" tai paina Enter.

Tämän seurauksena tiedosto "package.json" tulee näkyviin projektin juurikansioon.

Asennamme nyt paketit, joita käytämme projektissa seuraavalla komennolla:

Npm install paketin_nimi --save-dev // paketin asentaminen, ja sen tiedot kirjoitetaan automaattisesti "package.json"-tiedoston "devDependencies"-osioon npm install paketin_nimi --save-prod // paketin asennus tietoineen about it , kirjoitetaan automaattisesti "package.json"-tiedoston "dependencies"-osioon

Avain "--save-dev" tai "--save-prod" määrittää, mihin "package.json"-tiedoston osioon tiedostoa koskevat tiedot menevät.

Luettelo projektissa käytettävistä paketeista:

Npm install gulp --save-dev // install gulp npm install browser-sync --save-dev // asenna browser-sync npm install gulp-autoprefixer --save-dev // asenna gulp-autoprefixer npm install gulp-cache - -save-dev // asenna gulp-cache npm install gulp-clean-css --save-dev // asenna gulp-clean-css npm install gulp-rimraf --save-dev // asenna gulp-clean-css npm install gulp-imagemin --save-dev // install gulp-imagemin npm install gulp-plumber --save-dev // install gulp-plumber npm install gulp-rigger --save-dev // asenna gulp-rigger npm install gulp- sass --save-dev // install gulp-sass npm install gulp-sourcemaps --save-dev // asenna gulp-sourcemaps npm install gulp-uglify --save-dev // asenna gulp-uglify npm install imagemin-jpeg- pakkaa uudelleen --save-dev // asenna imagemin-jpeg-recompress npm install imagemin-pngquant --save-dev // asenna imagemin-pngquant npm install gulp-rename --save-dev // asenna imagemin-pngquant npm asenna jquery - -save-prod npm install popper.js --save-prod npm install bootstrap --save-prod

Kun kaikki riippuvuudet on asennettu, package.json-tiedostossa on seuraava sisältö:

( "nimi": "bootstrap-4", "versio": "2.0..com/itchief/gulp-project-bootstrap-4.git" ), "riippuvuudet": ( "jquery": "^3.4.1" , "popper.js": "^1.14.7", "bootstrap": "^4.3.1" ), "devDependencies": ( "browser-sync": "^2.26.7", "gulp": "^ 4.0.2", "gulp-autoprefixer": "^6.1.0", "gulp-cache": "^1.1.2", "gulp-clean-css": "^4.2.0", "gulp-rimraf" ": "^0.2.2", "gulp-imagemin": "^6.0.0", "gulp-putkimies": "^1.2.1", "gulp-rigger": "^0.5.8", "gulp" -sass": "^4.0.2", "gulp-sourcemaps": "^2.6.5", "gulp-uglify": "^3.0.2", "imagemin-jpeg-recompress": "^6.0.0 ", "imagemin-pngquant": "^8.0.0", "gulp-rename": "^1.4.0" ) )

Kuinka alustaa Bower ja asentaa käyttöliittymäpaketit tyhjästä?

Määritetään kansio, johon Bower lataa paketit. Voit tehdä tämän luomalla .bowerrc-tiedoston ja kirjoittamalla siihen seuraavat:

("hakemisto": "assets/src/bower_components/" )

Tallennetaan .bowerrc-tiedosto. Nyt kaikki komponentit ladataan bower_components-hakemistoon, joka sijaitsee hakemistossa property/src/.

Alustetaan Bower (luoda bower.json-luettelotiedosto). Bower.json-tiedosto voidaan luoda komennolla (projektin juurikansiossa):

Bower init Alusta Bower

Tämän jälkeen sinun on vastattava seuraaviin kysymyksiin:

• projektin nimi (nimi) – bootstrap-4;
• kuvaus (kuvaus) – Aloita projekti Bootstrap 4 -sivustolla;
• kirjoittaja (author) – verkkosivusto;
• aseta tällä hetkellä asennetut komponentit riippuvuuksiksi – Y (Kyllä);
• haluatko merkitä tämän paketin yksityiseksi, mikä estää sen vahingossa julkaisemisen rekisteriin – Y (Kyllä);
• Muihin kysymyksiin jätämme oletusarvoisesti ohjelman tarjoamat vastaukset;

Näiden vaiheiden tuloksena luodaan bower.json-tiedosto.

Ladataan Bootstrap 4 ja paketit, joista se riippuu (Popper ja jQuery) projektiimme Bowerin avulla.

Voit tehdä tämän kirjoittamalla seuraavan komennon konsoliin:

Bowerin asennus bootstrap#v4.0.0-beta --save

-save-kytkintä tarvitaan paketin tietojen kirjoittamiseen bower.json-tiedoston riippuvuudet-osioon.

Tämän seurauksena bower.json sisältää seuraavan sisällön:

( "nimi": "bootstrap-4", "description": "Aloita projekti Bootstrap 4 -sivustolla", "tekijät": [ "sivusto" ], "lisenssi": "ISC", "avainsanat": , "kotisivu" ": "", "ohita": [ "**/.*", "node_modules", "bower_components", "assets/src/bower_components/", "test", "tests" ], "dependencies": ( " jquery": "^3.2.1", "bootstrap": "^v4.0.0-beta" ) )

Jos et halua alustaa Boweria (bower.json) bower init -komennolla ja asentaa paketteja manuaalisesti, voit luoda bower.json-tiedoston (esimerkiksi tiedostonhallinnan avulla) ja liittää siihen yllä olevan tekstisisällön. . Jos haluat asentaa riippuvuuksia projektiin, kirjoita seuraava komento:

Bowerin asennus

Kuvaus Gulp-projektinrakennustiedostosta (gulpfile.js)

Kaikki aiemmin tehdyt toimet olivat valmistelevia. Kaikki toiminnot, joita luotu ympäristö suorittaa, määräytyy "gulpfile.js"-tiedoston mukaan.

Tiedosto "gulpfile.js" on luettelo tehtävistä.

Tärkeimmät tehtävät, jotka tämä tiedosto suorittaa:

• useiden tyylitiedostojen kerääminen yhdeksi, tuloksena olevan SCSS:n kääntäminen CSS:ksi, automaattisten etuliitteiden lisääminen, CSS:n pienentäminen ja lähdekartan luominen;
• tuomalla kaikki tarvittavat js-tiedostot yhteen, minimoimalla tämän tiedoston ja luomalla lähdekartan;
• html-tiedoston kerääminen, fonttien siirtäminen, kuvien käsittely (pakkaus) ja sivujen automaattinen päivittäminen selaimen synkronoinnin avulla.

Lisäksi, jotta vältetään näiden tehtävien suorittaminen lähdetiedostoja vaihdettaessa manuaalisesti, luomme toisen "katselutehtävän". Se seuraa tiedostojen muutoksia ja suorittaa tietyt tehtävät automaattisesti.

Koodi tiedostolle "gulpfile.js" (käyttäen Gulp 4:ää):

"käytä tiukkaa"; /* polut lähdetiedostoihin (src), valmiisiin tiedostoihin (build) sekä niihin, joiden muutoksia on seurattava (katso) */ var path = ( build: ( html: "assets/build/", js : "assets/build/js/", css: "assets/build/css/", img: "assets/build/img/", fontit: "assets/build/fonts/", src: ( html: "assets" /src/*.html", js: "assets/src/js/main.js", tyyli: "assets/src/style/main.scss", img: "assets/src/img/**/*. *", fontit: "assets/src/fonts/**/*.*", katso: ( html: "assets/src/**/*.html", js: "assets/src/js/** / *.js", css: "assets/src/style/**/*.scss", img: "assets/src/img/**/*.*", fontit: "assets/srs/fonts/* * /*.*" ), puhdas: "./assets/build/*" ); /* palvelimen asetukset */ var config = ( palvelin: ( baseDir: "./assets/build" ), notify: false ); /* yhdistä gulp ja liitännäiset */ var gulp = vaatia("gulp"), // liitä Gulp webserver = request("browser-sync"), // palvelin työskentelyyn ja sivujen automaattiseen päivittämiseen putkimies = vaatia("gulp-plumber" "), // moduuli virheiden seurantaan rigger = request("gulp-rigger"), // moduuli yhden tiedoston sisällön tuomiseksi toiseen sourcemaps = request("gulp-sourcemaps"), // moduuli kartan luomiseen sass-lähdetiedostoista = request("gulp-sass"), // moduuli SASS:n (SCSS) kääntämiseen CSS-autoprefixeriksi = vaatia("gulp-autoprefixer"), // moduuli automaattisten etuliitteiden asettamiseen cleanCSS = request("gulp- clean-css" ), // laajennus CSS:n pienentämiseen uglify = request("gulp-uglify"), // moduuli JavaScript-välimuistin minimoimiseksi = request("gulp-cache"), // moduuli välimuistiin tallentamiseen imagemin = request(" gulp-imagemin" ), // laajennus PNG-, JPEG-, GIF- ja SVG-kuvien pakkaamiseen jpegrecompress = vaatia("imagemin-jpeg-recompress"), // liitännäinen jpeg-pakkaukseen pngquant = request("imagemin-pngquant"), / / liitännäinen pakkausta varten png rimraf = vaatia("gulp-rimraf"), // liitännäinen tiedostojen ja hakemistojen poistamiseen rename = request("gulp-rename"); /* tehtävät */ // käynnistä palvelin gulp.task("webserver", function () ( webserver(config); )); // html-tiedostojen kerääminen gulp.task("html:build", funktio () ( paluu gulp.src(path.src.html) // kaikkien html-tiedostojen valitseminen määritetyllä polulla.pipe(putkimies()) // seurantavirheet . pipe(rigger()) // tuo attachments.pipe(gulp.dest(path.build.html)) // lataa valmiit tiedostot.pipe(webserver.reload(( stream: true ))); // käynnistä palvelin uudelleen )) ; // kerää tyylejä gulp.task("css:build", function () ( return gulp.src(path.src.style) // hanki main.scss .pipe(plumber()) // for error tracking.pipe( sourcemaps.init()) // alusta lähdekartta .pipe(sass()) // scss -> css .pipe(autoprefixer()) // lisää etuliitteet.pipe(gulp.dest(path.build.css)) .pipe (rename(( pääte: ".min" ))) .pipe(cleanCSS()) // pienennä CSS .pipe(sourcemaps.write(). /")) // kirjoita lähdekartta .pipe(gulp.dest(polku.build.css)) // lataa rakennukseen .pipe(webserver.reload(( stream: true ))); // käynnistä palvelin uudelleen )); / / kerää js gulp.task("js:build", function () ( return gulp.src(path.src.js) // hanki main.js-tiedosto .pipe(plumber()) // virheiden seurantaa varten. pipe( rigger()) // tuo kaikki määritetyt tiedostot main.js:aan .pipe(gulp.dest(path.build.js)) .pipe(rename(( pääte: ".min" ))) .pipe(sourcemaps. init( )) //alustaa lähdekartta .pipe(uglify()) //pienennä js .pipe(sourcemaps.write("./")) //kirjoita lähdekartta .pipe(gulp.dest(path.build.js)) // laita valmis file.pipe(webserver.reload(( stream: true ))); // käynnistä palvelin uudelleen )); // fonttien siirto gulp.task("fonts:build", function () ( return gulp. src(polku. src.fonts) .pipe(gulp.dest(path.build.fonts)); )); // kuvien käsittely gulp.task("image:build", function () ( return gulp.src(polku .src.img ) // polku kuvan lähteillä.pipe(cache(imagemin([ // kuvanpakkaus imagemin.gifsicle(( lomitettu: tosi )), jpegrecompress(( progressiivinen: tosi, max: 90, min: 80 )) , pngquant() , imagemin.svgo(( lisäosat: [( RemoveViewBox: false )] )) ]))) .pipe(gulp.dest(path.build.img)); // valmiiden tiedostojen lataaminen )); // koontihakemiston poistaminen gulp.task("clean:build", function () ( return gulp.src(path.clean, ( lue: false )) .pipe(rimraf()); )); // välimuistin tyhjennys gulp.task("cache:clear", function () ( cache.clearAll(); )); // build gulp.task("build", gulp.series("clean:build", gulp.parallel("html:build", "css:build", "js:build", "fonts:build", " image:build"))); // suorita tehtäviä tiedostojen muuttuessa gulp.task("watch", function () ( gulp.watch(path.watch.html, gulp.series("html:build")); gulp.watch(path.watch.css , gulp.series("css:build")); gulp.watch(path.watch.js, gulp.series("js:build")); gulp.watch(path.watch.img, gulp.series(" image:build")); gulp.watch(path.watch.fonts, gulp.series("fonts:build")); )); // oletustehtävä gulp.task("default", gulp.series("build", gulp.parallel("verkkopalvelin","katsella")));

Tiedoston "gulpfile.js" koodi sisältää kommentteja. Heidän avullaan selitetään, mitä tämä tai tuo ohjeen fragmentti suorittaa.

Tehtävän luominen Gulpissa on hyvin yksinkertaista:

// gulp-tehtävän luominen (nametask on tehtävän nimi) gulp.task("nimitehtävä", function() ( // toiminnot, jotka tehtävän tulee suorittaa... ));

Tehtävät on rakennettu hyvin yksinkertaisesti. Useimmissa tapauksissa niiden toimintakehys voidaan esittää seuraavasti:

• saada tietoja lähdetiedostoista;
• käsitellä lähdedataa gulp-laajennusten avulla;
• tallenna tulos (tiedostot) "build"-hakemistoon.

Jos käytät Gulp 3:a, "gulpfile.js"-tiedoston sisällön tulee olla seuraava:

"käytä tiukkaa"; /* parametrit gulp-autoprefixerille */ var autoprefixerList = [ "Chrome >= 45", "Firefox ESR", "Edge >= 12", "Explorer >= 10", "iOS >= 9", "Safari >= 9", "Android >= 4.4", "Opera >= 30" ]; /* polut lähdetiedostoihin (src), valmiisiin tiedostoihin (build) sekä niihin, joiden muutoksia on seurattava (katso) */ var path = ( build: ( html: "assets/build/", js : "assets/build/js/", css: "assets/build/css/", img: "assets/build/img/", fontit: "assets/build/fonts/", src: ( html: "assets" /src/*.html", js: "assets/src/js/main.js", tyyli: "assets/src/style/main.scss", img: "assets/src/img/**/*. *", fontit: "assets/src/fonts/**/*.*", katso: ( html: "assets/src/**/*.html", js: "assets/src/js/** / *.js", css: "assets/src/style/**/*.scss", img: "assets/src/img/**/*.*", fontit: "assets/srs/fonts/* * /*.*" ), puhdas: "./assets/build/*" ); /* palvelimen asetukset */ var config = ( palvelin: ( baseDir: "./assets/build" ), notify: false ); /* yhdistä gulp ja liitännäiset */ var gulp = vaatia("gulp"), // liitä Gulp webserver = request("browser-sync"), // palvelin työskentelyyn ja sivujen automaattiseen päivittämiseen putkimies = vaatia("gulp-plumber" "), // moduuli virheiden seurantaan rigger = request("gulp-rigger"), // moduuli yhden tiedoston sisällön tuomiseksi toiseen sourcemaps = request("gulp-sourcemaps"), // moduuli kartan luomiseen sass-lähdetiedostoista = request("gulp-sass"), // moduuli SASS:n (SCSS) kääntämiseen CSS-autoprefixeriksi = vaatia("gulp-autoprefixer"), // moduuli automaattisten etuliitteiden asettamiseen cleanCSS = request("gulp- clean-css" ), // laajennus CSS:n pienentämiseen uglify = request("gulp-uglify"), // moduuli JavaScript-välimuistin minimoimiseksi = request("gulp-cache"), // moduuli välimuistiin tallentamiseen imagemin = request(" gulp-imagemin" ), // laajennus PNG-, JPEG-, GIF- ja SVG-kuvien pakkaamiseen jpegrecompress = vaatia("imagemin-jpeg-recompress"), // liitännäinen jpeg-pakkaukseen pngquant = request("imagemin-pngquant"), / / liitännäinen pakkausta varten png rimraf = vaatia("gulp-rimraf"), // liitännäinen tiedostojen ja hakemistojen poistamiseen rename = request("gulp-rename"); /* tehtävät */ // käynnistä palvelin gulp.task("webserver", function () ( webserver(config); )); // html-tiedostojen kerääminen gulp.task("html:build", funktio () ( paluu gulp.src(path.src.html) // kaikkien html-tiedostojen valitseminen määritetyllä polulla.pipe(putkimies()) // seurantavirheet . pipe(rigger()) // tuo attachments.pipe(gulp.dest(path.build.html)) // lataa valmiit tiedostot.pipe(webserver.reload(( stream: true ))); // käynnistä palvelin uudelleen )) ; // kerää tyylejä gulp.task("css:build", function () ( return gulp.src(path.src.style) // hanki main.scss .pipe(plumber()) // for error tracking.pipe( sourcemaps.init()) // alusta lähdekartta .pipe(sass()) // scss -> css .pipe(autoprefixer(( // lisää etuliitteet selaimet: autoprefixerList ))) .pipe(gulp.dest(path.build. css)) .pipe(rename(( pääte: ".min" ))) .pipe(cleanCSS()) // pienennä CSS .pipe(sourcemaps.write(). /")) // kirjoita lähdekartta .pipe(gulp.dest(polku.build.css)) // lataa rakennukseen .pipe(webserver.reload(( stream: true ))); // käynnistä palvelin uudelleen )); / / kerää js gulp.task("js:build", function () ( return gulp.src(path.src.js) // hanki main.js-tiedosto .pipe(plumber()) // virheiden seurantaa varten. pipe( rigger()) // tuo kaikki määritetyt tiedostot main.js:aan .pipe(gulp.dest(path.build.js)) .pipe(rename(( pääte: ".min" ))) .pipe(sourcemaps. init( )) //alustaa lähdekartta .pipe(uglify()) //pienennä js .pipe(sourcemaps.write("./")) //kirjoita lähdekartta .pipe(gulp.dest(path.build.js)) // laita valmis file.pipe(webserver.reload(( stream: true ))); // käynnistä palvelin uudelleen )); // fonttien siirto gulp.task("fonts:build", function () ( return gulp. src(polku. src.fonts) .pipe(gulp.dest(path.build.fonts)); )); // kuvien käsittely gulp.task("image:build", function () ( return gulp.src(polku .src.img ) // polku kuvan lähteillä.pipe(cache(imagemin([ // kuvanpakkaus imagemin.gifsicle(( lomitettu: tosi )), jpegrecompress(( progressiivinen: tosi, max: 90, min: 80 )) , pngquant() , imagemin.svgo(( lisäosat: [( RemoveViewBox: false )] )) ]))) .pipe(gulp.dest(path.build.img)); // valmiiden tiedostojen lataaminen )); // koontihakemiston poistaminen gulp.task("clean:build", function () ( return gulp.src(path.clean, ( lue: false )) .pipe(rimraf()); )); // välimuistin tyhjennys gulp.task("cache:clear", function () ( cache.clearAll(); )); // build gulp.task("build", [ "clean:build", "html:build", "css:build", "js:build", "fonts:build", "image:build" ]); // suorita tehtäviä tiedostojen muuttuessa gulp.task("watch", function () ( gulp.watch(path.watch.html, ["html:build"]); gulp.watch(path.watch.css, [" css:build"]); gulp.watch(path.watch.js, ["js:build"]); gulp.watch(path.watch.img, ["image:build"]); gulp.watch(path .watch.fonts, ["fonts:build"]); )); // oletustehtävä gulp.task("default", [ "build", "webserver", "watch" ]);

Haluatko saada enemmän pisteitä Google-sivunopeudella? Etkö tiedä mitä "etukokoonpano" on? Sitten sinun on mielenkiintoista tulla tänne.

Mikä on Node.JS?

Node.JS:tä kutsutaan yleisesti nimellä "Northern JavaScript". Tällä alustalla voit kirjoittaa ohjelmia JavaScript-syntaksilla.

Toteutuksia on Windowsille, Mac OS:lle ja Linuxille.

Mukana paketinhallinta NPM, jolla voit asentaa paketteja.

Mikä on Gulp?

Gulp on Node.JS:ssä kirjoitettu paketti, joka auttaa verkkovastaavia rakentamaan projekteja asetteluvaiheessa.

Gulpin asentamiseksi sinun on käytettävä komentoriviä.

Npm install gulp

Tämän artikkelin lopussa on tiedosto, joka auttaa sinua kokoamaan vakioprojektin.

Tässä esimerkissä teemme seuraavat Gulpilla:

• Optimoi kuvat automaattisesti verkkoa varten;
• Keräämme yhden pienennetyn tyylitiedoston esiprosessoreista (SASS, SCSS);
• Keräämme yhden pienennetyn tiedoston skripteillä.

Kuinka rakentaa etuosa Gulpin avulla?

Ymmärtääksemme, miten kaikki toimii, otetaan se askel askeleelta.

Rakenne näkyy kuvakaappauksessa.

• Omaisuuskansio on tarkoitettu kuvien, tyylien ja komentosarjojen lähteille;
• Julkinen kansio - projektin rakentamisen tulos sijoitetaan siihen;
• gulpfile.js - tiedosto, joka kuvaa kerääjän logiikan;
• package.json on tiedosto, joka sisältää tietoja ohjelmista ja laajennuksista, joita käytetään saamaan Gulp toimimaan oikein.

package.json

Tiedoston sisältö:

( "nimi": "gulp_project", "versio": "1.0.0", "description": "Esimerkki", "pää": "gulpfile.js", "skriptit": ( "testi": "kaiku\" Virhe: testiä ei määritetty\" && exit 1"), "author": "Dmitriy Ilichev", "lisenssi": "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" ) )

Tästä tiedostosta selviää seuraavaa:

• Projektin nimi gulp_project, versio ja kuvaus;
• Päätiedosto on gulpfile.js;
• Projektin tekijä, lisenssi - kaikki tämä ei ole niin tärkeää ja nämä kentät voivat olla yksinkertaisesti tyhjiä;
• Mielenkiintoinen kohta on devDependencies. Se kuvaa riippuvuuksia.

Tiedostoa voidaan muokata tavallisella tekstieditorilla. Se voidaan myös luoda uudelle projektille npm int -komennolla.

Tämän perusteella Node.JS ymmärtää, että tarvitsemme toimiakseen:

• Gulpin versio 3.9.0 ja uudemmat kokoonpanoa varten;
• Gulp-csso versio 1.0.0 ja uudemmat - laajennus tyylien pienentämiseen (css);
• Gulp-concat versio 2.6.0 ja uudemmat on laajennus useiden tiedostojen yhdistämiseen yhdeksi;
• Gulp-uglify versio 1.2.0 ja uudemmat - laajennus javascriptin pienentämiseen;
• Gulp-imagemin versio 2.3.0 ja uudemmat - plugin kuvan optimointia varten;
• Gulp-sass versio 2.1.1 ja uudemmat on laajennus css:n saamiseen sassista (scss).

Loistava! Sen jälkeen sinun on asennettava tämä kaikki. Tämä tehdään komentoriviltä. Projektikansiossa ollessasi sinun on suoritettava komento:

Npm asennus

Kaikki tarvittavat tiedot otetaan paketista.json.

Kaiken tämän taian jälkeen node_modules -palvelukansio tulee näkyviin.

gulpfile.js

Tiedoston sisältö:

/* * * Määrittele muuttujat * */ var gulp = request("gulp"), // Oikeastaan ​​Gulp JS uglify = vaatia("gulp-uglify"), // JS-pienennys concat = request("gulp-concat"), // Tiedostojen liimaus imagemin = request("gulp-imagemin"), // Kuvien pienentäminen csso = request("gulp-csso"), // CSS:n pienentäminen sass = request("gulp-sass"); // Muunna SASS (SCSS) CSS:ksi /* * * Luo tehtäviä (tehtäviä) * */ // Tehtävä "sass". Käynnistetty komennolla "gulp sass" gulp.task("sass", funktio () ( gulp.src(./assets/styles/style.scss") // käsiteltävä tiedosto.pipe(sass().on (" virhe", sass.logError)) // muuntaa sass css:ksi .pipe(csso()) // pienennä edellisessä vaiheessa saatu css.pipe(gulp.dest("./public/css/")) ; // Kirjoitamme tuloksen määritettyyn osoitteeseen)); // Tehtävä "js". Suoritetaan komennolla "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" ]) // käsittelemämme tiedostot.pipe(concat("min.js")) // yhdistä kaikki JS:t .pipe(uglify()) // pienennä tuloksena oleva "footcloth".pipe(gulp.dest("./public/js/")) // kirjoita tulos määritettyyn osoitteeseen )); // Tehtävä "kuvat". Suoritetaan komennolla "gulp images" gulp.task("images", function() ( gulp.src(.assets/images/**/*") // ota kaikki tiedostot kansiosta ja sen alikansioista.pipe( imagemin() ) // optimoi kuvat webille.pipe(gulp.dest(./public/images/")) // kirjoita tulos määritettyyn osoitteeseen )); // Tehtävä "katso". "gulp watch" -komennolla käynnistetty // Se valvoo tiedostojen muutoksia ja käynnistää automaattisesti muita tehtäviä gulp.task("watch", function () ( // Kun muutat *.scss-tiedostoja "styles"-kansiossa ja alikansioissa, käynnistä sass gulp task. watch("./assets/styles/**/*.scss", ["sass"]); // Kun muutat *.js-tiedostoja "javascripts"-kansiossa ja alikansioissa, suorita js task gulp .watch("./assets/ javascripts/**/*.js", ["js"]); // Kun muutat tiedostoja "images"-kansiossa ja alikansioissa, suorita kuvatehtävä gulp.watch(). /assets/images/**/*", ["kuvat"]); ));

Päätemppu on tehtävässä katsella. Kun olet käynnistänyt sen kerran, voit helposti työskennellä lähteiden kanssa, ja projekti kootaan automaattisesti aina, kun tallennat muokatut tiedostot.

Tämän seurauksena saamme mallin valmiiksi julkaistavaksi Internetissä.

Tehtävät voidaan suorittaa erikseen. Tämän seurauksena artikkelin lopussa olevasta arkistosta löydät seuraavat tiedot:

! Huomautus Tosiasia on, että tämän arkiston purkamisen jälkeen sinun on ensin suoritettava npm-asennuskomento. Tämä kansio sisältää melko suuren määrän tiedostoja, ja niiden kopioiminen/liittäminen joka kerta on ajanhukkaa.

Hallussa

Muita hyödyllisiä laajennuksia on paljon. Esimerkiksi erinomainen mallimoottori Jade, joka nopeuttaa huomattavasti html-koodin kirjoittamista, joku saattaa tarvita VÄHEMMÄN ja niin edelleen.

Esitetty esimerkki on vain alusta ja malli, josta voit nopeasti ja ilman erityistä tietoa alkaa käyttää kaikkia näitä upeita ominaisuuksia.

Gentleman's Kit Front-end-kehittäjälle

Ei ole mikään salaisuus, että nykyaikaisella etupään kehittäjällä täytyy olla jokin projektin kokoonpanotyökaluista arsenaalissaan, kuten esim. Kulaus tai Grunt. Gruntilla oli jonkin aikaa monopoli tässä asiassa, mutta Gruntista eronnut kehittäjäryhmä päätti luoda oman kevyen ja nopean Task Manager Gulpin.

Tässä artikkelissa valmistelemme alusta alkaen aloituspaketin käytettäväksi tulevissa projekteissa.

Mitä tekniikoita käytämme?

• Ohjelmistoalusta: Node.js
• CSS-esiprosessori: Stylus
• Tehtävienhallinta: Kulaus

Miksi frontender tarvitsee tehtävänhallinnan?

Viime aikoihin asti olen itsekin ihmetellyt, miksi minun piti käyttää aikaa tehtävähallinnan konfigurointiin, jos tein jo hyvää työtä asettelujen kanssa, kunnes aloin käyttämään CSS-esiprosessoreja.

CSS-esiprosessorit ovat todella käteviä ja nopeuttavat tyylien kirjoittamista, mutta esiprosessorilla kirjoitetun koodin kääntäminen tavalliseksi CSS:ksi ei ole täysin triviaali tehtävä, joka voidaan ratkaista yhdellä painikkeella. Tässä tehtäväpäällikkö tulee avuksemme. Koodin muuntaminen ei tapahdu vain napin painalluksella, vaan kaikki tapahtuu verkossa ilman osallistumistasi (tietysti, jos määrität kaiken oikein).

Tietenkin tehtävienhallinnan tehtävät menevät paljon pidemmälle kuin prosessit, jotka liittyvät esiprosessorikoodin muuntamiseen puhtaaksi CSS:ksi. Projektirakentaja käsittelee myös pienentämistä, ketjuttamista, virhekoodien tarkistamista, kuvien kokoamista spriteiksi, kuvien optimointia verkkoa varten jne. Sinun tarvitsee vain luoda projektiisi useita loogisesti erotettuja tiedostoja, jotka sitten kootaan kätevästi yhteen hakemistoon, jo käsiteltynä ja valmiina käytettäväksi selaimessa. Mutta siitä lisää hieman myöhemmin, mutta aloitetaan nyt valmistelusta.

Node.js:n asentaminen

Jos osaat asentaa node.js:n järjestelmääsi ja käytät sitä, voit siirtyä turvallisesti seuraavaan osaan.

Haluan välittömästi varoittaa, että kaikki kuvatut toimet ovat merkityksellisiä Mac-käyttöjärjestelmän kymmenes versio, mutta pätee yleisesti muihin Unix järjestelmät Kehitys tehtävänhallinnan ja komentorivin kautta Windows hieman vaikeampaa, eikä sitä kuvata tässä. Jos kuitenkin käytät edelleen Windowsia etkä ole valmis luopumaan siitä, voin ehdottaa mahdollisuutta käyttää virtuaalikoneen, johon on asennettu Ubuntu, Käytän tätä vaihtoehtoa kotijärjestelmässäni, mikä on yleensä melko kätevää.

Joten ensinnäkin meidän on ladattava ja asennettava node.js-paketti järjestelmäämme, jotta voimme työskennellä solmun kanssa konsolin kautta. Siirry viralliselle node.js-sivustolle ja lataa uusin vakaa versio järjestelmällesi. Asennuksen jälkeen node-komennon pitäisi olla käytettävissä komentorivilläsi. Tarkista, että solmu on käynnissä, kirjoittamalla komento komentoriville

vastauksen pitäisi näyttää asennetun node.js:n versio. Jos kaikki on hyvin, mennään eteenpäin.

Projektihakemistorakenne

Käytämme projekteissamme yhtenäistä versiota rakenteesta:

Kehittää - kehityksen juurihakemisto└─aloita - projektihakemisto├─rakenna - Tehtäväpäällikön kokoama rakennus├─resurssi - kaikki lähdetiedostot kehitystä varten (.psd jne.)├─src - kehityshakemisto│├─css - tyylin kehityshakemisto││├─kuvat - kaikki staattiset kuvat││├─sprites - kuva kerätty spriteen││├─ osittainen - mukautettuja tyylitiedostoja│││├─mixins.styl - mukautetut sekoitukset│││└─styles.styl - mukautettuja tyylejä││├─toimittaja - muut ulkoiset tyylitiedostot││└─styles.styl - päätyylitiedosto│├─fontit - fonttihakemisto│├─kuva - dynaamisten kuvien luettelo│├─js - JavaScript-kehityshakemisto││├─_*.js - sivun js-tiedostoja││├─_main.js - perus mukautettu js││└─main.js - tärkein js-tiedosto│├─.htaccess - palvelimen asetukset│├─*.html - sivun asettelutiedostot│├─pages.html - tiedosto, jossa on linkit mallin kaikille sivuille│├─index.html - sivun asettelun hakemistotiedosto│└─sisältää - Mukana olevien merkintätiedostojen hakemisto│ └─*.html - mukana merkintätiedostot (header.html jne.)├─package.json - npm paketinhallinnan asetukset├─gulpfile.js - Gulpin konfigurointi├─stylus.template.mustche - naamio spritien lukemiseen├─TODO - todo-arkki└─.gitignore - konfigurointi Gitille

Asennus

Siirry konsolissa cd-komennolla juuri kehityshakemistoon, luo hakemisto projektillemme mkdir start ja siirry siihen.

Asennamme projektin rakenteet konsolin kautta:

mkdir koontiresurssi src src/css src/css/images src/css/sprites src/css/partial src/css/vendor src/js src/template src/template/include src/img src/fonts

Luodaan alkutiedostot projektirakenteeseen:

kosketa 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

Luodaan paketti.json

Kaikkia ponnahdusikkunakysymyksiä voi napsauttaa Enter-näppäimellä, node asettaa ne oletusarvoihin tai voit täyttää ehdotetut kentät.

.gitignore

Kerromme Gitille, mitkä hakemistot jätetään huomiotta ja joita ei ladata arkistoon:

/solmu_moduulit/ /build/ /resurssi/

Node_modules -hakemisto ilmestyy myöhemmin laajennusosien asennuksen jälkeen ja sisältää kaikki projektin solmulaajennukset.

src/.htaccess

Asennamme palvelimelle ylimääräisen gzip-pakkauksen ja välimuistin:

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript # Tarjoa gzip-pakkattuja CSS-tiedostoja, jos niitä on olemassa # ja asiakas hyväksyy gzipin. RewriteCond "%(HTTP:Accept-encoding)" "gzip" RewriteCond "%(REQUEST_FILENAME)\.gz" -s RewriteRule "^(.*)\.css" "$1\.css\.gz" # Tarjoa gzip pakattuna JS-tiedostot, jos niitä on olemassa # ja asiakas hyväksyy gzipin. RewriteCond "%(HTTP:Accept-encoding)" "gzip" RewriteCond "%(REQUEST_FILENAME)\.gz" -s RewriteRule "^(.*)\.js" "$1\.js\.gz" # Tarjoa oikeaa sisältöä tyypit ja estää mod_deflate double gzip. RewriteRule "\.css\.gz$" "-" Uudelleenkirjoitussääntö "\.js\.gz$" "-" # Tarjoa oikea koodaustyyppi. Ylätunnisteen liite Sisältökoodaus gzip # Pakota välityspalvelimet välimuistiin erikseen gzipattuja ja # ei-gzipattuja css/js-tiedostoja. Otsikon liittäminen Vaihtele Hyväksy-koodausta ExpiresActive on ExpiresByType sovellus/javascript "pääsy plus 1 kuukausi" ExpiresByType image/jpg "pääsy plus 1 kuukausi" ExpiresByType image/jpeg "pääsy plus 1 kuukausi" ExpiresByType image/gif "pääsy plus 1 kuukausi" Expires/ yaccesspngT kuukausi" ExpiresByType text/css "pääsy plus 1 kuukausi"

src/css/styles.styl

Sisällytetään mukautetut tyylitiedostot päätyylitiedostoon:

@import "osittainen/tyylit"

Huomaa, että connect.styl-tiedostoille ei ole määritetty tunnistetta Stylus-esiprosessorikoodin semantiikan mukaan. Jos haluat sisällyttää tyylejä toiseen laajennukseen, esimerkiksi .css, jälkimmäinen vaaditaan.

TEHDÄ

Tämä sivu sisältää kehitystyöarkin. Voit lukea lisää tämän tiedoston kanssa työskentelemisestä Sublime Textin PlainTasks-laajennussivulta.

Tämä viimeistelee rakenteen asennuksen.

Lisäosien asentaminen npm-paketinhallinnan avulla

Node.js sisältää oletuksena npm-pakettienhallinnan, jonka arkistot sisältävät monia lisäosia, joiden kanssa työskentelemme.

Gulp-laajennuksen asentaminen

Ensin meidän on asennettava Gulp maailmanlaajuisesti (kytkimellä -g) järjestelmäämme

npm install gulp -g

Sinun tarvitsee tehdä tämä vain kerran, globaalia lisäasennusta ei tarvita.

Nyt sinun on asennettava Gulp paikallisesti projektihakemistoosi

npm install gulp --save-dev

Kytkin --save-dev tarkoittaa, että tiedot laajennuksesta (nimi arkistossa ja sen versio) lisätään package.json-konfiguraatioon ja muistaa ne tässä projektissa. Koska emme tallenna Gitissä raskasta kansiota node_modules-laajennuksilla, konfiguraatioon tallennetut tiedot asennetuista laajennuksista antavat sinun ottaa käyttöön kaikki projektissa tarvittavat laajennukset yhdellä npm i -komennolla.

Jokaisella komennolla on lyhenteitä, joten voimme kirjoittaa yllä olevan komennon lyhyemmässä muodossa

Tulevaisuudessa käytämme myös lyhennettyä komentomuotoa.

Stylus-laajennus Gulpiin

Käytämme projekteissamme Stylus-esiprosessoria, joka toimii loistavasti ja kääntää solmun päälle.

Asentaa:

npm i gulp-stylus -D

CSS-prosessointilaajennukset

Automaattinen etuliite- lisää automaattisesti etuliitteet -ms- -o- -moz- -webkit- vaadittuihin ominaisuuksiin:

npm i gulp-autoprefixer -D

CSS-vähennys- laajennus pienentää tulostettavaa CSS-tiedostoa ja poistaa tarpeettomat välilyönnit ja välilehdet:

npm i gulp-minify-css -D

Kuvankäsittelylaajennukset

Kuvien yhdistäminen spriteiksi- Sinun ei enää tarvitse käyttää tuntikausia arvokasta aikaa yhdistämällä kaikki kuvat spriteiksi ja laskemalla sitten niiden koordinaatteja, tämä laajennus tekee kaiken tämän automaattisesti puolestasi:

npm i gulp.spritesmith -D

Lisätään aiemmin luotuun stylus.template.mustache-tiedostoon maski sprite-paikkojen laskemista varten:

((#kohteet)) $((nimi)) = ((px.x)) ((px.y)) ((px.offset_x)) ((px.offset_y)) ((px.width)) (( px.height)) ((pikseli.koko_leveys)) ((px.koko_korkeus)) "(((poistettu_kuva)))"; ((/kohteet))

Lisätään erikoissekoituksia mixins.styliin:

SpriteWidth($sprite) leveys $sprite spriteKorkeus($sprite) korkeus $sprite spritePosition($sprite) tausta-sijainti $sprite $sprite spriteImage($sprite) taustakuvan URL-osoite($sprite) sprite($sprite) jos !match( "hover", selector()) && !match("aktiivinen", valitsin()) spriteImage($sprite) spritePosition($sprite) spriteWidth($sprite) spriteHeight($sprite)

Yhdistetään mixinit ja luotu tiedosto koordinaatteineen päätyylitiedostoon src/css/styles.styl:

@import "partial/sprite" @import "partial/mixins"

Huomaa, että sprite-tiedostot on sisällytettävä ennen käyttäjän tyylejä @import "partial/styles"

Kuvien optimointi verkkoa varten- laajennus leikkaa automaattisesti kaikki tarpeettomat tiedot kuvistasi ja pakkaa ne optimaaliseen kokoon, mikä joissain tapauksissa mahdollistaa kuvien äänenvoimakkuuden pienentämisen jopa 90 %:

npm i gulp-imagemin -D

JavaScript-käsittelyn laajennukset

JS-vähennys- laajennus minimoi JS-koodisi mahdollisimman paljon ja lyhentää sen latausaikaa:

npm i gulp-uglify -D

JS-virheen seuranta- laajennus tarkistaa perusteellisesti JS-koodisi tunnistaakseen kaikki epäjohdonmukaisuudet ja näyttääkseen ne konsolissa:

npm i jshint gulp-jshint -D

HTML-käsittelyn laajennukset

Mukana olevat tiedostot- laajennuksen avulla voit tallentaa sivuston staattisia osia, kuten otsikon, alatunnisteen, sivuun jne., erillisiin tiedostoihin ja yhdistää ne mihin tahansa toisen tiedoston osaan. Jos otsikossa tehdään pieniä muutoksia, mallin kymmeniä tai jopa satoja html-sivuja ei enää tarvitse muuttaa:

npm i gulp-rigger -D

Plugin on myös yhteensopiva JS:n kanssa.

Yhdistetään mukautettu JS JS-päätiedostoon src/js/main.js seuraavalla rakenteella:

//= _main.js

Sisällytetään tiedostot header.html ja footer.html indeksiin.html

//= include/header.html//= include/footer.html

Muut laajennukset

LiveReload- laajennus poistaa tarpeen ladata sivua uudelleen selaimessa joka kerta muutosten näkemiseksi, nyt tämä tapahtuu automaattisesti, kun muutettu tiedosto tallennetaan:

npm i gulp-connect -D

Estää Gulpia kaatumasta- joskus käy niin, että Gulp voi kaatua kellotilasta kriittisten virheiden sattuessa (pääasiassa JS:n takia). Tämä laajennus yrittää pitää Gulp-prosessit käynnissä aina kun mahdollista:

npm i gulp-putkimies -D

Tiedostojen uudelleennimeäminen- yleisin työ tiedostonimien kanssa. Lisäosan avulla voit nimetä tiedostoja kokonaan uudelleen, muuttaa laajennusta, lisätä etu- ja jälkiliitteitä esimerkiksi muuntaaksesi tiedoston, kuten style.styl, muotoon style.min.css:

npm i gulp-nimeä uudelleen -D

Puhdistaja- joskus on tarpeen puhdistaa rakennushakemisto kokonaan, tässä laajennus tulee avuksemme:

Lähdekartta- jotta tiedostosi pysyvät luettavissa selaimen virheenkorjauksen kautta pienentämisen jälkeen, sinun on lisättävä lähdekartta pienennetyille tiedostoille:

npm i gulp-sourcemaps -D

Kehittyneet kellon ominaisuudet- laajennus tekee kellosta älykkään, nyt se ei korvaa kaikkia koontiversion tiedostoja, kun vain yhtä tiedostoa muutetaan, vaan tietty muutettu tiedosto kirjoitetaan päälle, mikä säästää aikaa ja resursseja:

npm i gulp-watch -D

Tarkistetaanpa package.json

Kun kaikki laajennukset on asennettu, tarkistetaan paketti.json. Sen pitäisi näyttää suunnilleen tältä:

( "nimi": "aloitus", "versio": "1.0.0", "description": "Aloituspaketti käyttöliittymän kehittämiseen", "author": "Ivan Ivanov", "lisenssi": "MIT", "dependencies": (), "devDependencies": ( "gulp": "viimeisin", "gulp-autoprefixer": "viimeisin", "gulp-connect": "uusin", "gulp-imagemin": "uusin", "jshint": "uusin", "jshint-stylish": "uusin", "gulp-jshint": "uusin", "gulp-minify-css": "uusin", "gulp-plumber": "uusin", "gulp-rename": "uusin", "gulp-rigger": "uusin", "gulp-sourcemaps": "uusin", "gulp-stylus": "uusin", "gulp-uglify": "uusin", "gulp-watch": "uusin", "gulp.spritesmith": "viimeisin", "rimraf": "uusin") )

Viimeisimpien sijaan sinun tapauksessasi määritetään asennettujen laajennusten versiot. Koska Luomme aloituspakettimme, jota käytetään monissa projekteissa, on myös suositeltavaa korvata versioarvot uusimmilla, jotta projektiin asennetaan aina uusimmat lisäosat.

Node_modules -hakemiston pitäisi myös näkyä projektikansiossa, joka tallentaa kaikki solmuliitännäiset tiedostot. Kaikki tarvittavat lisäosat on asennettu, voit siirtyä Gulp-asetusten asetuksiin.

Gulpfile.js:n määrittäminen

gulpfile.js- Tämä on tehtävähallinnan pääasetustiedosto, johon tallennamme kaikki asetukset ja komennot.

Kaikki Gulpin työ jää tehtävään ( Englanti tehtävä). Tehtävä on erillinen itsenäinen funktio, jolla on nimi. Jokainen tehtävä voidaan kutsua erikseen.

Yhteensopivuustila nykyaikaisten standardien kanssa

Ensinnäkin, otetaan tiedoston alussa käyttöön yhteensopivuustila vain nykyaikaisten standardien mukaisesti:

"käytä tiukkaa";

Saat lisätietoja tästä direktiivistä.

Alustetaan laajennusta

Pluginit alustetaan seuraavalla rakenteella:

var initPlugin = vaatia("laajennuksen-nimi");

Tämän suunnittelun mukaisesti alustamme kaikki laajennukset:

Var gulp = vaatia("gulp"), //main gulp plugin stylus = vaatia("gulp-stylus"), //esikäsittelykynän etuliite = vaatia("gulp-autoprefixer"), //automaattisten etuliitteiden järjestely cssmin = vaatia( " gulp-minify-css"), //css minification uglify = vaatia("gulp-uglify"), //js minification jshint = vaatia("gulp-jshint"), //js-virheen seuranta rigger = vaatia("gulp" -rigger"), //työskentely sisältää html:n ja js:n kanssa imagemin = vaatia("gulp-imagemin"), //kuvien minimointi spritesmith = demand("gulp.spritesmith"), //kuvien yhdistäminen spriteiksi rimraf = request( "rimraf"), //sourcemapsin puhdistaminen = vaatia("gulp-sourcemaps"), //lähdekartat rename = vaatia("gulp-rename"), //tiedostojen uudelleennimeäminen plumber = request("gulp-plumber"), // sulake lopettaa syöksy katsella = vaatia("gulp-watch"), //laajentuvat ominaisuudet katsella connect = vaatia("gulp-connect"); //livereload

Polun vakiot

Mukavuuden vuoksi määritellään välittömästi kaikki polut ja maskit:

Var path = ( build: ( //Tässä osoitamme mihin tiedostot laitetaan valmiiksi kokoonpanon jälkeen html: "build/", js: "build/js/", css: "build/css/", img: "build/ css/ images/", fontit: "build/fonts/", htaccess: "build/", contentImg: "build/img/", sprites: "src/css/images/", spritesCss: "src/css/partial /" ), src: ( //Potut, mistä lähteet saa html: "src/template/*.html", //Syntaksi src/template/*.html kertoo gulpille, että haluamme ottaa kaikki tiedostot laajennus .html js: "src/ js/[^_]*.js",//Tyyleissä ja skripteissä tarvitsemme vain päätiedostoja jshint: "src/js/*.js", css: "src/css/styles .styl", cssVendor: "src /css/vendor/*.*", //Jos haluamme tallentaa kirjastotiedostot erikseen, poista img-rivin kommentit: "src/css/images/**/*.*", //Syntaksi img/**/*.* tarkoittaa - ota kaikki tiedostot kansiosta ja alihakemistoista fontit: "src/fonts/**/*.*", contentImg: "src/img/**/ *.*", sprites: "src/css/ sprites/*.png", htaccess: "src/.htaccess" ), katso: ( //Tässä ilmoitamme, mitä tiedostoja haluamme tarkkailla muutosten varalta html: "src/ template/**/*.html", js: "src/js/**/*.js", css: "src/css/**/*.*", img: "src/css/images/* */*.*", contentImg: "src/ img/**/*.*", fontit: "src/fonts/**/*.*", htaccess: "src/.htaccess", sprites: "src /css/sprites/*.png" ), clean : "./build", //puhdistettavat hakemistot outputDir: "./build" //alkujuurihakemisto minipalvelimen käynnistämiseen );

Huomaa, että voimme käyttää nimimaskeja:

• *.js- kaikki tiedostot js-tunnisteella
• [^_]*.js- kaikki tiedostot, joissa on js-tunniste, pois lukien alaviivalla alkavat tiedostot
• *.* - kaikki tiedostot, joilla on millä tahansa tunniste nykyisessä hakemistossa
• /**/*.html- kaikki tiedostot, joiden tunniste on .html nykyisessä hakemistossa ja kaikki alahakemistot

Tehtävä

Nyt kun kaikki vakiot on kirjoitettu, voit aloittaa tehtävien kirjoittamisen. Kaikilla tehtävillä on seuraava rakenne:

Gulp.task("tehtävänNimi", function())( //jotkut funktiot ));

Mini-palvelin ja LiveReload

Ensinnäkin määritämme paikallisen palvelimen ja LiveReloadin:

// Paikallinen kehityspalvelin gulp.task("connect", function())( connect.server(( //aseta palvelimen asetukset root: , //juurihakemisto palvelimen portin suorittamiseen: 9999, //mikä portti käyttää livereloada: true //alustaa LiveReloadin työ )); ));

Todennäköisesti joudut usein työskentelemään useissa projekteissa samanaikaisesti. Palvelimella voit käyttää useita palvelimia samanaikaisesti, sinun tarvitsee vain rekisteröidä oma portti eri projekteja varten.

Rakenna HTML

// tehtävä HTML:n rakentamiseen gulp.task("html:build", function () ( gulp.src(path.src.html) // Valitse tiedostot halutun polun varrelta.pipe(rigger()) // Suorita se läpi rigger . pipe(gulp.dest(path.build.html)) //lataa ne koontikansioon .pipe(connect.reload()) //Ja käynnistä palvelimemme uudelleen päivityksiä varten ));

Rakenna JS

// tarkista js:n virheiden varalta ja tulosta ne konsoliin gulp.task("jshint:build", function() ( return gulp.src(path.src.jshint) //valitse tiedostot haluttua polkua pitkin.pipe(jshint( )) //suorita se jshint .pipe(jshint.reporter("jshint-stylish")) kautta); //tyylivirhe tulos konsoliin )); // JavaScript-rakennus gulp.task("js:build", function () ( gulp.src(path.src.js) // Etsi päätiedostomme.pipe(rigger()) // Suorita se rigger .pipe( sourcemaps .init()) //Alusta lähdekartta .pipe(uglify()) //Pakkaa js .pipe(sourcemaps.write()) //Kirjoita maps.pipe(rename((suffix: ".min"))) / /lisää loppuliite.min tulostetiedostoon.pipe(gulp.dest(path.build.js)) //lataa valmis tiedosto rakentaaksesi .pipe(connect.reload()) //Ja käynnistä palvelin uudelleen )) ;

Sprite rakentaa

Kaikki spriteiksi yhdistettävät kuvat sijoitetaan src/css/sprites/-hakemistoon ja Gulpin läpi ajettuaan niistä tulee yksi sprite-kuva. Älä laita logoja ja taustoja spriteihin ilman selkeitä mittoja.

// rakentaa sprites gulp.task("sprites:build", funktio () ( var spriteData = gulp.src(path.src.sprites) // valitse mistä saa kuvat yhdistettäväksi sprite.pipe(spritesmith(( imgName) : " sprite.png", //sprite-kuvan nimi cssName: "sprite.styl", //tyylin nimi, johon tallennamme kuvien sijainnit spriten imgPath: "images/sprite.png", / /polku, jossa sprite on cssFormat: "stylus", //muoto, jossa käsittelemme paikkoja cssTemplate: "stylus.template.mustache", //maskitiedosto cssVarMap: function(sprite) ( sprite.name = "s-" + sprite.name //kunkin spriten nimi koostuu tiedoston nimestä ja nimen alussa olevasta rakenteesta "s-" ) ))); spriteData.img.pipe(gulp.dest(path.build.sprites) ); // polku johon tallennamme kuvan spriteData.css.pipe(gulp.dest(polku .build.spritesCss)); // polku johon tallennamme tyylit ));

Jos haluat näyttää spriten, käytä vain mikseriä. Esimerkiksi tiedostolle lorem.png valinta spritesta näyttää tältä:

Lorem sprite ($s-lorem)

Nyt objekti, jonka luokka on .lorem, ottaa kuvan mitat ja itse kuvan taustana.

Rakenna staattisia kuvia

Staattiset kuvat ovat asettelumallissa käytettyjä kuvia.

// rakentaa staattisia kuvia gulp.task("image:build", function () ( gulp.src(path.src.img) //Valitse kuvat.pipe(imagemin(( //Pakkaa ne progressiivisesti: true, // compression.jpg svgoPlugins: [(removeViewBox: false)], //compression.svg lomitettu: tosi, //compression.gif optimointitaso: 3 //pakkausaste välillä 0-7 ))) .pipe(gulp.dest(polku. build.img)) //lataa rakennukseen .pipe(connect.reload()) //käynnistä palvelin uudelleen ));

Luo dynaamisia kuvia

Dynaamiset kuvat ovat sisältökuvia, jotka muuttuvat sivustolla ja sisällytetään mallitasolla vain esittelyä varten. Nämä voivat olla esimerkiksi kuvia uutisia varten jne.

// luo dynaamisia kuvia gulp.task("imagescontent:build", function() ( gulp.src(path.src.contentImg) .pipe(imagemin(( //Pakkaa ne progressiivisesti: true, //compression.jpg svgoPlugins: [(removeViewBox: false)], //compression.svg lomitettu: tosi, //compression.gif optimointitaso: 3 //pakkausaste 0 - 7 ))) .pipe(gulp.dest(path.build.contentImg)) //lataa rakentaaksesi .pipe(connect.reload()) //käynnistä palvelin uudelleen ));

Rakenna CSS

// mukautetun css:n rakentaminen gulp.task("cssOwn:build", toiminto () ( gulp.src(path.src.css) //Valitse päätyylitiedostomme.pipe(sourcemaps.init()) //initialize soucemap . pipe(stylus(( pakkaus: tosi, "include css": true ))) //Käännä kynä .pipe(prefixer(( selain: ["viimeinen 3 versio", "> 1%", "eli 8", "eli 7"] ))) //Lisää toimittajan etuliitteet.pipe(cssmin()) //Compress.pipe(sourcemaps.write()) //kirjoita lähdekartta .pipe(rename((pääte: ".min"))) / /lisää loppuliite.min tulostiedoston nimeen.pipe(gulp.dest(polku.build.css)) //lataa rakentaaksesi .pipe(connect.reload()) //käynnistä palvelin uudelleen ));

Erillinen tehtävä ulkoisille tyyleille:

// rakennustoimittaja css gulp.task("cssVendor:build", funktio () ( gulp.src(path.src.cssVendor) // Ota toimittajakansio .pipe(sourcemaps.init()) //initialize soucemap .pipe ( cssmin()) //Compress.pipe(sourcemaps.write()) //kirjoita lähdekartta .pipe(gulp.dest(path.build.css)) //lataa rakennukseen .pipe(connect.reload()) / / käynnistä palvelin uudelleen))

Lisätään myös tehtävä yleisen CSS:n rakentamiseen:

// rakentaa koko css gulp.task("css:build", [ "cssOwn:build", // "cssVendor:build" ]);

Jos haluat käsitellä ulkoisia tyylejä erillään kotityyleistä ja lähettää ne erillisinä tiedostoina, sinun on poistettava kommentit riviltä "cssVendor:build".

Fontin rakentaminen

// rakentaa kirjasimia gulp.task("fonts:build", function() ( gulp.src(polku.src.fonts) .pipe(gulp.dest(polku.build.fonts)) //lataa rakentamiseen ));

Build.htaccess

// rakentaa htaccess gulp.task("htaccess:build", function() ( gulp.src(polku.src.htaccess).pipe(gulp.dest(polku.build.htaccess)) //lataa rakentamiseen ));

Yleinen rakenne

Jotta meidän ei tarvitsisi rakentaa jokaista osaa erikseen, kirjoitetaan tehtävä yleisrakennukselle:

// rakentaa kaikki gulp.task("build", [ "html:build", "jshint:build", "js:build", "sprites:build", "css:build", "fonts:build", " htaccess:build", "image:build", "imagescontent:build" ]);

Rakennuksen siivoaminen

Joskus sinun on siivottava rakennushakemisto kokonaan. Tässä avuksemme tulee seuraava tehtävä:

// puhdista koontikansio gulp.task("clean", function (cb) ( rimraf(path.clean, cb); ));

Katso tai seuraa muutoksia reaaliajassa

Yksi Gulpin tärkeimmistä ja hyödyllisimmistä toiminnoista on kellotoiminto, jonka avulla voit seurata reaaliajassa kaikkia tuotettujen tiedostojen muutoksia ja suorittaa tästä riippuen tiettyjä toimintoja:

// watch gulp.task("watch", function())( //build html, jos change watch(, function(event, cb) ( gulp.start("html:build"); )); // rakentaa sprites tapauksessa change watch(, function(event, cb) ( gulp.start("sprites:build"); )); //build kontekstuaalisia kuvia, jos change watch(, function(event, cb) ( gulp .start(" imagescontent:build"); )); //build css, jos change watch(, function(event, cb) ( gulp.start("css:build"); )); //tarkista js case of change watch(, ["jshint"]); //build js tapauksessa change watch(, function(event, cb) ( gulp.start("js:build"); )); //build staattisia kuvia in case of change watch(, function (event, cb) ( gulp.start("image:build"); )); //build fonts case of change watch(, function(event, cb) ( gulp.start( "fonts:build"); )) ; //build htaccess, jos change watch(, function(event, cb) ( gulp.start("htaccess:build"); )); ));

Oletustoiminnot

Oletustoiminnot ovat tehtäviä, jotka tehtävänhallinta suorittaa, kun syötät gulp-komennon konsoliin:

// oletustoiminnot gulp.task("default", ["build", "watch", "connect"]);

Meidän tapauksessamme, kuten tavallista, rakennamme projektimme, otamme katselutilan käyttöön ja käynnistämme palvelimen.

Komentorivin komennot

Kaikki komentorivin gulp-komennot koostuvat kahdesta osasta: itse gulp-komennosta ja välilyönnillä erotettuna tehtävän nimestä. Tässä on luettelo kokoonpanoomme sovellettavista komennoista:

• gulp - pääkomento, käynnistää oletustehtävän
• gulp build - rakenna kaikki
• gulp watch - laukaisukello
• gulp clean - puhdistaa rakennushakemiston
• gulp connect - käynnistä palvelin
• gulp html:build - HTML-koonti
• gulp jshint:build - tarkista JS virheiden varalta
• gulp js:build - JS build
• gulp sprites:build - sprite build
• gulp image:build - rakentaa staattisia kuvia
• gulp imagecontent:build - luo dynaamisia kuvia
• gulp cssOwn:build – mukautettu CSS-koonnos
• gulp cssVendor:build - rakenna ulkoinen CSS
• gulp css:build - yleinen CSS-versio
• gulp fonts:build - fontin rakentaminen
• gulp htaccess:build - build.htaccess

Tässä vaiheessa gulpfile.js:n määritys on valmis.

Kopioi aloituspaketti projektiin

Käydään ensin läpi konsoli siinä kansiossa, jossa kehitämme, esimerkiksi cd development/example ja kopioidaan kaikki aloituspakettihakemistosta projektiimme cp -a ~/develop/start/. ~/kehittää/esimerkki/

Tämä kopiointitapa on kätevin, koska... kopioi tarkasti kaiken, mukaan lukien piilotetut tiedostot.gitignore jne.

Johtopäätös

Tämän oppaan avulla olemme laatineet aloituspaketin Gulpin käyttöön Front-end-kehitysprojekteissamme.

Tämä paketti on saatavilla myös GitHubissa

Jälkikirjoitus

Tämä artikkeli ei ole lopullinen, ja sitä päivitetään muutosten ja parannusten mukaan.