Vaizdų, JS ir CSS failų glaudinimas, siekiant optimizuoti tinklalapių įkėlimą ir dar daugiau. Norėdami supaprastinti šį procesą, siūlome naudoti „Gulp 4“ projektą, kurį Andrejus Gorokhovas nuolat tobulina. Atsisiuntimo nuorodos bus pateiktos žemiau, tačiau kol kas pereikime prie pagrindinių dalykų: aprašymas ir diegimas.

„Gulp“ projekto kūrėjas

Gulp yra projektų kūrėjas, įrankis, skirtas automatizuoti aukščiau aprašytas užduotis. Tai padės paspartinti jūsų darbą ir kompetentingai paruošti projektą leidimui.

Galite atsisiųsti surinkimą iš „Github“ saugyklos arba naudodami „Git“ komandinę eilutę. Ateityje galėsite pritaikyti jį pagal savo poreikius.

Ypatumai

• BEM klasės įvardijimas
• Naudojama BEM struktūra
• Naudojamas SCSS pirminis procesorius
• naudoja Babel transpilerį, kad palaikytų šiuolaikinį JavaScript (ES6) naršyklėse
• „Webpack“ naudoja „JavaScript“ moduliams kurti
• CSS-grid išmanusis tinklelis, pagrįstas Bootstrap, naudojamas greitai prisitaikančiam išdėstymui
• naudojamas kietasis kodas

Montavimas

• įdiekite NodeJS (jei reikia) ir verpalus
• atsisiųskite versiją naudodami „Git“: git klonas https://github.com/andreyalexeich/gulp-scss-starter.git
• įdiegti gulp globally: yarn global pridėti gulp-cli
• eikite į atsisiųstą kūrimo aplanką: cd gulp-scss-starter
• atsisiųskite reikiamas priklausomybes: verpalai
• Norėdami pradėti, įveskite komandą: yarn run dev (kūrimo režimas)
• Norėdami sukurti projektą, įveskite verpalų paleisti build (kūrimo režimas)

Jei viską padarėte teisingai, turite atidaryti naršyklę su vietiniu serveriu. Sukūrimo režimas apima projekto optimizavimą: vaizdo glaudinimą, CSS ir JS failų sumažinimą įkėlimui į serverį.

Jei kyla problemų diegiant, žiūrėkite šį vaizdo įrašą:

Failo struktūra

gulp-scss-starter ├── dist ├── gulp-tasks ├── src │ ├── blokai │ ├── šriftai │ ├── šriftai │ ├── │ ─── im ── stiliai │ ├── rodiniai │ └── .htaccess ├── gulpfile.babel.js ├── webpack.config.js ├── package.json ├── .babelrc.js .j.tb .eslin . ├─ ─ .stylelintrc ├── .stylelintignore └── .gitignore

• Aplanko šaknis:
  • .babelrc.js – „Babel“ nustatymai
  • .bemrc.js – BEM nustatymai
  • .eslintrc.json – ESLint nustatymai
  • .gitignore – neleiskite Git sekti failų
  • .stylelintrc – Stylelint nustatymai
  • .stylelintignore – neleiskite Stylelint sekti failų
  • gulpfile.babel.js – Gulp nustatymai
  • webpack.config.js – žiniatinklio paketo nustatymai
  • package.json – priklausomybių sąrašas
• src aplankas – naudojamas kuriant:
  • BEM blokai: src/blocks
  • šriftai: src/fonts
  • vaizdai: src/img
  • JS failai: src/js
  • svetainės puslapiai: src/views/pages
  • SCSS failai: src/styles
  • HTML failai: src/views
  • Apache žiniatinklio serverio konfigūracijos failas su gzip nustatymais (be nuostolių glaudinimas): src/.htaccess
• Dist aplankas yra aplankas, iš kurio paleidžiamas vietinis kūrimo serveris (kai paleidžiama yarn run dev)
• gulp-tasks aplankas - aplankas su Gulp-tasks

Komandos

• yarn run lint:style – patikrinkite SCSS failus. „VSCode“ reikalauja, kad papildinys būtų įdiegtas. „WebStorm“ arba „PHPStorm“ „Stylelint“ turi būti įjungta skiltyje „Kalbos ir rėmeliai“ – „Style Sheets“ – „Stylelint“ (klaidos bus ištaisytos automatiškai, kai failas bus išsaugotas)
• yarn run lint:style --fix – ištaisykite klaidas SCSS failuose
• yarn run dev – paleiskite serverį projekto vystymui
• yarn run build – sukurkite projektą su optimizavimu nepaleidę serverio
• yarn run build view - kompiliuokite Pug failus
• yarn run build styles – kompiliuokite SCSS failus
• yarn run build skriptai – kurkite JS failus
• yarn run build images - build images
• yarn run build webp – konvertuoti vaizdus į .webp formatą
• yarn run build sprites - rink sprites
• yarn run build fonts – kurti šriftus
• yarn run build favicons - build favicons
• yarn run build gzip – kurti Apache konfigūraciją

Komponentinis požiūris į svetainės kūrimą

• Kiekvienas BEM blokas turi savo aplanką src/blocks/modules viduje
• vieno BEM bloko aplanke yra vienas HTML failas, vienas SCSS failas ir vienas JS failas (jei blokas naudoja scenarijų)
  • Bloko HTML failas importuojamas į src/views/index.html failą (arba į reikiamą puslapio failą, iš kurio bus iškviestas blokas)
  • Bloko SCSS failas importuojamas į src/blocks/modules/_modules.scss failą
  • JS bloko failas importuojamas į src/js/import/modules.js

Aplanko struktūros su BEM bloku pavyzdys:

Blokai ├── moduliai │ ├──header │ │ ├── header.html │ │ ├── header.js │ │ ├──sss antraštė.

Kad nereikėtų rankiniu būdu sukurti atitinkamo aplanko ir failų, pakanka konsolėje parašyti komandą bem create my-block - sukurti BEM bloko aplanką, kur mano blokas yra BEM bloko pavadinimas.

Projekto puslapiai

• projekto puslapiai yra aplanke src/views/pages
  • pagrindinis puslapis: src/views/index.html

Šriftai

• šriftai yra aplanke src/fonts
  • naudoti .woff ir .woff2 formatus
  • šriftai yra įtraukti į src/styles/base/_fonts.scss failą
  • naudodamiesi šia paslauga galite konvertuoti vietinius šriftus

Vaizdai

• vaizdai yra src/img aplanke
  • Favicon generavimo vaizdas turi būti aplanke src/img/favicon ir jo dydis turi būti bent 1024px 1024px
  • vaizdai automatiškai konvertuojami į .webp formatą. Išsami informacija apie naudojimą.

Trečiųjų šalių bibliotekos

• visos trečiųjų šalių bibliotekos yra įdiegtos aplanke node_modules
  • Norėdami juos įkelti, naudokite komandą yarn add package_name
  • Norėdami įtraukti bibliotekų JS failus, importuokite juos pačioje BEM bloko JS failo pradžioje (ty BEM bloko, kurį naudoja scenarijus), pavyzdžiui:

  importuoti $iš jquery;

  • norėdami įtraukti bibliotekos stiliaus failus, importuokite juos į src/styles/vendor/_libs.scss failą
  • JS failai ir bibliotekų stiliaus failai negali būti keičiami atskirai

⚠️ Jei jūsų projektas naudoja kelias bibliotekas, kurias reikia įtraukti į kelis puslapius, kad išvengtumėte klaidų, turite:

• kelyje src/js/import sukurkite aplanko puslapius
• puslapių aplanke sukurkite puslapio js failą, pvz., pageA.js , ir importuokite ten biblioteką, kuri bus naudojama tik šiame puslapyje
  • Atlikite tą patį veiksmą su papildomu puslapiu
• faile webpack.config.js prie įvesties taško pridėkite puslapio js failus, pavyzdžiui:

Įėjimas: (pagrindinis: "./src/js/index.js", A puslapis: "./src/js/import/pages/pageA.js", B puslapis: "./src/js/import/pages/pageB.js" }

• įtraukti sukompiliuotus js failus į reikiamus puslapius

CSS smart-grid

Maišytuvas apima Dmitrijaus Lavriko išmaniojo tinklo CSS. Tai leidžia atsikratyti nereikalingų žymėjimo klasių naudojant SCSS maišytuvus ir pagreitina adaptyvų išdėstymą. Konfigūracija jau nustatyta pagal Bootstrap tinklelį. Naudojimo pavyzdys:

Elementai ( @include row-flex (); @include md (justify-content , center ); .item ( @include col (); @include size (3 ); @include size-md (5 ); @include size- xs(10); ) )

rugsėjo 24 d , 2016

Bus nagrinėjamos šios temos: darbas su sass stiliais naudojant šaltinio žemėlapius, js failų klijavimas ir glaudinimas, js failų kūrimas su rjs, išankstinis html apdorojimas, failų valymas ir kopijavimas, vaizdų optimizavimas, vietinio žiniatinklio serverio pakėlimas ir žiūrėjimo režimas – žiūrėjimo užduotys. Sveiki atvykę į straipsnį, bus daug įdomių dalykų!
P.S. Medžiagos yra daug, todėl straipsnis bus suskirstytas į 3 dalis: surinkimo pagrindai ir projekto organizavimas, bandomosios programos parašymas Backbone + Require.js ir faktinis kūrimas su gurkšniu.

Kodėl jums reikia sukurti priekinę dalį.

Vienas iš svarbiausių kūrimo principų yra moduliškumas. Projekto kodo padalijimas į daugybę mažų, idealiai laisvai sujungtų dalių-modulių. Tai taikoma kur kas daugiau nei tik javascript kodui. Tai taikoma stiliams ir html šablonams įvairioms bibliotekoms.

Paprastos programos, parašytos „Backbone + Require“, struktūra gali atrodyti maždaug taip.

Ir tai yra mažas bandomasis projektas, tikroje programoje gali būti šimtai ir tūkstančiai failų. Versti vartotojo naršyklę pateikti šimtus http užklausų yra bent jau nežmoniška. Turime užtikrinti greičiausią mūsų parašytos paslaugos įkėlimą. Todėl vienas svarbiausių kūrimo įrankių uždavinių yra minifikavimas, projekte naudojamų failų skaičiaus mažinimas, suklijavimas į ryšulius. Išvestyje turėtume turėti glaustesnę struktūrą, pavyzdžiui, tokią:

Skirtumas aiškiai matomas: vietoje dešimčių failų turime vieną index.html, vieną css failą, optimizuotus ir suglaudintus vaizdus atskirame aplanke, nors ekrano kopijoje to nematyti :-)

Ir taip pat įdomiausia: js aplanke gavome tik 3 suspaustus failus.
P.S. Kodėl trys, o ne vienas, pasakysiu vėliau.
Atminkite, kad tai yra tikroji bandomosios programos struktūra, kurią netrukus parašysime.

Aprašiau tik vieną priežastį, kodėl reikia naudoti kūrimo įrankius, bet to pakanka, kad savo projektuose pradėtumėte naudoti „gulp“, „grunt“, „webpack“ ar pan. Ir nesvarbu, ar rašome didžiulę paslaugą, nedidelį SPA (kaip mūsų straipsnyje) ar nukreipimo puslapį. Surinkimo principai yra vienodi visiems projektams ir skiriasi tik užduočių ir požiūrių į jų sprendimą įvairove. Savo pavyzdyje mes sukursime struktūrą, kurią ateityje bus galima bet kokiu būdu išplėsti, tačiau išvestis visada bus tvarkinga failų šūsnis, paruošta įpilti į jūsų gamybos – kovos vietą.

Kaip tinkamai organizuoti projektą.

Principas yra toks: yra skyrius su kūrėjo failais, yra su surinktais failais ir visa kita, ką ši medžiaga aptarnauja. Projekto šaknyje sukurkime 2 aplankus: src ir build. Src ir tik src dirbsime, kursime naujus failus, juos redaguosime ir apskritai linksminsimės. Aukščiau esančioje ekrano kopijoje, kurioje yra kelios dešimtys failų, tiksliai matėte mūsų bandomojo projekto src aplanko turinį. Ir tik žemiau yra keletas tvarkingų failų iš kūrimo aplanko. Jis formuojamas tik automatiškai, surinkimo įrankiais, nieko ten redaguoti nereikia. Bet kokiu atveju, su kiekvienu komplektu jo turinys perrašomas naujais failais (o kūrimo režime iš viso nėra kūrimo aplanko - jis ištrinamas, kad nebūtų skaudu)

Be src ir build, failai package.json, gulpfile.js, aplankas node_modules ir pasirinktinai .gitignore (jei dirbate su git) bus šaknyje. Vis dar matote žurnalų aplanką mano vietoje - tai apache produktas ir ilgalaikis įprotis laikyti projekto žurnalus savo aplanke, žinoma, neįtraukiant jo iš git saugyklos :-)

Štai kaip atrodo visa projekto struktūra:

Pagal build turinį, manau, klausimų nėra, apie src paaiškinsiu plačiau:

• 1. html – index.html, projekto šakninis indekso failas. Kodėl ne iš karto šaknyje src? Nes jis bus iš anksto apdorotas ir sukurtas gurkšnoti. Kaip, sužinosime šiek tiek vėliau, kai susitvarkysime su surinkimu.
• 2. img – vaizdai, nesuspausti, normalūs
• 3. js – visas projekto javascript judėjimas, Backbone modeliai ir rodiniai
• 4. lib – trečiųjų šalių bibliotekos, pvz., backbone.js, request.js, lodash.js ir kitos
• 5. skriptai – js scenarijai, kurie reikalingi gamybos vietoje, bet nereikalingi kūrimo režimu. Tai reiškia analizės, įvairių eksperimentų ir kitų rinkodaros dalių kodus.
• 6. stiliai - sass failai su stiliais. Surinktas css failas bus įtrauktas į tą patį aplanką (tik kūrimo režimui)
• 7. tpl – html šablonai. Naudojamas Backbone rodiniuose, naudojant reikalingą teksto papildinį

Bandomosios programos išvaizda yra gana negraži. Galima sakyti, kad toks mėšlas daromas naudojant kelias html ir css kodo eilutes be vieno js failo.
Tačiau mūsų tikslas yra ne nupiešti gražų paveikslą, o sukurti patikimą projekto struktūrą ir atsižvelgti į kuo daugiau surinkimo aspektų. Kai projektas išaugs iki šimtų failų, būsime pasiruošę šiai nelaimei ir nesunkiai susitvarkysime su išaugusiais kiekiais. Todėl, nepaisant bandomosios programos mažumo ir išorinio apgailėtinumo, mes išmoksime surinkimo principus dideliems ir sudėtingiems projektams.

Kokias surinkimo užduotis spręsime.

Leiskite jums priminti, kad susitarėme dėl dviejų kūrimo režimų: kūrimo ir gamybos. Visas užduotis rašysime turėdami omenyje šiuos du režimus. Kūrimo procese reikalingos ne visos operacijos ir ne visos gamybos surinkimo metu.

Štai sąrašas, ką darysime parašę bandomąją paraišką:

• 1. Išvalykite failus ir aplankus iš ankstesnės versijos rezultatų
• 2. CSS kūrimas iš sass failų su glaudinimu ir be jo
• 3. Šaltinio žemėlapių prijungimas prie stilių, tuo pačiu pavyzdžiu parodysiu kam to reikia
• 4. „js“ paketo su „reievejs“ kūrimas
• 5. Atskirų js failų klijavimas ir suspaudimas (analizė)
• 6. HTML išankstinis apdorojimas
• 7. Vaizdo optimizavimas ir suspaudimas
• 8. Vietinio žiniatinklio serverio pakėlimas
• 9. Failų stebėjimo užduotys dirbant kūrimo režimu – žiūrėti-užduotys
• 10. Atskirų užduočių surinkimas į krūvą - baigiamosios gamybos-montavimo ir tobulinimo-darbo užduotys

Taigi, aptarėme, kodėl išvis reikia statyti frontendą, apsisprendėme dėl projekto struktūros, detaliai išanalizavome, ko norime iš pastatymo, ir bendrai kalbėjome apie bandomąją programą. Kitoje straipsnio dalyje parašysime paprastą Backbone programą kartu su Require.js. Jei nesate susipažinę su Backbone ir (arba) Require.js, nėra ko jaudintis. Iš tikrųjų programoje nėra pakankamai pagrindinio kodo. Vietoje to galite lengvai naudoti savo mėgstamą biblioteką arba tiesiog parašyti javascript/jquery kodą ir praleisti „reidyjs“ konfigūracijos skyrių.

Šiame vadove pateikiamas naudingų ir dažniausiai naudojamų priekinių įrankių aprašymas. Sužinosite įrankių diegimo procesą ir pagrindinius darbo su jais punktus.

NPM

Įvadas

Kuriant projektą dažnai reikia pridėti trečiųjų šalių bibliotekų ir papildinių. Dėl to kūrėjas turi ieškoti reikiamos priklausomybės, atsisiųsti, išpakuoti archyvą ir nukopijuoti failus į projektą. Paketų tvarkytojai padės automatizuoti šį įprastą darbą.

paketo valdytojas- programinė įranga, leidžianti valdyti įvairių komponentų diegimo, pašalinimo, konfigūravimo ir atnaujinimo procesą.

Trečiųjų šalių bibliotekų pridėjimas naudojant paketų tvarkyklę pakeičiamas keliomis komandomis terminale.

Vienas iš paketų tvarkytuvų, naudojamų frontend projektuose, yra NPM.

npm(Node.js Package Manager) yra paketų tvarkyklė, įtraukta į Node.js. Naudojamas paketams atsisiųsti iš npm debesies serverio arba paketams įkelti į šį serverį.

Oficiali svetainė

Darbo pradžia

Norėdami įdiegti npm, turite atsisiųsti ir įdiegti NodeJS (npm bus įdiegtas automatiškai): https://nodejs.org/en/.

Naudojimas

Paketų diegimas

Paketas yra vienas ar daugiau „JavaScript“ failų, atspindinčių tam tikrą biblioteką ar įrankį. Norėdami įdiegti paketą naudodami npm, paleiskite šią komandą:

npm diegimas<название пакета>

Raktas naudojamas paketui įdiegti visame pasaulyje -g. Po įdiegimo paketas kartu su šaltiniais yra kataloge node_modules/.

Versijos patikrinimas

Norėdami patikrinti dabartinę npm versiją, turite paleisti komandą:

Konfigūracijos failo nustatymas

Failas package.json yra informacijos apie jūsų programą: pavadinimas, versija, priklausomybės ir kt. Bet kuris katalogas, kuriame yra šis failas, yra interpretuojamas kaip Node.js paketas.

Norėdami sukurti failą package.json reikia paleisti komandą:

npm init

Po to turėsite užpildyti tam tikrą informaciją apie projektą.

Šiame faile bus saugomi visų projekte reikalingų paketų pavadinimai ir versijos. Su komanda npm diegimas galite atsisiųsti visus paketus, kurie yra package.json.

Norėdami įdiegti tam tikrą paketą ir automatiškai išsaugoti jį faile package.json, naudokite komandą:

npm diegimas<название пакета>--save-dev

Alternatyvos

Verpalai

Ypatumai

• Sukurti žiniatinklio serverį ir automatiškai įkelti puslapį naršyklėje išsaugant kodą, sekti projekto failų pakeitimus.
• Naudojant įvairius JavaScript, CSS ir HTML pirminius procesorius (CoffeeScript, Less, Sass, Stylus, Jade ir kt.).
• CSS ir JS kodų sumažinimas, taip pat atskirų projekto failų optimizavimas ir sujungimas į vieną.
• Automatinis tiekėjo prefiksų (priedėlių prie CSS ypatybių pavadinimų, kuriuos naršyklės gamintojai prideda nestandartinėms savybėms) kūrimas CSS.
• Tvarkykite projekto failus ir aplankus – kurkite, ištrinkite, pervardykite.
• Operacinės sistemos išorinių komandų paleidimas ir vykdymo stebėjimas.
  Darbas su vaizdais – glaudinimas, sprite kūrimas, dydžio keitimas (png, jpg, svg ir kt.).
• Įdiegti (išsiųsti į išorinį serverį) projektą per FTP, SFTP ir kt.
  Be galo daug Node.js ir Gulp paslaugų, programų ir papildinių prijungimas ir naudojimas projekte.
• Įvairių projektų žemėlapių kūrimas ir kito rankinio darbo automatizavimas.

Darbo pradžia

Sistemoje turi būti įdiegti NodeJS ir npm.

1 žingsnis: Norėdami įdiegti GulpJS visame pasaulyje naudodami npm paketų tvarkyklę, paleiskite šią komandą:

npm įdiegti gulp -g

2 žingsnis: Turite jį įdiegti programai:

npm install --save-dev gulp

Papildomų įskiepių, kuriuos galima naudoti kuriant projektą, įkėlimas taip pat atliekamas naudojant npm su šia komanda:

npm diegimas<название плагина>--save-dev

Visi įdiegti papildiniai yra kataloge mazgas_moduliai/.

Naudojimas

1 žingsnis: Pirmiausia reikia prisijungti gurkšnoti prie projekto. Už tai faile gulpfile.js parašyk eilutę:

var gulp = reikalauti("gulp");

Funkcija reikalauti () leidžia prijungti priedus iš aplanko node_modules/.

2 žingsnis: Su kintamuoju gurkšnoti galite sukurti užduotis, kad sukurtumėte projektą:

Gulp.task("pavyzdysUzduotis", function() ());

Metodas užduotis turi du parametrus: pavadinimą ir funkciją su užduoties turiniu.
Ši instrukcija jau prieinama. Norėdami tai padaryti, konsolėje parašykite:

Gulp pavyzdysUžduotis

Pagrindinės komandos

Žemiau pateikiamas sudėtingesnis teiginio pavyzdys:

Gulp.task("exampleTask", function () ( return gulp.src("šaltinio failai") .pipe(plugin()) .pipe(gulp.dest("aplankas")); ));

Išanalizuokime šiame pavyzdyje naudojamas komandas:

• gulp.src- projekto šaltinio failų parinkimas apdoroti papildiniui;
• .pipe(plugin())- iškvieskite Gulp įskiepį, kad apdorotumėte failą;
• .pipe(gulp.dest('aplankas')) – išveskite gautą failą į paskirties aplanką.

Failų kaukės

Funkcija gulp.src naudoja failo kaukę kaip parametrą. Kaukių pavyzdžiai:

• ./ – esamas katalogas;
• ../ – pirminis katalogas;
• js/index.js- js aplanke esantį failą index.js;
• js/*.js- visi failai su plėtiniu js aplanke js;
• js/**/*.js- visi failai su plėtiniu js, esantys js aplanke ir jo pakatalogiuose;
• !js/*.js– failų su plėtiniu js išskyrimas aplanke js.

srautai

Siūlų naudojimas yra vienas iš svarbiausių GulpJS privalumų.

Srautai leidžia nuosekliai perduoti kai kuriuos duomenis iš vienos funkcijos į kitą, kurių kiekviena atlieka tam tikrą veiksmą su šiais duomenimis.

Funkcija gulp.src() sukuria objektų srautą, vaizduojantį failus, kurie jam perduodami kaip parametras. Toliau naudokite funkcijas vamzdis nutiestas dujotiekis, kuriuo perduodamas objektų srautas. Kaip parametras šiai funkcijai perduodamas įskiepis, kuris tam tikru būdu apdoroja objektų srautą.

Žemiau pateikiamas gijų naudojimo pavyzdys. Šiame pavyzdyje naudojami trečiųjų šalių įskiepiai. gulp-jshint Ir gurkšnoti,įdiegti ir prijungti gulpfile.js

Funkcija gulp.src paima failus pagal kaukę js/*.js. Paleidžia JSHint ir išveda rezultatą. Tada jis sujungia failus ir pabaigoje išsaugo gautą failą po sujungimo kataloge dist/.

Gulp.task("pavyzdys", funkcija () ( return gulp.src("js/*.js") .pipe(jshint()) .pipe(concat("index.js")) .pipe(gulp.dest ("dist")); ));

Trečiųjų šalių įskiepiai

Apsvarstykite trečiųjų šalių įskiepių naudojimo pavyzdį. Norėdami tai padaryti, sukursime js failo sujungimo instrukciją:

1 žingsnis: Pirmiausia turite įtraukti papildinį su reikalaujama komanda:

var concat = reikalauti("gulp-concat");

2 žingsnis: Tada turite sukurti užduotį, kad sujungtumėte failus su js plėtiniu, esančiu js/ kataloge. Pabaigoje gautas failas dedamas į dist/js katalogą:

Gulp.task("concat", funkcija () ( return gulp.src("js/*.js") .pipe(concat("index.js")) .pipe(gulp.dest("dist/js") ;)))

gurkšnoti concat

Papildoma informacija

Taip pat galite apibrėžti užduotį, kuri paskatins kitų užduočių vykdymą.

Gulp.task("build", ["html", "css"]);

Be to, yra metodas žiūrėti stebėti failų pakeitimus:

Gulp.watch("žiūrėtų failų kaukė", ["užduoties, kuri bus vykdoma pakeitus failus, pavadinimas"]);

IN gulpfile.js galite sukurti numatytąją užduotį:

Gulp.task("numatytasis", ["užduotis1", "2 užduotis"]);

Ši užduotis paleidžiama iš konsolės su komanda:

Pagrindiniai įskiepiai

• gulp-autoprefixer– automatiškai priešdėlius CSS ypatybes;
• gulp-browser-sync- sukuria ryšį, po kurio automatiškai atnaujina puslapį keičiant kliento ar net serverio failus;
• gulp-uncss- CSS failų optimizavimas. Papildinys analizuoja HTML kodą ir suranda visus nenaudojamus ir pasikartojančius stilius;
• gulp-csso- CSS minifieris;
• gulp-htmlmin– paprastas HTML minifieris;
• gulp-htmlužuomina– HTML tikrintuvas;
• gurkšnoti-šlykštėti– JavaScript minifier;
• gulp-concat– failų sujungimas;
• gulp-webserveris– leidžia kurti ir paleisti serverį;
• gulp-jshint– JS kodo kokybės tikrinimas;
• gurkšnis-jazminas– bėgioti jazminų testus;
• gulp-jsdoc- JSDoc dokumentacijos generavimas.

Visą Gulp įskiepių sąrašą galite rasti čia:
http://gulpjs.com/plugins/

Alternatyvos

GruntJS

Ypatumai

• Asinchroninio testavimo palaikymas.
• Galimybė eksponuoti stebėtojus (stebėtoją) ant skirtingų objektų.

Darbo pradžia

Norėdami prijungti Jasmine prie savo projekto, turite atsisiųsti biblioteką ir į pagrindinį HTML puslapį įtraukti šiuos failus:

• lib/jasmine-*/jasmine.js- pats karkasas;
• lib/jasmine-*/jasmine-html.js- rezultatų registravimas HTML forma;
• lib/jasmine-*/jasmine.css- testo rezultatų pasirodymas;
• SpecRunner.html- failas, kurį reikia atidaryti naršyklėje, kad būtų atlikti bandymai.

Sinchronizavimas su instrumentais

GulpJS

Jasmine gali būti įtrauktas į GulpJS projekto surinkimą:

1 žingsnis: Pirmiausia turite įdiegti papildinį gulp-jasmine:

npm įdiegti gulp-jasmine --save-dev

2 žingsnis: Tada turite įtraukti papildinį į kūrimo failą ir sukurti bandomojo paleidimo užduotį:

var jasmine = reikalauti("gulp-jazminas"); gulp.task("jasmine", function() ( gulp.src("bandymo failai") .pipe(jasmine()); ));

KarmaJS

(straipsnio pabaigoje darbas su šiuo įrankiu aprašytas išsamiau)

Norėdami prijungti Jasmine prie KarmaJS, jums reikia:

1 žingsnis:Įdiekite KarmaJS:

npm install -g karma-cli

2 žingsnis:Įdiekite papildinius, reikalingus norint atlikti „Jasmine“ parašytus testus „Chrome“ ir „PhantomJS“ naršyklėse:

npm įdiegti karma-jasmine karma-chrome-launcher karma-phantomjs-launcher

3 veiksmas:Įdiekite patį Jasmine:

npm įdiegti -g jasmine

4 veiksmas: Karmos konfigūracijos faile prijunkite priedus ir nustatykite kelią į testus.

Naudojimas

Raktažodžiai

• apibūdinti – testų rinkinio apibrėžimas;
• it – testo apibrėžimas;
• tikėtis – lūkesčių, kurie tikrinami teste, apibrėžimas.

Aprašymas ir jo funkcijos apima du parametrus: pirmasis yra pavadinimas, antrasis yra funkcija su kodu.

Pagrindinio testo pavyzdys

description("testo komplekto pavadinimas", funkcija () ( it("bandymo pavadinimas", funkcija ()) ( tikėtis(2+2).toBe(4; )); ));

Rezultatų tikrinimo metodai

• tikėtis().toBe()– kintamųjų lygybės tikrinimas (‘===’);
• tikėtis().ne.būti()– kintamųjų lygybės tikrinimas (‘!==’);
• tikėtis().tolygus()– kintamųjų ir objektų, įskaitant turinį, lygybės tikrinimas;
• tikėtis().toBeDefined()- patikrinti egzistavimą;
• tikėtis().toBeUndefined()– patikrinti, ar nėra;
• tikėtis().toBeNull()– kintamojo reikšmės nulio tikrinimas;
• tikėtis().toBeTruthy()- patikrinti tiesą;
• tikėtis().toBeFalsy()- patikrinti, ar nėra melagingų;
• tikėtis().toBeLessThan()– patikrinimas, ar vertė turi būti mažesnė už;
• tikėtis().toBeGreaterThan()– patikrinimas, ar vertė turi būti didesnė už;
• tikėtis().toBeCloseTo()– patikrinimas, ar reikšmė artima skaičiui;
• tikėtis().toMatch()– reguliariųjų reiškinių atitikimo tikrinimas;
• tikėtis().toContain()– patikrinti turinį masyve;
• tikėtis().Mesti()– išimties skambučio patikrinimas;
• tikėtis().toHaveBeenCalled()– funkcijų iškvietimo patikrinimas.

Papildomos funkcijos

Kad būtų išvengta testuose naudojamos logikos kopijavimo, naudojamos funkcijos prieš kiekvieną / po kiekvieno. Jie veikia atitinkamai prieš / po kiekvieno bandymo.

Funkcijos naudojamos asinchroniniams skambučiams tikrinti bėga Ir laukia.

• bėga- priima vykdyti asinchroninę funkciją;
• laukia- užima tris parametrus: pirmasis yra funkcija, kuri turėtų grįžti tiesa, jei async skambučio funkcija bėga buvo įvykdytas, antrasis yra klaidos pranešimas, trečiasis yra laukimas milisekundėmis.

description("asynchronous call test example", function () ( var rezultatas = 0; function asyncFunc()) ( setTimeout(function() ( rezultatas = rezultatas + 2; ), 500); ) it("testo pavadinimas", funkcija ( ) ( runs(function () ( asyncFunc(); )); waitsFor(function() ( grąžina rezultatą === 2; ), „vertė nepasikeitė“, 2000); )); ));

Stebėtojai

Galimybė sekti funkcijų skambučius atliekama naudojant šnipinėti. Šiai funkcijai reikalingi du parametrai: pirmasis yra objektas, kuriam funkcija iškviečiama, antrasis yra stebimos funkcijos pavadinimas.

If(“funkcijos iškvietimo testas”, funkcija () ( spyOn(exampleObject, "exampleFunction"); exampleObject.exampleFunction(); tikėtis(exampleObject.exampleFunction).toHaveBeenCalled(); ));

Kai išbandyta naudojant šnipinėti galite sekti skambučių skaičių, jų parametrus ir kiekvieną skambutį atskirai.

Norėdami sukurti funkciją be įgyvendinimo, galite naudoti CreateSpy. Funkcija CreateSpy atpažinti naudoja funkcijos pavadinimą.

If("funkcijos iškvietimo testas", funkcija () ( var example = createSpy("PAvyzdys"); example("param1", "param2"); tikėtis(pavyzdys.identify).toHaveBeenCalledWith("param1", "param2") ;tikėtis(pavyzdys.skambučių.ilgis).tolygus(1); ));

Stub objektas sukuriamas naudojant CreateSpyObj. Kaip parametrai CreateSpyObj paima objekto pavadinimą ir eilučių masyvą, kuris yra stub objekto metodų sąrašas.

Alternatyvos

Mocha

Naudojimas

Dokumentacija generuojama iš šaltinio kodo komentarų.

Šiame straipsnyje apžvelgsime Gulp aplinkos pavyzdį, kuris gali būti naudojamas patogiam žiniatinklio projekto priekiniam kūrimui. Šis pavyzdys pagal numatytuosius nustatymus sukonfigūruotas svetainėms ir žiniatinklio programoms kurti remiantis „Bootstrap 4“ sistema.

Šiame straipsnyje aptariamas projektas yra priglobtas Github adresu: https://github.com/itchief/gulp-project-bootstrap-4

Šio straipsnio vaizdo įrašas:

„Gulp“ aplinkos įrengimo instrukcijos

Norėdami sukurti aplinką, turite įdiegti šias programas:

• "Node.js" (iš šio puslapio galite atsisiųsti savo operacinei sistemai skirtą "Node.js" diegimo programą ; projektui reikalinga bent 10 versija );
• „Gulp“ („Gulp“ galite įdiegti konsolėje vykdydami šią komandą: npm install -g gulp-cli).

Kitas žingsnis yra įdiegti npm paketus ir jų priklausomybes. Norėdami tai padaryti, konsolėje (turi būti projekto šakniniame kataloge) turite paleisti komandą:

npm diegimas

Ši komanda įdiegs visus paketus, reikalingus tiek pačiai aplinkos darbui, tiek frontendui. npm šiuos veiksmus atlieka pagal instrukcijas, įrašytas faile "package.json".

Kai naudojate pirmąją projekto versiją (1.0.0), kuri naudoja Bower paketų tvarkyklę, turite paleisti kitą komandą:

Bokerio montavimas

Ši programa įdiegs „bower.json“ faile nurodytus frontend paketus.

Kaip naudotis Gulp aplinka?

Atidarykite komandų eilutę (kelias turi nukreipti į projekto šakninį aplanką) ir įveskite gulp (įprastas režimas):

Įvedus šią komandą prasidės numatytoji užduotis, t.y. "numatytas". Ši užduotis savo ruožtu vykdys daugybę kitų užduočių: „kurti“, „žiniatinklio serveris“ ir „žiūrėti“.

„Build“ užduotis sukurs projektą gamybai (t. y. bus paleista „clean:build“, „html:build“, „css:build“, „js:build“, „fonts:build“ ir „image:build“ “). Šios užduotys įdės gautus projekto failus į aplanką „ištekliai / pastatas“.

„Žiniatinklio serverio“ užduotis skirta paleisti vietinį žiniatinklio serverį su „tiesioginiu pakartotiniu“ puslapių įkėlimu naršyklėje. Su juo galite labai lengvai peržiūrėti projektą ir atlikti jo testavimą.

Užduotis „stebėti“ naudojama norint sekti šaltinio failų pakeitimus aplanke „assets/src“ ir vykdyti įvairias užduotis, jei jos įvyksta. Kitaip tariant, tai leidžia automatiškai vykdyti reikalingas užduotis ir nuolat atnaujinti gautus failus (aplanko „turtas/build“ turinį).

Be to, galite atlikti vienos ar kitos projekto dalies atrankinį (savarankišką) surinkimą.

Pavyzdžiui, norint sukurti tik svetainės dalies CSS, pakanka įvesti komandą:

gulp css:build

Kitų užduočių sąrašas:

gulp clean:build // išvalyti katalogą "assets/build" gulp html:build // kurti HTML failus gulp js:build // kurti JS failus gulp fonts:build // kurti šriftus gulp image:build / / į surinkimo vaizdą

Gulp aplinkos aprašymas

Šiame skyriuje mes analizuosime:

• pagrindiniai Gulp aplinkos įrankiai ir failų struktūra;
• kaip Bootstrap šaltiniai yra prijungti prie projekto ir kaip jie konfigūruojami;
• kaip savarankiškai (nuo nulio) inicijuoti Gulp projektą ir įdiegti priklausomybes (nenaudojant paruošto paketo.json)
• kaip inicijuoti Bower ir įdiegti frontend paketus nuo nulio (nenaudojant paruošto "bower.json")*;
• „Gulp“ projekto kūrimo priemonės failo (gulpfile.js) turinys

* Bower paketo tvarkyklė projekte nebuvo naudojama nuo 2.0.0 versijos.

Įrankių sąrašas

Aplinka, skirta priekinio projekto (svetainės) kūrimui, kuriama remiantis šiais įrankiais:

• Node.js (aplinka, kurioje veiks aplinka);
• npm (paketų tvarkyklė įtraukta į Node.js; bus naudojama įkelti Gulp, papildinius ir priekinius paketus)
• jQuery, Popover, Bootstrap (paketai, kurie bus naudojami kuriant svetainės css ir js dalis);
• Gulp ir jo papildiniai (bus naudojami kuriant projektą ir atliekant kitas žiniatinklio užduotis).

Pirmosiose projekto versijose papildomai buvo naudojama Bower paketų tvarkyklė. Jis buvo naudojamas jQuery, Popover ir Bootstrap bibliotekoms įkelti. Projekto versijose nuo 2.0.0 šios bibliotekos įkeliamos naudojant npm.

Gulp projekto failo struktūra

Projekto failų struktūra gali būti tvarkoma įvairiais būdais. Tai gali priklausyti ir nuo konkretaus kūrėjo pageidavimų, ir nuo projekto, kuriam jis sukurtas.

Šiame straipsnyje mes laikysimės tokios struktūros:

Projekto šaknyje yra aplankas „ištekliai“ ir failai „gulpfile.js“, „package.json“. „gulpfile.js“ faile bus užduočių, skirtų „Gulp“ projekto kūrėjui.

Pirmojoje projekto versijoje taip pat buvo naudojami „.bowerrc“ ir „bower.json“ failai. Failas „bower.json“ yra „Bower“ tvarkyklės konfigūracijos failas, pagal kurį buvo nustatyti įkelti reikalingi priekiniai paketai. Šiame projekte jis buvo naudojamas įkelti Bootstrap, jQuery ir Popper.

Aplanke „ištekliai“ yra du aplankai: „src“ (šaltinio failams) ir „build“ (pabaigtiems failams; Gulp kūrimo priemonė juos įdės į šį aplanką). Aplanke „src“ yra katalogai „šriftai“ (šriftams), „img“ (šaltinio vaizdams), „js“ (js failams), „style“ (stilius) ir „šablonas“ (HTML fragmentams). ir failą „index.html“.

Pirmojoje projekto versijoje aplanke „src“ vis dar buvo katalogas „bower_components“. Jis buvo skirtas komponentams, kurie buvo įkelti naudojant Bower. Dabartinėje versijoje jo nėra.

Kataloge „js“ yra du failai: „main.js“ ir „mano.js“. Failas „my.js“ naudojamas jūsų pačių scenarijams rašyti, o „main.js“ – failų, kurių turinį reikės įtraukti į galutinį js failą, sąrašui apibrėžti. Galutinis failas yra failas, kuris turėtų būti išvestis („build“ kataloge).

„Stilių“ katalogas yra skirtas stiliams. Šiame kataloge yra trys failai: „main.scss“ (yra failų, kurių turinys turi būti įtrauktas į galutinį stiliaus failą, sąrašas), „my.scss“ (naudojamas jūsų stiliams rašyti) ir „variables.scss“ (yra SCSS). kintamuosius, su kuriais pakeisime „Bootstrap 4“ stilius, taip pat naudosime jį kurdami savo kintamuosius).

Failas „index.html“ yra pagrindinis kuriamo projekto puslapis. Be "index.html", šiame kataloge gali būti dedami ir kiti html puslapiai.

„Šablonų“ katalogas skirtas HTML puslapių fragmentams į jį įdėti. Pavyzdžiui, šiame kataloge galite sukurti failus „head.html“ ir „footer.html“ ir importuoti jų turinį (naudodami sintaksę //= kelias į_failą) į kelis puslapius vienu metu. Taip bus lengviau kurti ir redaguoti html puslapius, nes. atskiros puslapių dalys jau bus atskiruose failuose.

„Bootstrap 4“ šaltinių prijungimas prie projekto ir jų nustatymas

Yra įvairių būdų, kaip prijungti „Bootstrap 4“ sistemą prie projekto, taip pat darbo su juo parinkčių.

Lanksčiausias pasirinkimas yra naudoti šaltinio kodus. Šiuo atveju ne tik gali labai lengva pakeisti numatytuosius „Bootstrap“ stilius, bet ir prisijungti prie projekto tik tas klases ir komponentus, kurie jame bus naudojami.

Bootstrap 4 CSS stiliai, koduojami SCSS ir juos vaizduoja daug mažų failų.

SCSS failų sąrašas (esančių kataloge "node_modules/bootstrap/scss/"): "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“ ir kt.

Kiekvienas toks failas atlieka konkrečią paslaugos užduotį arba yra atsakingas už konkrečios sistemos ar komponento funkcijos stilių. SCSS failai turi glaustus ir suprantamus pavadinimus. Naudodami tik juos galite gana tiksliai suprasti kiekvieno iš jų paskirtį.

Numatytųjų „Bootstrap 4“ stilių tinkinimas arba keitimas atliktas iš naujo apibrėžiant SCSS kintamųjų reikšmes. Patogumui visi SCSS kintamieji renkami vienoje vietoje (faile „variables.scss“). Tačiau pageidautina iš naujo apibrėžti jų reikšmes, žinoma, ne šiame faile, o savo (pavyzdžiui, turint tą patį pavadinimą „kintamieji.scss“, bet esantiems „assets/style/variables.scss“).

Pavyzdžiui, pakeisti temos spalvą sėkmė Ir pavojų, atliekamas pakeitus $green ir $red kintamųjų reikšmes:

// Numatytųjų Bootstrap 4 kintamųjų reikšmių nepaisymas $red: #cc2eaa; $žalia: #2ecc71;

pastaba kad nukopijavus Bootstrap 4 kintamuosius į savo CSS failą ("assets/style/variables.scss"), jie turi būti atžymėti! default .

Etiketė !default skirta SCSS kintamojo numatytajai vertei nustatyti. Jei SCSS kintamasis jau turi reikšmę, tada nauja reikšmė, jei ji nurodyta raktu !default, nebus nustatyta.

Nurodoma, kurie „Bootstrap 4“ šaltinio SCSS failai turi būti įtraukti į kompiliaciją į CSS, o kurie – ne, atliekama naudojant SCSS failą „assets/style/main.scss“. Kitaip tariant, šio failo turinys nulems stilių rinkinį, kuris bus prijungtas prie tinklalapio po kompiliavimo.

Be to, prie šio failo taip pat yra prijungti failai „assets/style/variables.scss“ (norėdami nepaisyti „Bootstrap“ kintamųjų) ir „assets/style/my.scss“ (norėdami sukurti savo stilius).

„Main.scss“ failo turinys (pavyzdys):

// Pakeiskite numatytuosius Bootstrap 4 kintamuosius ir apibrėžkite savo @import "kintamuosius"; // Įtraukite reikiamus Bootstrap 4 SCSS šaltinius @import "../../../node_modules/bootstrap/scss/_functions"; @importas "../../../node_modules/bootstrap/scss/_variables"; @import "../../../node_modules/bootstrap/scss/_mixins"; @importas "../../../node_modules/bootstrap/scss/_root"; @import "../../../node_modules/bootstrap/scss/_reboot"; @import "../../../node_modules/bootstrap/scss/_type"; @import "../../../node_modules/bootstrap/scss/_images"; @importas "../../../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"; @importas "../../../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"; // Įtraukite savo SCSS failus @import "mano";

Be to, kai kuriems „Bootstrap 4“ komponentams taip pat reikalingas „JavaScript“ kodas.

„Bootstrap 4 js“ failų sąrašas (esančių kataloge „node_modules/bootstrap/js/dist/“): „util.js“, „alert.js“, „button.js“, „carousel.js“, „collapse.js“ ", "dropdown.js", "modal.js", "tooltip.js", "popover.js", "scrollspy.js", "tab.js" ir "toast.js".

Nustatyti, kurie Bootstrap 4 sistemos js failai turi būti įtraukti į galutinį projekto js failą, o kurie ne, atliekami naudojant "main.js".

Būtinų failų importavimas į gautą build/main.js atliekamas naudojant šią konstrukciją:

//= kelias į_failą

Šį veiksmą atliks Gulp įskiepis „gulp-rigger“. Kaip jį įdiegti ir prijungti, bus aprašyta toliau.

Taip pat į šį failą galite importuoti jQuery, Popper (reikalingi išskleidžiamojo meniu, įrankių patarimo ir popover komponentų veikimui) ir, jei reikia, savo js failus.

„main.js“ failo turinys (pavyzdys):

// Importuoti jQuery //= ../../../node_modules/jquery/dist/jquery.js // Importuoti Popper //= ../../../node_modules/popper.js/dist/umd /popper.js // Importuoti reikiamus Bootstrap 4 js failus //= ../../../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 // Importuoti kitus js failus //= mano . js

Kaip inicijuoti „Gulp“ projektą ir įdiegti priklausomybes nuo nulio?

Projekto kūrimas paprastai prasideda nuo „package.json“ failo (manifesto) sukūrimo.

Faile „package.json“ bus pateikta bendra informacija apie projektą (pavadinimas, versija, aprašymas, autoriaus vardas ir kt.), taip pat informacija apie paketus, nuo kurių priklauso šis projektas.

Norėdami sukurti manifestą, turite eiti į projekto šakninį aplanką ir įvesti komandą:

npm init

Įvedę komandą, turite atsakyti į šiuos klausimus:

• projekto pavadinimas (pavadinimas) - "bootstrap-4";
• versijos numeris (versija) – „2.0.0“;
• aprašymas (aprašas) - "Pradėti projektą naudojant Bootstrap 4";
• autorius (autorius) – „svetainė“;
• git saugykla (git saugykla) - "";
• įėjimo taškas (įėjimo taškas), testavimo komanda (bandymo komanda), licencija (licencija), raktiniai žodžiai (raktiniai žodžiai) - numatytosios reikšmės.

Į klausimą "Ar tai gerai?" atsakykite „taip“ arba paspauskite Enter .

Dėl to failas „package.json“ atsiras projekto šakniniame aplanke.

Dabar įdiegkime paketus, kuriuos naudosime projekte, naudodami šią komandą:

npm install paketo_pavadinimas --save-dev // įdiegti paketą su informacija apie jį automatiškai įtraukiant į "package.json" failo skyrių "devDependencies" npm install package_name --save-prod // įdiegti paketą su informacija apie tai , automatiškai įtraukiamas į failo „package.json“ skiltį „priklausomybės“.

Raktas „--save-dev“ arba „--save-prod“ nustato, kurioje failo „package.json“ skiltyje bus informacija apie jį.

Projekte naudojamų paketų sąrašas:

npm įdiegti gulp --save-dev // įdiegti gulp npm įdiegti naršyklės sinchronizavimą --save-dev // įdiegti naršyklės sinchronizavimą npm įdiegti gulp-autoprefixer --save-dev // įdiegti gulp-autoprefixer npm įdiegti gulp-cache - -save-dev // įdiegti gulp-cache npm įdiegti gulp-clean-css --save-dev // įdiegti gulp-clean-css npm įdiegti gulp-rimraf --save-dev // įdiegti gulp-clean-css npm įdiegti gulp-imagemin --save-dev // įdiegti gulp-imagemin npm įdiegti gulp-plumber --save-dev // įdiegti gulp-plumber npm įdiegti gulp-rigger --save-dev // įdiegti gulp-rigger npm įdiegti gulp- sass --save-dev // įdiegti gulp-sass npm įdiegti gulp-sourcemaps --save-dev // įdiegti gulp-sourcemaps npm įdiegti gulp-uglify --save-dev // įdiegti gulp-uglify npm įdiegti imagemin-jpeg- iš naujo suspausti --save-dev // įdiegti imagemin-jpeg-recompress npm įdiegti imagemin-pngquant --save-dev // įdiegti imagemin-pngquant npm įdiegti gulp-pervardyti --save-dev // įdiegti imagemin-pngquant npm įdiegti jquery - -save-prod npm install popper.js --save-prod npm install bootstrap --save-prod

Įdiegę visas priklausomybes, paketas.json failas turės tokį turinį:

( "pavadinimas": "bootstrap-4", "versija": "2.0..com/itchief/gulp-project-bootstrap-4.git" ), "priklausomybės": ( "jquery": "^3.4.1" , "popper.js": "^1.14.7", "bootstrap": "^4.3.1" ), "devDependencies": ( "naršyklės sinchronizavimas": "^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-plumber": "^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" ) )

Kaip inicijuoti Bower ir įdiegti frontend paketus nuo nulio?

Apibrėžkime aplanką, kuriame Bower atsisiųs paketus. Norėdami tai padaryti, sukurkite .bowerrc failą ir įveskite jame:

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

Išsaugokite .bowerrc failą. Dabar visi komponentai bus įkelti į bower_components katalogą, esantį aktyvuose/src/.

Inicijuokime Bower (sukurkime bower.json aprašo failą). Failą bower.json galima sukurti naudojant komandą (šakniniame projekto aplanke):

Bower init

Po to turite atsakyti į šiuos klausimus:

• projekto pavadinimas (pavadinimas) - bootstrap-4;
• aprašymas (aprašas) - Pradėti projektą Bootstrap 4 - svetainėje;
• autorius (autorius) - svetainė;
• nustatyti įdiegtus komponentus kaip priklausomybes (nustatyti šiuo metu įdiegtus komponentus kaip priklausomybes) - Y (Taip);
• ar norėtumėte pažymėti šį paketą kaip privatų, kad jis nebūtų atsitiktinai paskelbtas registre - Y (Taip);
• į likusius klausimus pagal nutylėjimą paliksime programos siūlomus atsakymus;

Atlikus šiuos veiksmus bus sukurtas failas bower.json.

Į savo projektą įkelkime Bootstrap 4 ir paketus, nuo kurių jis priklauso (Popper ir jQuery), naudodami Bower.

Norėdami tai padaryti, konsolėje įveskite šią komandą:

Bower įdiegti bootstrap#v4.0.0-beta --save

Jungiklis -save reikalingas norint įrašyti paketo informaciją į failo bower.json priklausomybių skyrių.

Dėl to bower.json bus toks turinys:

( "pavadinimas": "bootstrap-4", "description": "Pradėti projektą Bootstrap 4 - svetainė", "autoriai": [ "svetainė" ], "licencija": "ISC", "raktiniai žodžiai": , "pagrindinis puslapis" ": "", "ignoruoti": [ "**/.*", "node_modules", "bower_components", "assets/src/bower_components/", "test", "tests" ], "priklausomybės": ( " jquery": "^3.2.1", "bootstrap": "^v4.0.0-beta" ) )

Jei nenorite inicijuoti Bower (bower.json) naudodami bower init komandą ir įdiegti paketų rankiniu būdu, galite tiesiog sukurti bower.json failą (pvz., naudodami failų tvarkyklę) ir į jį įklijuoti aukščiau pateiktą teksto turinį. . Norėdami įdiegti priklausomybes projekte, pakaks įvesti šią komandą:

Bokerio montavimas

„Gulp“ projekto kūrimo priemonės failo aprašas (gulpfile.js)

Visi prieš tai atlikti veiksmai buvo parengiamieji. Visas funkcijas, kurias atliks sukurta aplinka, nustatys „gulpfile.js“ failas.

Failas „gulpfile.js“ yra užduočių sąrašas.

Pagrindinės užduotys, kurias atliks šis failas:

• kelių stiliaus failų surinkimas į vieną, gauto SCSS kompiliavimas į CSS, automatinių priešdėlių pridėjimas, CSS sumažinimas ir šaltinio žemėlapio kūrimas;
• importuoti visus reikalingus js failus į vieną, sumažinti šį failą ir sukurti šaltinio žemėlapį;
• html failo rinkimas, šriftų perkėlimas, paveikslėlių apdorojimas (glaudinimas) ir automatinis puslapių atnaujinimas naudojant naršyklės sinchronizavimą.

Be to, kad šios užduotys nebūtų vykdomos keičiant šaltinio failus rankiniu būdu, sukurkime dar vieną „žiūrėjimo“ užduotį. Jis stebės failų pakeitimus ir automatiškai vykdys tam tikras užduotis.

Failo kodas „gulpfile.js“ (kai naudojamas „Gulp 4“):

„naudokite griežtą“; /* Keliai į šaltinio failus (src), baigtus failus (build) ir failus, kuriuos reikia stebėti (žiūrėti) */ var path = ( build: ( html: "assets/build/", js: "assets/build/ js/“, css: „assets/build/css/“, img: „assets/build/img/“, šriftai: „assets/build/fonts/“ ), src: ( html: „assets /src/*. html", js: "assets/src/js/main.js", stilius: "assets/src/style/main.scss", img: "assets/src/img/**/*. *", šriftai: "assets/src/fonts/**/*.*" ), žiūrėti: ( html: "assets/src/**/*.html", js: "assets/src/js/** /*.js" , css: "assets/src/style/**/*.scss", img: "assets/src/img/**/*.*", šriftai: "assets/srs/fonts/* */*.* " ), švarus: "./assets/build/*" ); /* serverio nustatymai */ var config = ( serveris: ( baseDir: "./assets/build" ), notify: false ); /* Įtraukti gulp ir papildinius */ var gulp = request("gulp"), // Include Gulp webserver = request("browser-sync"), // Serveris, skirtas paleisti ir automatiškai atnaujinti puslapius santechnikas = reikalauti("gulp-plumber" "), // klaidų sekimo modulis rigger = Reikalavimas ("gulp-rigger"), // modulis, skirtas vieno failo turiniui importuoti į kitą šaltinio žemėlapiai = reikalauti("gulp-sourcemaps"), // modulis žemėlapiui generuoti sass šaltinio failų = reikalauti("gulp-sass"), // modulis SASS (SCSS) kompiliavimui į CSS autoprefixer = reikalauti("gulp-autoprefixer"), // modulis automatiškai nustatyti automatinius prefiksus cleanCSS = reikalauti("gulp- clean-css" ), // CSS mažinimo įskiepis uglify = request("gulp-uglify"), // įskiepis, skirtas JavaScript talpyklos mažinimui = request("gulp-cache"), // įskiepis talpyklai saugoti imagemin = request(" gulp-imagemin" ), // PNG, JPEG, GIF ir SVG vaizdų glaudinimo įskiepis jpegrecompress = request("imagemin-jpeg-recompress"), // JPEG glaudinimo papildinys pngquant = request("imagemin-pngquant"), / / glaudinimo įskiepis png rimraf = request("gulp-rimraf"), // failų ir katalogų trynimo įskiepis rename = Reikalauti("gulp-rename"); /* užduotis */ // paleisti serverį gulp.task("žiniatinklio serveris", funkcija () ( webserver(config; )); // build html gulp.task("html:build", function () ( return gulp.src(path.src.html) // pasirinkite visus html failus nurodytame kelyje. pipe(santechnikas()) // sekti klaidas . pipe(rigger()) // importuoti priedus. pipe(gulp.dest(path.build.html)) // įkelti baigtus failus. pipe(webserver.reload(( srautas: true ))); // paleisti serverį iš naujo ) ) ; // rinkti stilius gulp.task("css:build", function () ( return gulp.src(path.src.style) // gauti main.scss .pipe(plumber()) // stebėti errors.pipe( sourcemaps.init()) // inicijuoti šaltinio žemėlapį .pipe(sass()) // scss -> css .pipe(autoprefixer()) // pridėti prefiksus.pipe(gulp.dest(path.build.css)) .pipe (pervardyti(( priesaga: ".min" ))) .pipe(cleanCSS()) // Sumažinti CSS .pipe(sourcemaps.write(). /")) // parašykite šaltinio žemėlapį .pipe(gulp.dest(path.build.css)) // įkelkite į build .pipe(webserver.reload(( srautas: true ))); // paleiskite serverį iš naujo )); / / build js gulp.task("js:build", function () ( return gulp.src(path.src.js) // gauti main.js failą .pipe(plumber()) // klaidų stebėjimui.pipe ( rigger()) // importuoti visus nurodytus failus į main.js .pipe(gulp.dest(path.build.js)) .pipe(rename(( priesaga: ".min" ))) .pipe(sourcemaps.init ( )) //inicijuoti šaltinio žemėlapį .pipe(uglify()) //sumažinti js .pipe(sourcemaps.write("./")) //rašyti šaltinio žemėlapį .pipe(gulp.dest(path.build.js)) / / įdėkite baigtą failą. pipe(webserver.reload(( srautas: true ))); // paleiskite serverį iš naujo )); // perkelkite šriftus gulp.task("fonts:build", function () ( return gulp.src (path. src.fonts) .pipe(gulp.dest(path.build.fonts)); )); // apdoroti vaizdus gulp.task("image:build", funkcija () ( return gulp.src(path. src.img ) // vaizdo šaltinio kelias. pipe(cache(imagemin([ // vaizdo glaudinimas imagemin.gifsicle(( interlaced: true )), jpegrecompress(( progresyvus: true, maks.: 90, min: 80 )), pngquant () , imagemin.svgo(( papildiniai: [( pašalinti ViewBox: false )] )) ]))) .pipe(gulp.dest(path.build.img)); // įkelti baigtus failus )); // ištrinti kūrimo katalogą gulp.task("clean:build", function () ( return gulp.src(path.clean, ( skaityti: false )) .pipe(rimraf()); )); // išvalyti talpyklą 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", " vaizdas:build"))); // paleisti užduotis, kai failai keičiasi 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")); )); // numatytoji užduotis gulp.task("default", gulp.series("build", gulp.parallel("žiniatinklio serveris","žiūrėti")));

„gulpfile.js“ failo kode yra komentarų. Jų pagalba paaiškinama, ką atlieka tas ar kitas instrukcijų fragmentas.

Sukurti užduotį „Gulp“ yra labai paprasta:

// gulp užduoties kūrimas (pavadinimo užduotis yra užduoties pavadinimas) gulp.task("pavadinimo užduotis", function() ( // veiksmai, kuriuos užduotis turėtų atlikti... ));

Užduotys gurkšnojant yra sukurtos labai paprastai. Jų veiksmų sistema daugeliu atvejų gali būti pavaizduota taip:

• gauti duomenis iš šaltinio failų;
• apdoroti neapdorotus duomenis naudojant „gulp“ papildinius;
• išsaugokite rezultatą (failus) į "build" katalogą.

Jei naudojate Gulp 3, failo „gulpfile.js“ turinys turėtų būti toks:

„naudokite griežtą“; /* gulp-autoprefixer parinktys */ var autoprefixerList = [ "Chrome >= 45", "Firefox ESR", "Edge >= 12", "Explorer >= 10", "iOS >= 9", "Safari >=" 9", "Android >= 4.4", "Opera >= 30" ]; /* Keliai į šaltinio failus (src), baigtus failus (build) ir failus, kuriuos reikia stebėti (žiūrėti) */ var path = ( build: ( html: "assets/build/", js: "assets/build/ js/“, css: „assets/build/css/“, img: „assets/build/img/“, šriftai: „assets/build/fonts/“ ), src: ( html: „assets /src/*. html", js: "assets/src/js/main.js", stilius: "assets/src/style/main.scss", img: "assets/src/img/**/*. *", šriftai: "assets/src/fonts/**/*.*" ), žiūrėti: ( html: "assets/src/**/*.html", js: "assets/src/js/** /*.js" , css: "assets/src/style/**/*.scss", img: "assets/src/img/**/*.*", šriftai: "assets/srs/fonts/* */*.* " ), švarus: "./assets/build/*" ); /* serverio nustatymai */ var config = ( serveris: ( baseDir: "./assets/build" ), notify: false ); /* Įtraukti gulp ir papildinius */ var gulp = request("gulp"), // Include Gulp webserver = request("browser-sync"), // Serveris, skirtas paleisti ir automatiškai atnaujinti puslapius santechnikas = reikalauti("gulp-plumber" "), // klaidų sekimo modulis rigger = Reikalavimas ("gulp-rigger"), // modulis, skirtas vieno failo turiniui importuoti į kitą šaltinio žemėlapiai = reikalauti("gulp-sourcemaps"), // modulis žemėlapiui generuoti sass šaltinio failų = reikalauti("gulp-sass"), // modulis SASS (SCSS) kompiliavimui į CSS autoprefixer = reikalauti("gulp-autoprefixer"), // modulis automatiškai nustatyti automatinius prefiksus cleanCSS = reikalauti("gulp- clean-css" ), // CSS mažinimo įskiepis uglify = request("gulp-uglify"), // įskiepis, skirtas JavaScript talpyklos mažinimui = request("gulp-cache"), // įskiepis talpyklai saugoti imagemin = request(" gulp-imagemin" ), // PNG, JPEG, GIF ir SVG vaizdų glaudinimo įskiepis jpegrecompress = request("imagemin-jpeg-recompress"), // JPEG glaudinimo papildinys pngquant = request("imagemin-pngquant"), / / glaudinimo įskiepis png rimraf = request("gulp-rimraf"), // failų ir katalogų trynimo įskiepis rename = Reikalauti("gulp-rename"); /* užduotis */ // paleisti serverį gulp.task("žiniatinklio serveris", funkcija () ( webserver(config; )); // build html gulp.task("html:build", function () ( return gulp.src(path.src.html) // pasirinkite visus html failus nurodytame kelyje. pipe(santechnikas()) // sekti klaidas . pipe(rigger()) // importuoti priedus. pipe(gulp.dest(path.build.html)) // įkelti baigtus failus. pipe(webserver.reload(( srautas: true ))); // paleisti serverį iš naujo ) ) ; // rinkti stilius gulp.task("css:build", function () ( return gulp.src(path.src.style) // gauti main.scss .pipe(plumber()) // stebėti errors.pipe( sourcemaps.init()) // inicijuoti šaltinio žemėlapį .pipe(sass()) // scss -> css .pipe(autoprefixer(( // pridėti priešdėlių naršyklės: autoprefixerList ))) .pipe(gulp.dest(path.build. css)) .pipe(rename(( priesaga: ".min" ))) .pipe(cleanCSS()) // Sumažinti CSS .pipe(sourcemaps.write(). /")) // parašykite šaltinio žemėlapį .pipe(gulp.dest(path.build.css)) // įkelkite į build .pipe(webserver.reload(( srautas: true ))); // paleiskite serverį iš naujo )); / / build js gulp.task("js:build", function () ( return gulp.src(path.src.js) // gauti main.js failą .pipe(plumber()) // klaidų stebėjimui.pipe ( rigger()) // importuoti visus nurodytus failus į main.js .pipe(gulp.dest(path.build.js)) .pipe(rename(( priesaga: ".min" ))) .pipe(sourcemaps.init ( )) //inicijuoti šaltinio žemėlapį .pipe(uglify()) //sumažinti js .pipe(sourcemaps.write("./")) //rašyti šaltinio žemėlapį .pipe(gulp.dest(path.build.js)) / / įdėkite baigtą failą. pipe(webserver.reload(( srautas: true ))); // paleiskite serverį iš naujo )); // perkelkite šriftus gulp.task("fonts:build", function () ( return gulp.src (path. src.fonts) .pipe(gulp.dest(path.build.fonts)); )); // apdoroti vaizdus gulp.task("image:build", funkcija () ( return gulp.src(path. src.img ) // vaizdo šaltinio kelias. pipe(cache(imagemin([ // vaizdo glaudinimas imagemin.gifsicle(( interlaced: true )), jpegrecompress(( progresyvus: true, maks.: 90, min: 80 )), pngquant () , imagemin.svgo(( papildiniai: [( pašalinti ViewBox: false )] )) ]))) .pipe(gulp.dest(path.build.img)); // įkelti baigtus failus )); // ištrinti kūrimo katalogą gulp.task("clean:build", function () ( return gulp.src(path.clean, ( skaityti: false )) .pipe(rimraf()); )); // išvalyti talpyklą gulp.task("cache:clear", function () ( cache.clearAll(); )); // build gulp.task("build", [ "clean:build", "html:build", "css:build", "js:build", "fonts:build", "image:build" ]); // paleisti užduotis, kai failai keičiasi 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"]); )); // numatytoji užduotis gulp.task("default", [ "build", "webserver", "watch" ]);

Gentleman's Front-end kūrėjų rinkinys

Ne paslaptis, kad šiuolaikinis front-end kūrėjas savo arsenale turi turėti vieną iš projekto kūrimo įrankių, pvz. gurkšnoti arba Grunt. Iki tam tikro laiko Grunt turėjo monopolį šiuo klausimu, tačiau grupė kūrėjų, kurie atsiskyrė nuo Grunt, nusprendė sukurti savo lengvą ir greitą užduočių tvarkyklę „Gulp“.

Šiame straipsnyje mes nuo nulio paruošime pradinį paketą, kurį naudosime būsimuose projektuose.

Kokias technologijas naudojame

• Programinės įrangos platforma: Node.js
• CSS išankstinis procesorius: rašiklis
• Užduočių tvarkyklė: gurkšnoti

Kodėl frontender reikia užduočių tvarkyklės?

Dar visai neseniai pats galvojau, kam man reikia gaišti laiką nustatydamas užduočių tvarkyklės konfigūraciją, jei jau gerai moku maketuoti, kol nepradėjau naudoti CSS išankstinių procesorių.

CSS pirminiai procesoriai yra tikrai patogūs ir pagreitina rašymo stilius, tačiau išankstiniame procesoriuje parašyto kodo sukompiliavimas į įprastą CSS nėra menka užduotis, kurią galima išspręsti vienu mygtuku. Čia mums į pagalbą ateina užduočių vadovas. Kodo konvertavimas nevyksta paspaudus mygtuką, viskas vyksta internete be jūsų dalyvavimo (žinoma, jei viskas nustatyta teisingai).

Žinoma, užduočių tvarkyklės užduotys yra daug platesnės nei procesai, susiję su išankstinio procesoriaus kodo konvertavimu į gryną CSS. Projekto surinkėjas taip pat užsiima mažinimu, sujungimu, kodo tikrinimu, ar nėra klaidų, vaizdų surinkimu į sprites, vaizdų optimizavimu žiniatinkliui ir kt. Jūs tiesiog savo projekte sukuriate daug logiškai atskirtų failų, kurie vėliau patogiai surenkami į vieną katalogą, jau apdoroti ir paruošti darbui naršyklėje. Bet apie tai vėliau, bet dabar pradėkime nuo pasiruošimo.

Node.js diegimas

Jei žinote, kaip įdiegti node.js savo sistemoje ir ja naudotis, nedvejodami pereikite prie kitos antraštės.

Iš karto noriu perspėti, kad visi aprašyti veiksmai yra svarbūs MacOS X, bet paprastai taikoma kitiems Unix sistemos. Plėtra per užduočių tvarkyklę ir komandų eilutę Windowsšiek tiek sunkesnis ir čia nebus aprašytas. Tačiau jei vis dar naudojate „Windows“ ir nesate pasiruošę jos atsisakyti, galiu pasiūlyti galimybę naudoti virtualią mašiną su įdiegta ubuntu, Aš naudoju šią parinktį savo namų sistemoje, kuri paprastai yra gana patogi.

Taigi pirmas dalykas, kurį turime padaryti, yra atsisiųsti ir įdiegti node.js paketą mūsų sistemoje, kad galėtume dirbti su mazgu per konsolę. Einame į oficialią node.js svetainę ir atsisiunčiame naujausią stabilią jūsų sistemos versiją. Įdiegus mazgo komanda turėtų būti pasiekiama komandų eilutėje. Norėdami patikrinti, ar mazgas veikia, komandų eilutėje įveskite komandą

atsakant turėtų pasirodyti įdiegto node.js versija. Jei viskas gerai, judame toliau.

Projekto katalogo struktūra

Savo projektuose naudosime vieningą struktūros versiją:

Tobulėti - plėtros šakninis katalogas└─pradėkite - projektų katalogas├─pastatyti - pastatymas, surinktas užduočių vadovo├─išteklius – visi kūrimo šaltinio failai (.psd ir kt.)├─src - plėtros katalogas│├─css - stiliaus kūrimo katalogas││├─vaizdai - visi statiniai vaizdai││├─sprites - vaizdas, surinktas sprite││├─dalinis - pasirinktinio stiliaus failai│││├─mixins.style - pasirinktiniai mišiniai│││└─stilius - pasirinktiniai stiliai││├─ pardavėjas - kiti išoriniai stiliaus failai││└─stilius - pagrindinis stiliaus lapas│├─šriftai - šriftų katalogas│├─vaizdas - dinaminių vaizdų katalogas│├─js - JavaScript kūrimo katalogas││├─_*.js - js šoniniai failai││├─_main.js - pagrindiniai pasirinktiniai js││└─main.js - pagrindinis js failas│├─.htaccess - serverio konfigūracija│├─*.html - puslapio žymėjimo failai│├─puslapiai.html - failas su nuorodomis į visus šablono puslapius│├─index.html - puslapio žymėjimo rodyklės failas│└─įtraukti - įtrauktų žymėjimo failų katalogas│ └─*.html - įtraukti žymėjimo failai (header.html ir kt.)├─package.json - npm paketų tvarkyklės konfigūracija├─gulpfile.js - Gulp konfigūracija├─plunksna.šablonas.ūsai - kaukė spraitų skaitymui├─TODO - darbų sąrašas└─.gitignore - git konfigūracija

Montavimas

Konsolėje naudokite komandą cd, kad pereitumėte į kūrimo šakninį katalogą, sukurkite projekto katalogą mkdir start ir eikite į jį.

Per konsolę nustatykime savo projekto struktūrą:

mkdir kūrimo išteklius 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

Sukurkime pradinius failus projekto struktūroje:

palieskite gulpfile.js stylus.template.mustas .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

Sukurkite paketą.json

visus iškylančiuosius klausimus galima spustelėti Enter, mazgas nustatys jiems numatytąsias reikšmes arba užpildys siūlomus laukus.

.gitignore

Mes nurodome git, kuriuos katalogus ignoruoti ir nekelti į saugyklą:

/mazgas_moduliai/ /build/ /resursas/

Katalogas node_modules atsiras vėliau įdiegus papildinius ir jame bus visi projekto mazgų įskiepiai.

src/.htaccess

Nustatykite papildomą gzip glaudinimą ir talpyklą serveriui:

AddOutputFilterByType DEFLATE tekstas/html tekstas/paprastas tekstas/xml tekstas/css tekstas/javascript programa/javascript # Pateikite gzip suglaudintus CSS failus, jei jie yra # ir klientas priima gzip. RewriteCond "%(HTTP:Accept-encoding)" "gzip" RewriteCond "%(REQUEST_FILENAME)\.gz" -s RewriteRule "^(.*)\.css" "$1\.css\.gz" # Pateikite gzip suglaudintą JS failai, jei jie yra # ir klientas priima gzip. RewriteCond "%(HTTP:Accept-encoding)" "gzip" RewriteCond "%(REQUEST_FILENAME)\.gz" -s RewriteRule "^(.*)\.js" "$1\.js\.gz" # Pateikite teisingą turinį tipų, ir užkirsti kelią mod_deflate dvigubam gzip. Perrašymo taisyklė "\.css\.gz$" "-" Perrašymo taisyklė "\.js\.gz$" "-" # Pateikite teisingą kodavimo tipą. Antraštė pridėti turinio koduotę gzip # Priverskite tarpinius serverius į talpyklą įrašyti gzipuotą ir # ne gzipuotą css/js failus atskirai. Antraštės pridėti Vary Accept-Encoding ExpiresActive on ExpiresByType programa / javascript "prieiga plius 1 mėnuo" ExpiresByType vaizdas / jpg "prieiga plius 1 mėnuo" ExpiresByType vaizdas / jpeg "prieiga plius 1 mėnuo" ExpiresByType vaizdas / gif "prieiga plius 1 mėnuo" Galioja iki vaizdų plius1 mėn. mėnuo" ExpiresByType text/css "prieiga plius 1 mėn."

src/css/styles.style

Į pagrindinį stiliaus failą įtraukite pasirinktinio stiliaus failus:

@import "dalinis/stilius"

Atkreipkite dėmesį, kad įtraukiant .styl failus plėtinys nenurodomas, atsižvelgiant į Stylus išankstinio procesoriaus kodo semantiką. Norint įtraukti stilių į kitą plėtinį, pvz., .css, pastarasis būtinas.

DARYTI

Šiame puslapyje yra kūrimo darbų sąrašas. Daugiau apie darbą su šiuo failu galite perskaityti „PlainTasks“ papildinio puslapyje, skirtame „Sublime Text“.

Tai užbaigia konstrukcijos montavimą.

Papildinių diegimas naudojant npm paketų tvarkyklę

Pagal numatytuosius nustatymus Node.js apima npm paketų tvarkyklę, kurios saugyklose yra daug įskiepių, su kuriais turime dirbti.

„Gulp“ papildinio įdiegimas

Pirmiausia turite įdiegti „Gulp“ visame pasaulyje (su jungikliu -g) mūsų sistemoje

npm įdiegti gulp -g

Tai reikia padaryti vieną kartą, tolesnio visuotinio diegimo nereikia.

Dabar turime įdiegti „Gulp“ vietoje projekto kataloge

npm įdiegti gulp --save-dev

Raktas --save-dev sako, kad informacija apie papildinį (pavadinimas saugykloje ir jo versija) bus įtraukta į pack.json konfigūraciją ir įsimins ją šiame projekte. Kadangi gite nesaugome sunkaus aplanko su node_modules įskiepiais, konfigūracijoje išsaugota informacija apie įdiegtus įskiepius leis projekte diegti visus reikiamus įskiepius vos viena npm i komanda.

Kiekvienai komandai yra santrumpos, todėl aukščiau esančią komandą galime parašyti trumpesniu formatu.

Ateityje taip pat naudosime sutrumpintą komandų formatą.

„Gulp“ rašiklio įskiepis

Savo projektuose naudojame Stylus pirminį procesorių, kuris puikiai veikia ir kompiliuoja mazge.

Diegti:

npm i gulp-stylus -D

CSS apdorojimo įskiepiai

Automatinis prefiksatorius- automatiškai įterpia -ms- -o- -moz- -webkit- priešdėlius į reikiamas savybes:

npm i gulp-autoprefixer -D

CSS sumažinimas- papildinys sumažina išvesties CSS failą pašalindamas iš jo papildomas tarpus ir skirtukus:

npm i gulp-minify-css -D

Vaizdo apdorojimo papildiniai

Vaizdų sujungimas į spritus- Jums nebereikia praleisti valandų brangaus laiko, kad sujungtumėte visus vaizdus į spritus ir tada skaičiuotumėte jų koordinates, šis papildinys automatiškai atliks visa tai už jus:

npm i gulp.spritesmith -D

Į anksčiau sukurtą failą stylus.template.mustache pridėkite kaukę, skirtą sprite pozicijoms apskaičiuoti:

((#elementai)) $((pavadinimas)) = ((px.x)) ((px.y)) ((px.offset_x)) ((px.offset_y)) ((px.width)) (( px.height)) ((px.total_width)) ((px.total_height)) "(((pabėgęs_vaizdas)))"; ((/elementai))

Pridėkite tinkintų mišinių prie mixins.styl:

SpriteWidth($sprite) plotis $sprite spriteAukštis($sprite) aukštis $sprite spritePosition($sprite) background-position $sprite $sprite spriteImage($sprite) background-image url($sprite) sprite($sprite) if !match( "hover", Selector()) && !match("aktyvus", selektoris()) spriteImage($sprite) spritePosition($sprite) spriteWidth($sprite) spriteHeight($sprite)

Prijunkite miksus ir sugeneruotą failą su koordinatėmis prie pagrindinio stiliaus failo src/css/styles.styl:

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

Atminkite, kad „Sprite“ failai turi būti įtraukti prieš pasirinktinius stilius @import „dalinis/stiliai“

Vaizdo optimizavimas žiniatinkliui- įskiepis automatiškai iškirps iš jūsų vaizdų visą nereikalingą informaciją ir sumažins juos iki optimalaus dydžio, o tai kai kuriais atvejais sumažins vaizdų dydį iki 90%:

npm i gulp-imagemin -D

„JavaScript“ apdorojimo įskiepiai

JS sumažinimas- papildinys kiek įmanoma sumažina jūsų JS kodą, sumažindamas jo įkėlimo laiką:

npm i gulp-uglify -D

JS klaidų sekimas- papildinys kruopščiai patikrins jūsų JS kodą, kad nustatytų visus neatitikimus ir parodytų juos konsolėje:

npm i jshint gulp-jshint -D

HTML apdorojimo papildiniai

Susieti failai- Įskiepis leidžia saugoti statines svetainės dalis, tokias kaip antraštė , poraštė , nuošalyje ir kt., atskiruose failuose ir įtraukti jas į bet kurią kito failo dalį. Nebėra poreikio, esant nedideliems antraštės pakeitimams, keisti dešimtis ar net šimtus šablono html puslapių:

npm i gulp-rigger -D

Papildinys taip pat suderinamas su JS.

Įtraukite tinkintą JS į pagrindinį JS failą src/js/main.js su konstrukcija:

//= _main.js

Į index.html įtraukite header.html ir footer.html failus

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

Kiti papildiniai

LiveReload- papildinys pašalina poreikį kiekvieną kartą iš naujo įkelti puslapį naršyklėje, kad pamatytumėte pakeitimus, dabar tai vyksta automatiškai, kai išsaugote pakeistą failą:

npm i gulp-connect -D

Apsaugos nuo „Gulp“ avarijos- kartais atsitinka, kad Gulp gali užstrigti iš laikrodžio režimo kritinių klaidų atveju (dažniausiai dėl JS). Šis papildinys stengiasi, kad „Gulp“ procesai veiktų, kai tik įmanoma:

npm i gulp-santechnikas -D

Failų pervardijimas- labiausiai paplitęs darbas su failų pavadinimais. Papildinys leidžia visiškai pervardyti failus, pakeisti plėtinį, pridėti priešdėlių ir postfiksų, pavyzdžiui, kad style.styl rodinio failas būtų nukreiptas į style.min.css:

npm i gulp-pervadinti -D

Valytojas- kartais reikia visiškai išvalyti kūrimo katalogą, čia į pagalbą ateina papildinys:

Šaltinio žemėlapis- Kad jūsų failus būtų galima skaityti naudojant naršyklės derinimą po sumažinimo, turite pridėti šaltinio žemėlapį prie sumažintų failų:

npm i gulp-sourcemaps -D

Išplėstinės laikrodžio funkcijos- įskiepis daro laikrodį išmanų, dabar jis neperrašo visų kūrimo failų, kai pakeičiamas tik vienas failas, jis perrašo konkretų modifikuotą failą, kuris taupo laiką ir resursus:

npm i gulp-watch -D

Patikrinkite package.json

Įdiegę visus papildinius, patikrinkime paketą.json . Tai turėtų atrodyti maždaug taip:

( "vardas": "pradžia", "versija": "1.0.0", "description": "Pradinis paketas priekinės dalies kūrimui", "autorius": "Ivanas Ivanovas", "licencija": "MIT", "dependencies": (), "devDependencies": ( "gulp": "naujausias", "gulp-autoprefixer": "naujausia", "gulp-connect": "naujausia", "gulp-imagemin": "naujausia", "jshint": "naujausia", "jshint-stylish": "naujausia", "gulp-jshint": "naujausia", "gulp-minify-css": "naujausia", "gulp-plumber": "naujausia", "gulp-rename": "naujausia", "gulp-rigger": "naujausia", "gulp-sourcemaps": "naujausia", "gulp-stylus": "naujausia", "gulp-uglify": "naujausia", "gulp-watch": "naujausia", "gulp.spritesmith": "naujausia", "rimraf": "naujausia" ) )

Vietoj naujausių jūsų atveju bus parašytos konkrečios įdiegtų įskiepių versijos. Nes Kadangi kuriame savo pradinį paketą, kuris bus naudojamas daugelyje projektų, taip pat rekomenduojama versijų reikšmes pakeisti naujausiomis, kad projekte visada būtų įdiegtos naujausios įskiepių versijos.

Katalogas node_modules taip pat turėtų atsirasti projekto aplanke, kuriame saugomi visi mazgo įskiepių failai. Įdiegti visi reikalingi papildiniai, galite pereiti prie „Gulp“ konfigūracijos nustatymų.

Gulpfile.js nustatymas

gulpfile.js- tai pagrindinis mūsų užduočių tvarkyklės konfigūracijos failas, būtent jame saugosime visus nustatymus ir komandas.

Visas Gulpo darbas susiveda į užduotį ( Anglų užduotis). Užduotis yra atskira nepriklausoma funkcija su pavadinimu. Kiekvieną užduotį galima vadinti atskirai.

Suderinamumo režimas su šiuolaikiniais standartais

Pirma, failo pradžioje suderinamumo režimą sujungsime tik pagal šiuolaikinius standartus:

„naudokite griežtą“;

Galite sužinoti daugiau apie šią direktyvą.

Įskiepio inicijavimas

Papildiniai inicijuojami naudojant šią konstrukciją:

var initPlugin = reikalauti("įskiepio pavadinimas");

Pagal šį dizainą inicijuojame visus savo papildinius:

Var gulp = Reikalauti("gulp"), //pagrindinis papildinys gulp stylus = reikalauti("gulp-stylus"), //preprocesor stylus prefixer = Reikalauti("gulp-autoprefixer"), //automatinių prefiksų išdėstymas cssmin = reikalauti(" gulp-minify-css"), //css sumažinimas uglify = Reikalavimas("gulp-uglify"), //js minifikavimas jshint = Reikalavimas("gulp-jshint"), //js klaidų stebėjimas rigger = Reikalingas("gulp - rigger"), //darbas su html ir js apima imagemin = Reikalauti("gulp-imagemin"), //vaizdų mažinimas spritesmith = Reikaling("gulp.spritesmith"), //vaizdų sujungimas į sprites rimraf = request( "rimraf "), //išvalyti sourcemaps = Reikalauti("gulp-sourcemaps"), //sourcemaps rename = Reikalauti("gulp-pervardyti"), //pervardyti failus santechnikas = Reikalauti("gulp-santechnikas"), // fuse to stop gulp watch = reikalauti("gulp-watch"), //prailginti laikrodį connect = reikalauti("gulp-connect"); //livereload

Kelio konstantos

Patogumui iš karto apibrėžiame visus kelius ir kaukes:

Var path = ( build: ( //Čia nurodysime, kur dėti paruoštus failus po kūrimo html: "build/", js: "build/js/", css: "build/css/", img: " build/css/ images/", šriftai: "build/fonts/", htaccess: "build/", contentImg: "build/img/", sprites: "src/css/images/", spritesCss: "src/css /partial/" ), src: ( //Keliai html šaltiniams gauti iš: "src/template/*.html", //Src/template/*.html sintaksė nurodo gulp, kad norime gauti visus failus su . html plėtinys js: "src/ js/[^_]*.js",//Stilių ir scenarijų atveju mums reikia tik pagrindinių failų jshint: "src/js/*.js", css: "src/css/styles .styl", cssVendor: "src /css/vendor/*.*", //Jei norime bibliotekos failus saugoti atskirai, panaikinkite img eilutės komentarą: "src/css/images/**/*.*", //Syntaksė img/**/*.* reiškia – paimkite visus visų plėtinių failus iš aplanko ir pakatalogių šriftai: "src/fonts/**/*.*", contentImg: "src/img/**/* .*", sprites: "src/css/ sprites/*.png", htaccess: "src/.htaccess" ), žiūrėti: ( //Čia nurodome, kokius failus norime stebėti dėl pakeitimų html: "src/template /**/*.html", js: "src/js/**/*.js", css: "src/css/**/*.*", img: "src/css/images/** /*.*", contentImg: "src/ img/**/*.*", šriftai: "src/fonts/**/*.*", htaccess: "src/.htaccess", sprites: "src/ css/sprites/*.png" ), clean : "./build", //katalogai, kuriuos galima išvalyti outputDir: "./build" //pradinis šakninis katalogas miniserveriui paleisti );

Atminkite, kad galime naudoti vardų kaukes:

• *.js- visi failai su plėtiniu js
• [^_]*.js– visi failai su plėtiniu js, išskyrus tuos, kurie prasideda pabraukimu
• *.* - bet kokie failai su bet kokiu plėtiniu dabartiniame kataloge
• /**/*.html– visi failai su .html plėtiniu dabartiniame kataloge ir visuose antriniuose kataloguose

užduotis (užduotys)

Dabar, kai visos konstantos yra parašytos, galite pradėti rašyti užduotis. Visos užduotys turi tokią struktūrą:

Gulp.task("užduotiesPavadinimas", function()( //kai kurios funkcijos ));

Mini serveris ir LiveReload

Pirmiausia nustatysime vietinį serverį ir LiveReload:

// Vietinis kūrimo serveris gulp.task("connect", function()( connect.server(( //nustatyti serverio konfigūracijas root: , //serverio paleidimo šakninio katalogo prievadas: 9999, //kurį prievadą naudosime livereload : true //inicijuoti LiveReload operaciją )); ));

Greičiausiai dažnai teks vienu metu dirbti su keliais projektais vienu metu. Serveris leidžia vienu metu paleisti daugybę serverių, užtenka užregistruoti savo prievadą įvairiems projektams.

Sukurkite HTML

// html kūrimo užduotis gulp.task("html:build", funkcija () ( gulp.src(path.src.html) //Pasirinkite failus iš reikiamo path.pipe(rigger()) //Paleiskite per rigger . pipe(gulp.dest(path.build.html)) //įkelkite juos į kūrimo aplanką .pipe(connect.reload()) //ir iš naujo paleiskite serverį naujinimams));

JS konstrukcija

// js tikrinimas dėl klaidų ir jų išvedimas į konsolę gulp.task("jshint:build", function() ( return gulp.src(path.src.jshint) //pasirinkite failus iš reikiamo path.pipe(jshint( )) //paleisti per jshint .pipe(jshint.reporter("jshint-stylish")); //klaidų stiliaus išvestis į konsolę )); // javascript pastatas gulp.task("js:build", function () ( gulp.src(path.src.js) //Raskite mūsų pagrindinį failą.pipe(rigger()) //Paleiskite per rigger .pipe(sourcemaps .init/ /pridėkite priesagą.min prie išvesties failo.pipe(gulp.dest(path.build.js)) //įkelkite baigtą failą, kad sukurtumėte .pipe(connect.reload()) //Ir iš naujo paleiskite serverį ));

Sprite statyba

Visi vaizdai, kuriuos reikia siųsti, yra įtraukiami į src/css/sprites/ katalogą ir, paleidę Gulp, tampa vienu sprite vaizdu. „Sprite“ neturėtų turėti logotipų ir fonų be aiškių matmenų.

// kurti sprites gulp.task("sprites:build", funkcija () ( var spriteData = gulp.src(path.src.sprites) //pasirinkite, kur gauti atvaizdus sujungti į sprite.pipe(spritesmith(( imgName) : " sprite.png", //sprite vaizdo pavadinimas cssName: "sprite.styl", //stiliaus pavadinimas, kuriame saugome vaizdo pozicijas sprite imgPath: "images/sprite.png", //kelias, kur yra sprite slypi cssFormat: "stylus", //formatas, kuriuo apdorojame pozicijas cssTemplate: "stylus.template.mustache", //kaukės failas cssVarMap: function(sprite) ( sprite.name = "s-" + sprite.name // kiekvieno sprite pavadinimą sudarys failo pavadinimas ir vardo pradžioje esančios konstrukcijos "s-" ) ))); spriteData.img.pipe(gulp.dest(path.build.sprites)); // kelias kur išsaugome vaizdą spriteData.css.pipe(gulp.dest(path .build.spritesCss)); // kelias, kuriame išsaugome stilius ));

Norėdami parodyti sprite, tiesiog naudokite mikserį. Pavyzdžiui, failo lorem.png pasirinkimas iš sprite atrodys taip:

Lorem sprite ($s-lorem)

Dabar .lorem objektas paims vaizdo matmenis ir patį vaizdą kaip foną.

Statinių vaizdų kūrimas

Statiniai vaizdai yra vaizdai, naudojami maketo šablone.

// kurti statinius vaizdus gulp.task("image:build", function () ( gulp.src(path.src.img) //Pasirinkite mūsų vaizdus. pipe(imagemin(( //Suspausti juos progresyviai: true, // compression.jpg svgoPlugins: [(removeViewBox: false)], //compression.svg susipynęs: true, //compression.gif optimizavimo lygis: 3 //glaudinimo lygis nuo 0 iki 7 ))) .pipe(gulp.dest(path. build.img)) //įkelkite į kūrimą .pipe(connect.reload()) //paleiskite serverį iš naujo ));

Kurkite dinamiškus vaizdus

Dinaminiai vaizdai yra turinio vaizdai, kurie keičiasi svetainėje ir įtraukiami į šablono lygį tik demonstravimo tikslais. Pavyzdžiui, tai gali būti naujienų vaizdai ir pan.

// sukurti dinaminius vaizdus gulp.task("imagescontent:build", function() ( gulp.src(path.src.contentImg) .pipe(imagemin(( //Suspausti juos progresyviai: true, //compress.jpg svgoPlugins: [(removeViewBox: false)], //compression.svg susipynęs: tiesa, //compression.gif optimizavimo lygis: 3 //glaudinimo koeficientas nuo 0 iki 7 ))) .pipe(gulp.dest(path.build.contentImg)) //iškraunant sukurti .pipe(connect.reload()) //paleisti serverį iš naujo ));

Sukurkite CSS

// sukurti pasirinktinį css gulp.task("cssOwn:build", funkcija () ( gulp.src(path.src.css) //Pasirinkite pagrindinį stilių lentelę. pipe(sourcemaps.init()) //inicializuoti soucemapą . pipe (stylus(( suspausti: true, "include css": true ))) //Sudaryti rašiklį .pipe(prefixer(( naršyklė: ["paskutinė 3 versija", "> 1%", "ty 8", "ty 7" "] ))) //Pridėti tiekėjo prefiksus.pipe(cssmin()) //Compress.pipe(sourcemaps.write()) //rašyti šaltinio žemėlapį .pipe(pervadinti((priesaga: ".min"))) // pridėti priesagą.min prie išvesties failo pavadinimas.pipe(gulp.dest(path.build.css)) //iškrauti, kad sukurtumėte .pipe(connect.reload()) //paleisti serverį iš naujo ));

Atskira užduotis išoriniams stiliams:

// tiekėjo kūrimas css gulp.task("cssVendor:build", funkcija () ( gulp.src(path.src.cssVendor) // Gaukite tiekėjo aplanką .pipe(sourcemaps.init()) //inicijuoti soucemap .pipe( cssmin()) //Compress.pipe(sourcemaps.write()) //rašyti šaltinio žemėlapį .pipe(gulp.dest(path.build.css)) //įkelkite, kad sukurtumėte .pipe(connect.reload() ) // paleiskite serverį iš naujo));

Taip pat pridėkime bendros CSS versijos užduotį:

// sukurti visą css gulp.task("css:build", [ "cssOwn:build", // "cssVendor:build" ]);

Jei norite apdoroti išorinius stilius atskirai nuo namų stilių ir įkelti juos kaip atskirus failus, turite panaikinti eilutės „cssVendor:build“ komentarą.

Šrifto kūrimas

// kurti šriftus gulp.task("fonts:build", function() ( gulp.src(path.src.fonts) .pipe(gulp.dest(path.build.fonts)) //dump to build ));

Build.htaccess

// build htaccess gulp.task("htaccess:build", function() ( gulp.src(path.src.htaccess) .pipe(gulp.dest(path.build.htaccess)) //įkelkite į statymą ));

Bendra konstrukcija

Kad nereikėtų statyti kiekvienos dalies atskirai, parašykime bendros konstrukcijos užduotį:

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

Pastato valymas

Kartais reikia visiškai išvalyti kūrimo katalogą. Čia mums padės ši užduotis:

// išvalyti kūrimo aplanką gulp.task("clean", function (cb) ( rimraf(path.clean, cb); ));

Stebėkite arba stebėkite pokyčius realiuoju laiku

Viena iš svarbiausių ir naudingiausių Gulp funkcijų yra laikrodžio funkcija, kuri leidžia realiu laiku stebėti visus sukurtų failų pakeitimus ir, priklausomai nuo to, atlikti konkrečius veiksmus:

// žiūrėti gulp.task("žiūrėti", funkcija()( //build html, jei keičiasi watch(, function(event, cb) ( gulp.start("html:build"); )); //build sprites, jei keičiasi watch(, function(event, cb) ( gulp.start("sprites:build"); )); //sukurti kontekstinius vaizdus, ​​jei keičiasi watch(, function(event, cb) ( gulp. start(" imagescontent:build"); )); //sukurti css, jei keičiasi watch(, function(event, cb) ( gulp.start("css:build"); )); //patikrinkite js tuo atveju of change watch(, ["jshint"]); //sukurti js, jei keičiama watch(, function(event, cb) ( gulp.start("js:build"); )); //sukurti statinius vaizdus Keitimo atvejis watch(, function (event, cb) ( gulp.start("image:build"); )); //kurti šriftus, jei change watch(, function(event, cb) ( gulp.start(" fonts:build"); )) ; //build htaccess, jei keičiasi watch(, function(event, cb) ( gulp.start("htaccess:build"); )); ));

Numatytieji veiksmai

Numatytieji veiksmai yra tai, kokias užduotis atliks užduočių tvarkyklė, įvesdama komandą gulp į konsolę:

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

Mūsų atveju pagal nutylėjimą mes sukursime savo projektą, įjungsime žiūrėjimo režimą ir paleisime serverį.

Komandų eilutės komandos

Visos komandų eilutės galp komandos susideda iš dviejų dalių – pačios komandos gulp ir užduoties pavadinimo, atskirto tarpu. Čia yra mūsų konfigūracijai taikomų komandų sąrašas:

• gulp - pagrindinė komanda, vykdo numatytąją užduotį
• gulp build – statyk viską
• gulp watch – pradėti žiūrėti
• gulp clean – išvalykite kūrimo katalogą
• gulp connect – paleisti serverį
• gulp html:build – HTML kūrimas
• gulp jshint:build – patikrinkite, ar JS nėra klaidų
• gulp js:build – JS build
• gulp sprites:build - sprite build
• gulp image:build – statinio vaizdo kūrimas
• gulp imagecontent:build – dinamiškas vaizdo kūrimas
• gulp cssOwn:build – pasirinktinis css kūrimas
• gulp cssVendor:build – išorinė CSS versija
• gulp css:build – bendra CSS versija
• gulp fonts:build – šrifto kūrimas
• gulp htaccess:build - build.htaccess

Šiuo metu gulpfile.js konfigūracija baigta.

Nukopijuokite pradinį paketą į projektą

Pirmiausia pereikime prie konsolės aplanke, kuriame kuriame, pavyzdžiui, cd development/example ir nukopijuokite viską nuo pradžios paketo katalogo į mūsų projekto cp -a ~/develop/start/. ~/kurti/pavyzdys/

Šis kopijavimo būdas yra patogiausias, nes. tiksliai nukopijuos viską, įskaitant paslėptus .gitignore failus ir kt.

Išvada

Naudodamiesi šiuo vadovu, parengėme pradinį paketą, skirtą „Gulp“ naudoti mūsų „Front-end“ kūrimo projektuose.

Šį paketą taip pat galima rasti „GitHub“.

Post Scriptum

Šis straipsnis nėra galutinis ir bus atnaujintas atsižvelgiant į pakeitimus ir patobulinimus.