Nesen Gulp kļūst arvien populārāka, un ir saprotams, kāpēc. Tas ir ātrāk, skaistāk un vienkāršāk nekā Grunt... Man bieži bija jāsadarbojas ar viņu, taču es vienmēr izmantoju gatavus risinājumus un līdz galam nesapratu, kā viņš to visu darīja. Šajā nedēļas nogalē es nolēmu izjaukt un aizvērt šo mazo problēmu. Mēs par to runāsim šodien.

Kas ir Gulp?

Gulp ir būvēšanas rīks priekšpusē. Tas ļauj automatizēt atkārtotus uzdevumus (CSS un JS failu veidošana un samazināšana, testu palaišana, pārlūkprogrammas restartēšana un citi). Tādējādi Gulp paātrina un optimizē tīmekļa izstrādes procesu.

Gulp instalēšana

Gulp instalēšana ir pietiekami vienkārša. Ja kaut kas jums neizdodas, rakstiet komentāros vai googlē savu problēmu. Tātad, lai instalētu, jums jāveic 3 darbības:

• Instalējiet Gulp visā pasaulē
• Instalējiet Gulp kā devDependencies (attīstības atkarības)
• Izveidojiet failu gulpfile.js

Pirmais solis ir instalēt Gulp globāli. Atveriet termināli un uzrakstiet:

npm instalēt -globāls gulp

Pēc tam jūsu projektam jāinstalē Gulp kā devDependencies. Pārliecinieties, vai jums ir fails package.json. Ja tā nav, izveidojiet to, konsolē ierakstot npm init. Tagad jūs varat instalēt Gulp kā devDependencies:

npm install-save-dev gulp

Visbeidzot, projekta saknē ir jāizveido gulpfile.js, kurā būs jūsu uzdevumi. Kā starpposmu mēs instalēsim spraudni gulp-util. Lai parādītu, kā tiek instalēti spraudņi:

npm install-save-dev gulp-util

Tagad ir pienācis laiks uzrakstīt mūsu pirmo problēmu. Atveriet tikko izveidoto gulpfile.js un ierakstiet tajā:

/ * Fails: gulpfile.js * / // apkopot visus mūsu spraudņus var gulp = prasīt ("gulp"), gutil = pieprasīt ("gulp-util"); // izveidot uzdevumu, kas darbosies pēc noklusējuma rīt. uzdevums ("noklusējums", funkcija () (atgriezt gutil. žurnālu ("Gulp darbojas!")));

Un tagad mums vienkārši ir jādzēš terminālis, un mēs redzēsim kaut ko līdzīgu šim:

> gulp [12:32:08] Izmantojot gulpfile ~ / Projects / gulp-scotch-io / gulpfile.js [12:32:08] Tiek sākta "noklusējuma" ... [12:32:08] Gulp darbojas! [12:32:08] Pēc noklusējuma "noklusējums" ir pabeigts

Pārskats

Gulp pati par sevi ir ļoti nabadzīga. Bet viss nepieciešamais tiek izņemts atsevišķos spraudņos. Viņi ar Gulp dara brīnumus.

Gulp api ir ļoti mazs, un tajā ir tikai 4 augstākas kārtas funkcijas:

• rīt.uzdevums
• gulp.src
• gulp.dest
• gulp.watch

gulp.task nosaka mūsu uzdevumus. Kā argumenti tam tiek izmantots nosaukums, atkarības (masīvs) un funkcija (galvenās darbības). Var nebūt atkarību:

rīt. uzdevums ("mytask", funkcija () (// kaut ko darīt)); rīt. uzdevums ("atkarīgais uzdevums", ["mytask"], funkcija () ( // darīt kaut ko pēc tam, kad "mytask" ir izdarīts });

gulp.src norāda uz failiem, kurus vēlamies izmantot. Tas izmanto .pipe, lai piekļūtu failiem, izmantojot spraudņus.

gulp.dest norāda uz mapi, kurā mēs vēlamies saglabāt modificētos failus.

gulp.src un gulp.dest tiek izmantoti vienkāršai failu kopijai:

rīt. task ("copyHtml", function () ( // kopēt visus html failus no avota / uz publisku / rīt. src ("avots / *. html"). caurule (gulp. dest ("public")); ));

Gulp ir iebūvēta failu maiņas reaģēšanas sistēma (gulp.watch). Šo uzdevumu varat izmantot, lai palaistu citus uzdevumus, kas nepieciešami, mainot failus.

Vai vēlaties iegūt vairāk punktu Google lapas ātrumā? Vai neesat pārliecināts, kas ir priekšējais mezgls? Tad jums būs interesanti.

Kas ir Node.JS?

Node.JS parasti sauc par "ziemeļu JavaScript". Šī platforma ļauj rakstīt programmas, izmantojot JavaScript sintaksi.

Ir ieviešanas Windows, Mac OS un Linux.

Iekļauts iepakojuma pārvaldnieks NPM ar kuru palīdzību jūs varat instalēt paketes.

Kas ir Gulp?

Gulp ir pakete, kas rakstīta Node.JS, kas palīdz tīmekļa pārziņiem veidot projektus izkārtojuma stadijā.

Lai instalētu Gulp, jums jāizmanto komandrinda.

Npm instalēt gulp

Šī raksta beigās ir fails, kas palīdzēs izveidot tipisku projektu.

Šajā piemērā, izmantojot Gulp, mēs rīkosimies šādi:

• Automātiski optimizēt attēlus tīmeklim;
• Viena minificēta stila faila salikšana no priekšprocesoriem (SASS, SCSS);
• Viena saīsināta skripta faila salikšana.

Kā izveidot priekšpusi, izmantojot Gulp?

Lai saprastu, kā viss darbojas, ņemsim visu soli pa solim.

Struktūru var redzēt ekrānuzņēmumā.

• Aktīvu mape - avota attēliem, stiliem un skriptiem;
• Publiskā mape - tajā atradīsies projekta veidošanas rezultāts;
• gulpfile.js - fails, kas raksturo kolekcionāra loģiku;
• package.json ir fails, kas satur informāciju par programmām un spraudņiem, kas tiek izmantoti, lai Gulp darbotos pareizi.

package.json

Faila saturs:

("name": "gulp_project", "version": "1.0.0", "description": "Piemērs", "main": "gulpfile.js", "scripts": ("test": "echo \" Kļūda: nav norādīts tests \ "&& exit 1"), "author": "Dmitrijs Ilichev", "licence": "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 "))

No šī faila ir skaidrs:

• Gulp_project projekta nosaukums, versija un apraksts;
• Galvenais fails ir gulpfile.js;
• Projekta autors, licence - tas viss nav tik svarīgi un vienkārši šie lauki var būt tukši;
• Interesants punkts ir devDependencies. Tas apraksta atkarības.

Failu var rediģēt parastajā veidā teksta redaktors... To var izveidot arī jaunam projektam ar komandu npm int.

Pamatojoties uz to, Node.JS saprot, ka darbam mums ir nepieciešams:

• Gulp versija 3.9.0 un jaunāka ēkai;
• Gulp -csso versija 1.0.0 un jaunāka - spraudnis stilu minifikācijai (css);
• Gulp -concat versija 2.6.0 un jaunāka - spraudnis vairāku failu apvienošanai vienā;
• Gulp -uglify versija 1.2.0 un jaunāka - spraudnis javascript minifikācijai;
• Gulp -imagemin versija 2.3.0 un jaunāka - spraudnis attēlu optimizēšanai;
• Gulp-sass versija 2.1.1 un jaunāka ir spraudnis css iegūšanai no sass (scss).

Labi! Pēc tam tas viss ir jāinstalē. Tas tiek darīts no komandrindas. Atrodoties mapē ar projektu, jums jāpalaiž komanda:

Npm instalēšana

Visa nepieciešamā informācija tiks ņemta no package.json.

Pēc visa šī burvība parādīsies pakalpojumu mapi mezgls_moduļi.

gulpfile.js

Faila saturs:

/ * * * Definēt mainīgos * * / var gulp = pieprasīt ("gulp"), // Pareizi Gulp JS uglify = pieprasīt ("gulp-uglify"), // JS minifikācijas concat = pieprasīt ("gulp-concat"), // Gulp faili imagemin = pieprasīt ("gulp-imagemin"), // Samazināt attēlus csso = pieprasīt ("gulp-csso"), // Samazināt CSS sass = pieprasīt ("gulp-sass"); // Pārvērst SASS (SCSS) uz CSS / * * * Izveidot uzdevumus (uzdevumus) * * / // Uzdevums "sass". Darbojas ar komandu "gulp sass" gulp.task ("sass", function () (gulp.src ("./ asset / styles / style.scss") // fails, kuru mēs apstrādājam.pipe (sass (). Ieslēgts ("error", sass.logError)) // konvertēt sass uz css .pipe (csso ()) // samazināt iepriekšējā solī iegūto css .pipe (gulp.dest ("./ public / css /") ); // rezultātu rakstām uz norādīto adresi)); // Uzdevums "js". Darbojas ar komandu "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 "]) // faili, kurus mēs apstrādājam.pipe (concat (" min.js ")) // pielīmējiet visu JS .pipe (uglify ()) // samaziniet iegūto "footcloth" .pipe (gulp.dest ("./ public / js /")) // // uzrakstiet rezultātu uz norādīto adresi)); // Uzdevums "attēli". Darbojas ar komandu "gulp images" gulp.task ("images", function () (gulp.src (". Assets / images / ** / *") // ņem visus failus mapē un tās apakšmapes.pipe ( imagemin ()) // optimizēt attēlus tīmeklim.pipe (gulp.dest ("./ public / images /")) // // rakstīt rezultātu uz norādīto adresi)); // Uzdevums "skatīties". Palaist ar komandu "gulp watch" // Tā uzrauga failu izmaiņas un automātiski izpilda citus uzdevumus gulp.task ("watch", function () (// Mainot ".scss" failus mapē un stilos), palaidiet sass uzdevums gulp. watch ("./ aktīvi / stili / ** / *. scss", ["sass"]); // Kad maināt * .js failus mapē "javascripts" un apakšmapēs, palaidiet uzdevumu js gulp.watch ("./ asset / javascripts / ** / *. js", ["js"]); // // Mainot mapes "images" un apakšmapes failus, palaidiet attēlu uzdevumu gulp.watch (" ./ aktīvi / attēli / ** / * ", [" attēli "]);));

Galvenā iezīme ir uzdevumā skatīties... Vienreiz to palaižot, varat droši strādāt ar avotiem, un projekts tiks automātiski veidots katru reizi, kad tiks saglabāti rediģētie faili.

Rezultātā mēs iegūsim veidni publicēšanai internetā.

Uzdevumus var izpildīt atsevišķi. Rezultātā raksta beigās arhīvā jūs gaida:

! Piezīme ka pēc šī arhīva izpakošanas, pirmkārt, jums būs jāizpilda komanda npm install. Šajā mapē ir diezgan daudz liels skaits failus, un to kopēšana / ielīmēšana katru reizi ir laika izšķiešana.

Apcietinājumā

Tur ir daudz citu noderīgu spraudņu. Piemēram, izcilais veidņu dzinējs Jade, kas ievērojami paātrina html koda rakstīšanu, kādam var būt nepieciešams LESS utt.

Šis piemērs ir tikai platforma un veidne, no kuras jūs varat ātri un bez lielām zināšanām sākt izmantot visas šīs brīnišķīgās funkcijas.

Uzdevumu izpildītāji un būvēšanas sistēmas ievērojami paātrina lietas, automatizējot apkopošanu, testēšanu un citus ikdienas uzdevumus. Tāpat kā jebkurā citā jomā, šajā tirgū ir spēcīga konkurence. Līdz 2014. gadam starp viņiem dominēja uzdevumu skrējēja ņurdēšana, bet vēlāk no projekta parādījās neliela komanda, kas nolēma izveidot alternatīvu rīku gulp, kas koncentrējās uz projekta veidošanu.

Lai palīdzētu jums izdarīt pareizo izvēli, raksta ietvaros mēs apsvērsim galvenos uzdevumu vadītājus:

• kurnēt

un arī mēs pieskarsimies citiem montāžas līdzekļiem un metodēm.

Skrienot nedaudz uz priekšu, pieņemsim, ka WaveAccess izmantojam gulp. Rīka ieviešana izrādījās ļoti vienkārša: JetBrains produktu saimei (IDEA, WebStorm, ReSharper), ko izmantojam jau daudzus gadus, ir lieliski spraudņi darbam ar gulp / grunt un npm / nodejs.

Uzdevumu pārvaldnieks vs. projektu veidošanas sistēma: kāda ir atšķirība?

Uzdevumu pārvaldnieks- rīks uzdevumu automatizēšanai. Skrējēja konfigurācijā varat pierakstīt šo uzdevumu nosaukumus; funkcija, kas tos veic; spraudņi, lai paātrinātu standarta darbības, taču paši uzdevumi var būt patvaļīgi. Piemēram:

• Izvietošanas uzdevumi (projekta zip, projekta augšupielāde attālais serveris utt.)
• Projekta veidošanas uzdevumi (minifikācija, optimizācija, koda validācija utt.)
• Uzdevumi datu migrācijai utt.

Šādu rīku piemēri ir ņurdēšana un rīstīšanās.

Izveidojiet sistēmu ir rīks, kas atrisina tikai vienu tipisku projekta veidošanas uzdevumu java skriptā, kas ietver:

• savienošana,
• pārbaudot koda derīgumu,
• koda samazināšana utt.

Šādi rīki ir Webpack, Brokoļi, vēlās brokastis, Browserify un citi.

Visus šādus frontend uzdevumus var automātiski veikt, izmantojot citus līdzekļus: piemēram, izmantojot npm run, par ko mēs arī runāsim rakstā.

Piemērs

Apsveriet projekta izveidošanas failu:

Const gulp = prasīt (‘gulp’); const kafija = prasīt ('gulp-coffee'); const concat = prasīt (‘gulp-concat’); const uglify = prasīt ('gulp-uglify'); const imagemin = prasīt (‘gulp-imagemin’); const sourcemaps = prasīt ('gulp-sourcemaps'); const del = prasīt (‘del’); )

Bet montāža ir liela tipiska uzdevuma īpašs gadījums. Gulp, varat uzrakstīt citu konfigurāciju, piemēram, izvietošanai:

Var gulp = prasīt ("gulp"); var zip = prasīt ("gulp-zip"); var del = pieprasīt ("del"); var instalēt = pieprasīt ("gulp-install"); var runSequence = pieprasīt ("palaist secību"); var awsLambda = pieprasīt ("node-aws-lambda"); gulp.task ("tīrs", funkcija (cb) (del (["./ dist", "./dist.zip"], cb);)); gulp.task ("copy", function () (return gulp.src ("index.js") .pipe (gulp.dest ("dist /"));)); gulp.task ("node-mods", function () (return gulp.src ("./ package.json") .pipe (gulp.dest ("dist /")) .pipe (instalēt ((ražošana: true) ));)); // Notīriet visus aws-sdk direktorijus no node_modules. Mums tie nav jāaugšupielādē, jo Lambda instance jau būs // pieejama visā pasaulē. Gulp.task ("clean-aws-sdk", function (atzvanīšana)) (del (["dist / node_modules / ** / aws-sdk "], atzvanīšana);)); gulp.task (" zip ", function () (return gulp.src ([" dist / ** / * ","! dist / package.json "]) .pipe (zip ("dist.zip")) .pipe (gulp.dest ("./"));)); gulp.task ("augšupielādēt", funkcija (atzvanīšana) (awsLambda.deploy ("./ dist .zip ", pieprasīt (" ./ lambda-config.js "), atzvanīt);)); gulp.task (" izvietot ", funkcija (atzvanīšana) (atgriezt runSequence ([" tīrs "], [" kopēt "] , ["node-mods"], ["clean-aws-sdk"], ["zip"], ["upload"], atzvanīšana);));

Jaunus uzdevumus var raksturot kā esošo uzdevumu kombinācijas:

Gulp.task (‘izvietot’, gulp.series (‘tīrs’, ‘kopēt’, ‘mezgla modi’, ‘clean-aws-sdk’, ‘zip’, ‘augšupielādēt’));

Šī ir atšķirība. Tagad apskatīsim pamata rīkus.

gulp vs. ņurdēt

Tātad, mums ir divi uzdevumu izpildītāji: rīstīšanās un ņurdēšana. Abi izmanto node.js un npm, un to uzdevums ir izmantot javascript.

No pirmā acu uzmetiena tie ir līdzīgi, taču gulpā ir kaut kas, kas padara to ērtāku montāžai: iespēja paralēli apstrādāt uzdevumus un kompakta konfigurācija, lakoniska API. Sīkāk apskatīsim, kā tie darbojas.

Datu straumēšana

Šis ir granta fails, kas veido un apstrādā CSS.

No tā jūs varat redzēt šo gruntu, uzsākot katru procesu:

atver failu;

uzsāk procesu;

saglabā izmaiņas;

aizver apstrādāto failu, lai nākamais process netraucētu to;

ieraksta failu iegūtajā mapē.

Tas nozīmē, ka ķēde ietver vairāku pagaidu mapju izveidi un starpposma failu saglabāšanu:

Spraudņus raksta dažādi autori. Lai katrs spraudnis varētu strādāt ar failiem, apejot saglabāšanu, failiem jābūt attēlotiem kā objektiem. Gulpā šo uzdevumu veic virtuāls failu sistēma Vynyl-FS. Un gulp nekavējoties nodod failu nākamajam procesam, neradot pagaidu failus un nesaglabājot diskā.

Tā pati gulp konfigurācija ir kompaktāka:

Tās vispārējais darbības mehānisms ir straumēšanas failu apstrāde, nerakstot uz diska:

Uzdevumu secība

Ir vēl viena atšķirība: gulp pēc noklusējuma izpilda uzdevumus asinhroni. Tam ir gan plusi, gan mīnusi. Tajā pašā konfigurācijas failā mēs norādām lasīt failus no direktorijas dev / * scss un nosūtīt tos uz SASS.

Straumes rezultātu nosūta uz .pipe. .Pipe metode ļauj apkopot rezultātu daļēji buferī un, kad tas ir pilns, nekavējoties nosūtīt informāciju straumei lasīšanai, pirms tā pabeidz saņemt direktorija saturu.

Uzdevumu secīga izpilde padara gausu ātru un spēcīgu, taču reizēm kļūst nepieciešams izpildīt uzdevumus sinhroni, piemēram, kurnējot. Problēmu var atrisināt, izmantojot atzvanīšanu, straumes atgriešanu vai solījumu. Uzdevums ir sīkāk analizēts vietnē Habré. Ir arī alternatīva iespēja pašā vietnē npm.js

Ja izmantojat gruntēšanu, bet jūs piesaista datu straumēšana, to pašu Vynyl-FS moduli var izmantot, lai to ieviestu grunt.

Lakoniskai gulp API ir tikai 5 metodes:

Uzdevums (vārds, fn). Reģistrē funkciju ar nosaukumu. Jūs varat norādīt atkarību no citiem uzdevumiem, ja tie vispirms jāizpilda.

Palaist (uzdevumi ...). Veic uzdevumus.

Skatīties (glob, fn). Izpilda funkciju, ja globālā vietā tiek mainīts fails.

Src (glob). Tā kā parametru ņem faila masku un atgriež straumi, kas attēlo šos failus. Pēc tam straumi var nodot spraudņiem kā ievadi.

Dest (mape). Saglabā failus norādītajā mapē.

Es īpaši vēlos atzīmēt .watch () klātbūtni projekta "dabiskajā" API, jo pastāvīgo failu izmaiņu izsekošana ir vissvarīgākā montāžas sastāvdaļa. API īsums ļauj šim uzdevumu vadītājam koncentrēties uz savu galveno uzdevumu - projektu veidošanu.

Alternatīvas ņurdēšanai un ņurdēšanai

Neskatoties uz gulp popularitāti (vairāk nekā 130 lejupielādes dienā) un gruntēšanu (vairāk nekā 86 lejupielādes dienā, saskaņā ar npmjs.com datiem), izstrādātāji šajās sistēmās saskata savus trūkumus: piemēram, atkarība no spraudņiem, nepilnīga dokumentācija, neērta atkļūdošana. Varat arī apsvērt projektu veidošanas sistēmas (piemēram, brokoļus un Webpack) vai npm skriptus.

Projektu veidošanas sistēmas

Apskatīsim vairākus alternatīvus risinājumus platformā Node.js. Lai izveidotu projektu, viņi var aizstāt rīstīšanos un ņurdēšanu.

Šī sistēma, tāpat kā gulp, radās kā konkurente uzdevumu izpildītāja gruntēšanai, bet izstrādātāji sākotnēji to uzskatīja par celtniecības palīgu ar visām priekšrocībām un trūkumiem. Tas bez iestatījumiem “sapratīs”, ka * .js ir fails ar skriptiem, * .coffee ir CoffeeScript; tā konfigurācija ir kompaktāka. Tomēr montāžas stadijā viņš nevarēs veikt patvaļīgas darbības.

Šeit ir Brunch konfigurācijas fails. Tas ir rakstīts CoffeeScript (varat rakstīt arī JS):

Exports.config = files: javascripts: joinTo: "javascripts / app.js": / ^ app / "javascripts / vendor.js": / ^ (bower_components | vendor) / styleheets: joinTo: "stylesheets / app.css" pasūtījums : after: ["vendor / styles / helpers.css"] veidnes: joinTo: "javascripts / app.js"

Šeit es gribētu pievērst uzmanību operatoriem joinTo un pasūtīšanai. Konfigurācijas līmenī Brunch saprot, ka tam būs jāapkopo faili pareizajā secībā. Rezultātā konfigurācija aizņem 20-30 rindas.

Brokoļi

Indie rīks tiek izstrādāts. Tās izstrādātāji vēlējās radīt konkurenci gulp.

Salīdzinot ar malšanu, brokoļi izmanto dažādus principus:

Montāžas paātrināšana. Katrs spraudnis īsteno būvniecības rezultātu starpposma kešatmiņu, nevis tikai nepieciešamo failu daļēju atjaunošanu.

Faili vietā koki. Gulp vislabāk pārvērš vienu failu vienā gala failā. Brokoļi pēc noklusējuma izmanto tikai kokus, nevis failus, un pārveido tos citos kokos (deģenerējas no vienas virsotnes).

Šobrīd rīks aktīvi attīstās, parādās jauni spraudņi, taču ir pāragri to izmantot nopietniem projektiem: vēl nav pietiekami daudz spraudņu.

Webpack ir elastīga moduļu veidošanas sistēma. Tam ir neparasta sintakse, taču tā pati pieņem jebkuru moduļu sintaksi.

Saprotot, ka viņiem būs jākonkurē ar tādiem milžiem kā gulp, radītāji, izstrādājot lielus projektus, nolēma atvieglot mūsu dzīvi. Un lietderībai pievienots:

Spēja automātiski veidot atkarību un resursu koku.

Ērti rīki dinamiskas iekraušanas ieviešanai.

Savietojams ar gandrīz visiem moduļiem (AMD, UMD, ES 2015, Common JS, uz tiem balstīti trešo pušu moduļi).

Savietojams ar priekšprocesoriem (SASS, Babel, Coffee Script, Type Script utt.).

Live Reload (asinhronas ielādes tehnoloģija, kurā pārlūkprogramma atsvaidzina nevis visas lapas, bet atsevišķas lietojumprogrammas).

Spēja sadalīt kodu un ģenerēt vairākus saišķa failus, izvairoties no viena smaga bundle.js izveidošanas.

Spēja optimizēt kodu.

Atsevišķi var atzīmēt elastīgu pieeju atkarībām. Modulis var būt JS, CSS un HTML fails un pat JPEG ar PNG. Varat izmantot prasīt (“myJSfile.js”) un pieprasīt (“myCSSfile.css”), koplietot un atkārtoti izmantot artefakta daļas.

Sīkāku informāciju par funkcijām, rīku konfigurāciju, spraudņiem var atrast vietnē Github prezentācijā ar Fronttalks: Webpack Deep Dive.

npm skripti

Būvēšanas uzdevumus var atrisināt arī, izmantojot npm skriptus. Šī ideja daudzus biedē: dažas funkcijas, skripti nav pietiekami ātri, salīdzinot ar gulp vai Webpack. Tomēr šie trūkumi ir pārspīlēti.

Npm skriptu iespējas

Npm skripti dara daudzas lietas. Tā, piemēram, varat ieviest āķa skriptus:

("name": "npm-scripts-example", "version": "1.0.0", "description": "npm scripts example", "scripts": ("prebuild": "echo I run before the build script "," build ":" cross-env NODE_ENV = ražošanas tīmekļa pakotne "" postbuild ":" echo I run after the build script "))

Skripti tiks ielādēti secībā atbilstoši prefiksiem: piemēram, prebuild sākas pirms būvēšanas, jo tam ir pievienots prefikss. Attiecīgi postbuild tiks ielādēts pēdējais. Komanda npm run build build tos izpildīs pareizā secībā.

Jūs varat izsaukt vienu skriptu no otra, lai sadalītos izaicinošus uzdevumus... Piemēram, šeit iepriekš izveidotais uzdevums sauc par tīru uzdevumu.

("name": "npm-scripts-example", "version": "1.0.0", "description": "npm scripts example", "scripts": ("clean": "rimraf ./dist && mkdir dist "," prebuild ":" npm run clean "," build ":" cross-env NODE_ENV = production webpack "))

Ja uzdevums kļūst pārāk sarežģīts, vienmēr varat izsaukt atsevišķu failu:

("nosaukums": "npm-scripts-example", "version": "1.0.0", "description": "npm scripts example", "scripts": ("build": "node build.js"))

Straumēšana padara gausu daudz ērtāku būvniecības uzdevumu veikšanai nekā ņurdēšana. Bet to var īstenot arī caur npm. Operētājsistēmā Windows un Unix straumēšana tiek veikta pēc noklusējuma, nesaglabājot starpposma failus.

Piemēram, operētājsistēmā Unix varat saspiest faila saturu un pārsūtīt to uz jaunu failu:

Grep “Mans vārds” bigFile.txt> linesThatHaveMyName.txt

Novirzīšana (>) novirza vēlamās rindas uz gala failu. Uzdevums tiek izpildīts, nesaglabājot starpposma failus.

Bet ir arī trūkumi: jūs nevarat atstāt komentārus package.json. Risinājums varētu būt īsu skriptu izveide ar skaidriem nosaukumiem, kuru mērķis ir viens mazs uzdevums. Sīkāk jautājums par uzdevumu izpildītāju aizstāšanu ar npm skriptiem ir labi aplūkots rakstā angļu valodā Why I Left Gulp and Grunt for npm Scripts.

Rezultāts

Tirgū ir liela konkurence par ikdienas uzdevumu automatizācijas rīkiem (piemēram, rēciens un ņurdēšana), kā arī par rīku projektu veidošanas automatizēšanai (Webpack, Brokoļi, Medusa, Browserify u.c.).

Ja paskatās uz uzdevumu izpildītājiem, gulp ir vienkāršāks, vieglāk saprotams un efektīvāks nekā gruntēšana: tam ir izdevīgi ietaupīt uz diska darbībām. Bet gruntam ir vairāk spraudņu (piemēram, testēšanai ir spraudnis). Šī iemesla dēļ viņam ir daudz fanu.

Ja mēs runājam tikai par montāžu, tad gulp ir visas priekšrocības salīdzinājumā ar gruntēšanu:

Straumēšanas arhitektūra ķēžu failu pārsūtīšanai, ko nodrošina Vynyl-FS modulis.

Noklusējums ir uzdevumu izpilde asinhroni.

Īsa API ar tikai 5 funkcijām.

Tajā pašā laikā Webpack ir vienlīdz interesants rīks celtniecībai. Tam ir Live Reload tehnoloģija, lai paātrinātu pārlūka atsvaidzināšanu. Tas ir milzīgs plus: tehnoloģija ietaupa laiku, nospiežot atsvaidzināšanas pogu, kas izstrādātājiem ir pastāvīgi jānospiež. Gulp ir arī Live Reload, bet Webpack ir grūti salīdzināt ar gulp vai grunt, jo tas ir "asināts" tikai uzbūvei un nevar "atrisināt" patvaļīgus uzdevumus.

Visi šie risinājumi lieliski integrējas JetBrains produktu saimē, tomēr mēs, WaveAccess, izvēlējāmies ņirgāšanos par plašajām iespējām gan izkārtojuma dizaineriem, gan priekšējās klases speciālistiem.

Ja jums ir kādi jautājumi un jums ir jāizstrādā tīmekļa projekts, rakstiet mums uz [e -pasts aizsargāts]

• Frontend
• Grunt
• Gulp
• Uzdevumu skrējēji

Šajā rakstā mēs detalizēti analizēsim frontend projekta veidošanas procesu, kas ir iesakņojies manā ikdienas darbā un ievērojami atvieglojis ikdienas gaitas.
Raksts nepretendē uz galīgo patiesību, jo šodien ir liels skaits dažādu montētāju un montāžas pieeju, un ikviens izvēlas pēc garšas. Es tikai dalīšos savās domās par šo tēmu un parādīšu savu darbplūsmu.

Mēs izmantosim Gulp kolektoru. Attiecīgi jūsu sistēmā jābūt instalētai mezglam js. Mēs neuzskatīsim mezgla uzstādīšanu konkrētai platformai, jo tas tiek googlē pāris minūšu laikā.
Un vispirms es atbildēšu uz jautājumu - kāpēc Gulp?
No vairāk vai mazāk panesamām alternatīvām mums ir Grunt un Brunch.
Kad es pirmo reizi sāku iesaistīties kompilatoros, gan Grunt, gan Gulp jau bija tirgū. Pirmais parādījās agrāk, un tāpēc tam ir lielāka kopiena un dažādi spraudņi. Saskaņā ar npm:
Grunt - 11171 iepakojums
Gulp - iepakojums 4371

Bet Grunt mani pārsteidza kā pārlieku daudzsološu. Un pēc vairāku salīdzināšanas rakstu izlasīšanas es dodu priekšroku Gulp vienkāršības un skaidrības dēļ.
Brunch ir salīdzinoši jauns projekts ar visām priekšrocībām un trūkumiem, kas no tā izriet. Es to skatos ar interesi, bet vēl neesmu to izmantojis savā darbā.

Sāksim:

Izveidosim mapi savam projektam, piemēram, "habr". Atvērsim to konsolē un izpildīsim komandu

Npm inic

Uz visiem instalētāja jautājumiem varat vienkārši nospiest taustiņu Enter. tagad tam nav nozīmes.
Rezultātā mapē ar projektu tiks ģenerēts fails package.json, aptuveni šāds saturs

("name": "habr", "version": "1.0.0", "description": "", "main": "index.js", "scripts": ("test": "echo" Error: nav norādīts tests "&& exit 1"), "author": "", "licence": "ISC")

Nedaudz mainīsim to, lai tas atbilstu mūsu vajadzībām:

("nosaukums": "habr", "versija": "1.0.0", "apraksts": "", "autors": "", "licence": "ISC", "devDependencies": ("gulp": "^ 3.8.1"))

blokā devDependencies mēs norādījām, ka mums vajag gulp, un mēs nekavējoties reģistrēsim visus savus spraudņus.

Spraudņi:

Ar stiliem es daru to pašu, ko ar js, bet rigger "a vietā - es izmantoju iebūvēto SCSS importu.
Mūsu galvenais.scss izskatīsies šādi:

/ * * Trešā puse * / @import "CSS: ../../ bower_components / normalize.css / normalize.css"; / * * Pielāgots * / @import "daļēji / lietotne";

Tādā veidā jūs varat viegli pārvaldīt stilu iekļaušanas secību.
Pārbaudīsim savu uzdevumu, skrienot

Gulp stils: veidot

Vāc attēlus

Attēla uzdevums izskatīsies šādi:

Gulp.task ("image: build", function () (gulp.src (path.src.img) // Atlasiet mūsu images.pipe (imagemin ((// Saspiest tos progresīvi: true, svgoPlugins: [(removeViewBox: false) )], izmantot :, interlaced: true))) .pipe (gulp.dest (path.build.img))) // Un iemest to build .pipe (connect.reload ());));

Es izmantoju attēla noklusējuma iestatījumus, izņemot interlaced. Jūs varat izlasīt vairāk par šī spraudņa API.
Tagad, ja mēs ievietojam kādu attēlu src / img un palaižam komandu

Gulp attēls: veidot

tad mēs redzēsim mūsu optimizēto attēlu. Arī gulp laipni ierakstīs konsolē, cik daudz vietas tas ietaupīja mūsu vietnes lietotājiem :)

Fonti

Ar fontiem man parasti nav jāveic nekādas manipulācijas, bet, lai netiktu izjaukta paradigma "Mēs strādājam src / un build in build /" - es vienkārši nokopēju failus no src / fonts un ielīmēju tos build / fontus. Šeit ir uzdevums

Gulp.task ("fonts: build", function () (gulp.src (path.src.fonts) .pipe (gulp.dest (path.build.fonts))));

Tagad definēsim uzdevumu ar nosaukumu "būvēt", kas veiks visu, ko mēs šeit esam paveikuši.

Gulp.task ("build", ["html: build", "js: build", "style: build", "fonts: build", "image: build"]);

Failu izmaiņas

Lai visu laiku neuzkāptu konsolē, lūgsim gulp izpildīt vēlamo uzdevumu katru reizi, kad mainīsies fails. Lai to izdarītu, uzrakstiet šādu uzdevumu:

Gulp.task ("skatīties", funkcija () (skatīties (, funkcija (notikums, cb) (gulp.start ("html: veidot");)); skatīties (, funkcija (notikums, cb) (gulp.start ( "style: build");)); watch (, function (event, cb) (gulp.start ("js: build");)); watch (, function (event, cb) (gulp.start ("image : build ");)); watch (, function (event, cb) (gulp.start (" fonts: build ");));));

Mēs saprotam, ka problēmām nevajadzētu būt. Mēs vienkārši sekojam saviem ceļiem, kas definēti ceļa mainīgajā, un funkcijā, kas tiek izsaukta, kad fails mainās, mēs lūdzam izpildīt vajadzīgo uzdevumu.
Mēģiniet palaist konsolē

Gulp pulkstenis

un mainīt dažādus failus.
Nu, vai nav forši?)

Web serveris

Lai izbaudītu dzīvās ielādes brīnumu - mums pašiem jāizveido vietējais tīmekļa serveris. Lai to izdarītu, mēs uzrakstīsim šādu uzdevumu:

Gulp.task ("tīmekļa serveris", funkcija () (connect.server ((resursdators: server.host, ports: server.port, livereload: true));));

Pat nav ko komentēt. Mēs vienkārši sāksim serveri ar tiešo ielādi resursdatorā un ostā, ko definējām servera objektā.

Tīrīšana

Ja pievienojat jebkuru attēlu, palaidiet attēlu: uzbūves uzdevumu un pēc tam izdzēsiet attēlu - tas paliks uzbūves mapē. Tāpēc būtu ērti periodiski to notīrīt. Šim nolūkam izveidosim vienkāršu uzdevumu.

Gulp.task ("tīrs", funkcija (cb) (rimraf (path.clean, cb);));

Tagad, palaižot komandu

Gulp tīrs

tas vienkārši izdzēsīs būvēšanas mapi.

Un visbeidzot, nedaudz žēlastības

Šim uzdevumam nav kritiskas funkcionalitātes, bet man tas ļoti patīk :)

Gulp.task ("openbrowser", function () (opn ("http: //" + server.host + ":" + server.port + "/build");));

Kad tas būs vajadzīgs, mēs to palaidīsim - un mūsu pārlūkprogrammā automātiski tiks atvērta cilne ar mūsu projektu.
Forši :)

Beigu akords

Pēdējā lieta, kas mums jādara, ir definēt noklusējuma uzdevumu, kas darbosies visā mūsu būvē.

Gulp.task ("noklusējums", ["veidot", "tīmekļa serveris", "pulkstenis", "openbrowser"]);

Jūsu pēdējais gulpfile.js izskatīsies apmēram šādi.
Tagad izpildīsim konsolē

Un voila :) Jūsu projekta sagatave ir gatava un gaida jūs.

Nobeigumā daži vārdi

Šis raksts tika iecerēts kā veids, kā vēlreiz izgaismot frontes projektu veidošanas sarežģītību un viegli nodot šo pieredzi jauniem izstrādātājiem. Jums nav jāizmanto šī veidošanas opcija savos projektos. Vietnē yeoman.io varat atrast ģeneratorus gandrīz jebkurai vajadzībai.
Es rakstīju šo kolekcionāru divu iemeslu dēļ.
- Man patīk izmantot savācēju html kods
- Gandrīz visos savāktajos mezglos ierakstīšanai tiek izmantota pagaidu mape (parasti .tmp /) starpposma rezultāti montāža. Man nepatīk šī pieeja, un es gribēju atbrīvoties no pagaidu mapēm.
- Un es gribētu to visu izņemt no kastes :)

Manu github varat lejupielādēt manu kolektora darba versiju.

Es ceru, ka raksts jums bija noderīgs :)

P.S. par visām kļūdām, trūkumiem un apgrūtinājumiem - lūdzu, rakstiet personīgi

Džentlmena priekšējās daļas izstrādātāju komplekts

Nav noslēpums, ka mūsdienu priekšgala izstrādātājam bruņojumā jābūt vienam no projekta montāžas rīkiem, piemēram Gulp vai Grunt... Līdz kādam laikam Gruntam šajā jautājumā bija monopols, bet no Grunta atdalīta izstrādātāju grupa nolēma izveidot savu vieglo un ātro Gulp uzdevumu pārvaldnieku.

Šajā rakstā mēs sagatavosim sākuma paketi, lai to izmantotu turpmākajos projektos.

Kādas tehnoloģijas mēs izmantojam

• Programmatūras platforma: Node.js
• CSS priekšprocesors: Irbulis
• Uzdevumu pārvaldnieks: Gulp

Kāpēc priekšpusei ir nepieciešams uzdevumu pārvaldnieks?

Vēl nesen es pats prātoju, kāpēc man ir jātērē laiks uzdevumu pārvaldnieka konfigurācijas iestatīšanai, ja es jau daru labu darbu ar izkārtojumu, līdz es sāku izmantot CSS priekšapstrādātājus.

CSS priekšprocesori ir patiešām ērti un paātrina stilu rakstīšanu, taču uz priekšprocesora rakstītā koda apkopošana parastajā CSS nav pilnīgi triviāls uzdevums, ko var atrisināt ar vienu pogu. Šeit mums palīdz uzdevumu vadītājs. Koda konvertēšana nenotiek, nospiežot pogu, viss notiek tiešsaistē bez jūsu līdzdalības (protams, ja viss ir pareizi konfigurēts).

Protams, uzdevumu pārvaldnieka uzdevumi sniedzas daudz tālāk par procesiem, kas saistīti ar priekšapstrādātāja koda pārveidošanu tīrā CSS. Projekta veidotājs nodarbojas arī ar minifikāciju, salikšanu, koda kļūdu pārbaudi, attēlu salikšanu spritēs, attēlu optimizēšanu tīmeklim utt. Jūs savā projektā vienkārši izveidojat loģiski atdalītu failu kopu, kas pēc tam ērti tiek apkopoti vienā direktorijā, jau apstrādāti un gatavi darbam pārlūkprogrammā. Bet vairāk par to vēlāk, un tagad sāksim ar sagatavošanos.

Node.js instalēšana

Ja jūs zināt, kā savā sistēmā instalēt node.js un to izmantot, nekautrējieties pāriet uz nākamo virsrakstu.

Es gribētu jūs uzreiz brīdināt, ka visas aprakstītās darbības ir atbilstošas Mac OS X bet parasti attiecas uz citiem Unix sistēmas. Izstrāde, izmantojot uzdevumu pārvaldnieku un komandrindu Windows nedaudz grūtāk un šeit netiks aprakstīts. Tomēr, ja jūs joprojām izmantojat Windows un neesat gatavs no tā atteikties, es varu ieteikt lietošanas gadījumu virtuālā iekārta ar izveidoto Ubuntu, Es izmantoju šo opciju savā mājas sistēmā, kas kopumā ir diezgan ērti.

Tātad, pirmkārt, mums ir jālejupielādē un jāinstalē mūsu sistēmā pakete node.js, lai darbotos ar mezglu caur konsoli. Dodieties uz oficiālo vietni node.js un lejupielādējiet savai sistēmai jaunāko stabilo versiju. Pēc mezgla instalēšanas komandrindā jābūt pieejamai. Lai pārbaudītu, vai jūsu mezgls darbojas, komandrindā ievadiet komandu

atbildot, vajadzētu parādīties instalētās node.js versijai. Ja viss ir kārtībā, dodieties tālāk.

Projekta direktoriju struktūra

Savos projektos mēs izmantosim vienotu struktūras versiju:

Attīstīt - attīstības saknes direktorijs─sāc - projektu katalogs─būvēt - būvēt, ko samontējis uzdevumu vadītājs├─resurss - visi avota faili izstrādei (.psd utt.)├─src - attīstības direktorijā─css - stila attīstības direktorijs Im─attēli - visi statiskie attēli││├─sprites - sprītā savāktais attēls││├─ daļēji - pielāgoti faili stili│││├─maisījumi.stils - pielāgoti maisījumi│││└─stili.stils - pielāgoti stili││├─vandors - citi ārējos failus stili││└─stili.stils - galvenā stila fails│├─ fonti - fontu katalogs Im─img - katalogs dinamiski attēli │├─js - JavaScript izstrādes direktorijs││├─ _ *. Dž - js sānu faili││├─_main.js - pamata pasūtījuma js││└─main.js - galvenais js fails│├─.htaccess - konfigurējiet serverim│├─ * .html - lapu iezīmēšanas faili│├─pages.html - fails ar saitēm uz visām veidnes lapām│├─index.html - rādītāja lapas iezīmēšanas fails─ietver - iekļauto iezīmēšanas failu direktorijs│ └─ * .html - iekļaut iezīmēšanas failus (header.html utt.)├─package.json - npm pakešu pārvaldnieka konfigurācija├─gulpfile.js - Gulp konfigurācija├─stylus.template.mustache - maska ​​spritu lasīšanai OD─ TODO - uzdevumu lapa└─.gitignore - konfigurējiet Git

Uzstādīšana

Konsolē, izmantojot komandu cd, dodieties uz attīstības saknes direktoriju, izveidojiet direktoriju mūsu mkdir sākuma projektam un dodieties uz to.

Izveidosim projekta struktūru, izmantojot konsoli:

mkdir veidot resursu src src / css src / css / attēlus src / css / sprites src / css / daļēju src / css / pārdevēju src / js src / template src / template / include src / img src / fonts

Izveidosim sākotnējos failus projekta struktūrā:

pieskarieties 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

Izveidosim package.json

uz visiem uznirstošajiem jautājumiem var noklikšķināt, izmantojot taustiņu Enter, mezgls iestatīs noklusējuma vērtības vai aizpildīs piedāvātos laukus.

.gitignore

Mēs sakām gitai, kurus direktorijus ignorēt un augšupielādēt repozitorijā:

/ node_modules / / build / / resource /

Katalogs node_modules parādīsies vēlāk pēc spraudņu instalēšanas, un tajā būs visi projekta mezglu spraudņi.

src / .htaccess

Instalējiet serverim papildu gzip saspiešanu un kešatmiņu:

AddOutputFilterByType DEFLATE text / html text / plain text / xml text / css text / javascript application / javascript # Pasniedziet gzip saspiestus CSS failus, ja tādi pastāv # un klients pieņem gzip. RewriteCond "% (HTTP: Accept -encoding)" "gzip" RewriteCond "% (REQUEST_FILENAME) \. Gz" -s RewriteRule "^ (. *) \. Css" "$ 1 \ .css \ .gz" # Serve gzip saspiestus JS failus, ja tādi pastāv # un klients pieņem gzip. RewriteCond "% (HTTP: Accept -encoding)" "gzip" RewriteCond "% (REQUEST_FILENAME) \. Gz" -s RewriteRule "^ (. *) \. Js" "$ 1 \ .js \ .gz" # Pasniegt pareizi satura veidus un novērstu mod_deflate double gzip. RewriteRule "\ .css \ .gz $" "-" RewriteRule "\ .js \ .gz $" "-" # Pasniedziet pareizo kodēšanas veidu. Galvene pievieno Content-Encoding gzip # Piespiest starpniekserverus atsevišķi saglabāt kešatmiņā gzipped un # ne-gzipped css / js failus. Pievienojiet galvenei atšķirīgu pieņemšanas kodējumu ExpiresActive on ExpiresByType application / javascript "access plus 1 months" ExpiresByType image / jpg "access plus 1 month" ExpiresByType image / jpeg "access plus 1 month" ExpiresByType image / gif "access plus 1 month" ExpiresByType image / png "access plus 1 mēnesis "ExpiresByType text / css" piekļuve plus 1 mēnesis

src / css / styles.styl

Iekļausim pielāgotus stila failus galvenajā stila failā:

@import "daļējs / stili"

Ņemiet vērā, ka .styl failiem paplašinājums nav norādīts saskaņā ar Stylus pirmapstrādes koda semantiku. Lai iekļautu stilus citā paplašinājumā, piemēram, css, ir nepieciešams pēdējais.

DARĪT

Šajā lapā ir uzdevumu izstrādes lapa. Plašāku informāciju par darbu ar šo failu varat izlasīt lapā PlainTasks for Sublime Text.

Tas pabeidz konstrukcijas uzstādīšanu.

Spraudņu instalēšana, izmantojot npm pakotņu pārvaldnieku

Node.js pēc noklusējuma ietver pakotņu pārvaldnieku npm, kura krātuvēs ir daudz spraudņu, ar kuriem mums ir jāstrādā.

Gulp spraudņa instalēšana

Pirmkārt, jums ir jāinstalē Gulp globāli (ar slēdzi -g) mūsu sistēmā.

npm instalēt gulp -g

Jums tas jādara vienreiz., turpmāka globāla uzstādīšana nav nepieciešama.

Tagad jums ir jāinstalē Gulp lokāli jūsu projektu direktorijā

npm instalēt gulp-save-dev

Slēdzis --save-dev saka, ka informācija par spraudni (nosaukums krātuvē un tā versija) tiks pievienota package.json konfigurācijai un atcerēsies to šim projektam. Tā kā mēs nesaglabājam smagā svara mapi ar spraudņiem node_modules gitā, informācija par instalētajiem spraudņiem, kas saglabāta konfigurācijā, ļaus tikai vienai komandai npm i izvietot visus nepieciešamos spraudņus projektā.

Katrai komandai ir saīsinājumi, tāpēc iepriekš minēto komandu varam uzrakstīt īsākā formātā

Nākotnē mēs izmantosim arī saīsināto komandu formātu.

Irbulis Spraudnis Gulp

Savos projektos mēs izmantojam Stylus priekšprocesoru, kas lieliski darbojas un apkopo mezglu.

Uzstādīt:

npm i gulp -stylus -D

CSS spraudņi

Automātiskais prefikss- automātiski aizstāj vajadzīgos rekvizītus -ms- -o- -moz- -webkit- prefiksus:

npm i gulp -autoprefixer -D

CSS minifikācija- spraudnis samazina CSS izvades failu, novēršot nevajadzīgas atstarpes un cilnes:

npm i gulp-minify-css -D

Attēlu apstrādes spraudņi

Attēlu apvienošana spritos- jums vairs nav jātērē stundas dārga laika, apvienojot visus attēlus sprītā un pēc tam aprēķinot to koordinātas, šis spraudnis automātiski to visu izdarīs jūsu vietā:

npm i gulp.spritesmith -D

Iepriekš izveidotajam failam stylus.template.mustache pievienojiet masku sprites pozīciju aprēķināšanai:

[(#items)] $ ((name)) = ((px.x)) ((px.y)) ((px.offset_x)) ((px.offset_y)) ((px.width)) (( px.height)) ((px.total_width)) ((px.total_height)) "" (((escaped_image))) ""; ((/ vienumi))

Pievienosim mixins.styl pielāgotus maisījumus:

SpriteWidth ($ sprite) width $ sprite spriteHeight ($ sprite) height $ sprite spritePosition ($ sprite) background-position $ sprite $ sprite spriteImage ($ sprite) background-image url ($ sprite) sprite ($ sprite) if! Match ( "hover", selector ()) &&! match ("active", selector ()) spriteImage ($ sprite) spritePosition ($ sprite) spriteWidth ($ sprite) spriteHeight ($ sprite)

Savienosim miksus un ģenerēto failu ar koordinātām ar galveno stilu lapu src / css / styles.styl:

@import "daļējs / sprite" @import "daļējs / mixins"

Lūdzu, ņemiet vērā, ka sprite faili ir jāiekļauj pirms pielāgotajiem stiliem @import "daļēji / stili"

Attēlu optimizēšana tīmeklim- spraudnis automātiski izgriezīs no jūsu attēliem visu nevajadzīgo informāciju un saspiedīs tos optimālā izmērā, kas dažos gadījumos ļaus samazināt attēlu apjomu līdz pat 90%:

npm i gulp -imagemin -D

JavaScript apstrādes spraudņi

JS minifikācija- spraudnis pēc iespējas samazina jūsu JS kodu, samazinot tā ielādes laiku:

npm i gulp -uglify -D

JS kļūdu izsekošana- spraudnis rūpīgi pārbaudīs jūsu JS kodu, lai identificētu visas neatbilstības un parādītu tās konsolē:

npm i jshint gulp -jshint -D

HTML apstrādes spraudņi

Iekļaut failus- spraudnis ļauj saglabāt statiskas vietnes daļas, piemēram, galveni, kājeni, malā utt., atsevišķos failos un iekļaut tās jebkura cita faila daļā. Nelielu galvenes izmaiņu gadījumā vairs nav jāmaina desmitiem vai pat simtiem veidnes html lapu:

npm i gulp -rigger -D

Spraudnis ir arī saderīgs ar JS.

Iekļausim pielāgoto JS galvenajā JS failā src / js / main.js ar konstrukciju:

// = _main.js

Iekļaujiet failus header.html un footer.html failā index.html

// = iekļaut / header.html// = include / footer.html

Citi spraudņi

LiveReload- spraudnis neļauj jums katru reizi pārlādēt lapu pārlūkprogrammā, lai redzētu izmaiņas, tagad tas notiek automātiski, saglabājot mainīto failu:

npm i gulp -connect -D

Gulp novēršana- dažreiz gadās, ka Gulp kritisku kļūdu gadījumā (galvenokārt JS dēļ) var avarēt no pulksteņa režīma. Šis spraudnis mēģina saglabāt Gulp procesus, kad vien iespējams:

npm i gulp -santehniķis -D

Failu pārdēvēšana- visizplatītākais darbs ar failu nosaukumiem. Spraudnis ļauj pilnībā pārdēvēt failus, mainīt paplašinājumu, pievienot prefiksus un pēcfiksus, piemēram, lai stilā.min.css iekļautu tādu failu kā style.styl:

npm i gulp -pārdēvēt -D

Tīrītājs- dažreiz ir nepieciešams pilnībā iztīrīt būvēšanas direktoriju, šeit spraudnis mums palīdz:

Avota karte- lai jūsu faili paliktu lasāmi, veicot atkļūdošanu pārlūkprogrammā pēc minifikācijas, jums ir jāpievieno avota karte samazinātajiem failiem:

npm i gulp -sourcemaps -D

Pulksteņa uzlabotās funkcijas- spraudnis padara pulksteni gudru, tagad tas nepārraksta visus būvē esošos failus, ja tiek mainīts tikai viens fails, tiek pārrakstīts konkrēts mainītais fails, kas ietaupa laiku un resursus:

npm i gulp -watch -D

Pārbaudiet package.json

Galu galā instalētie spraudņi, pārbaudīsim mūsu package.json. Tam vajadzētu izskatīties apmēram šādi:

("nosaukums": "sākums", "versija": "1.0.0", "apraksts": "Sākuma pakotne priekšgala izstrādei", "autors": "Ivans Ivanovs", "licence": "MIT", "atkarības": (), "devDependencies": ("gulp": "jaunākais", "gulp-autoprefixer": "jaunākais", "gulp-connect": "jaunākais", "gulp-imagemin": "jaunākais", "jshint": "jaunākais", "jshint-stilīgs": "jaunākais", "gulp-jshint": "jaunākais", "gulp-minify-css": "jaunākais", "gulp-santehniķis": "jaunākais", "gulp-rename": "jaunākais", "gulp-rigger": "jaunākais", "gulp-sourcemaps": "jaunākais", "gulp-stylus": "jaunākais", "gulp-uglify": "jaunākais", "gulp-watch": "jaunākais", "gulp.spritesmith": "jaunākais", "rimraf": "jaunākais"))

Pēdējā vietā jūsu gadījumā tiks reģistrētas noteiktas instalēto spraudņu versijas. Jo mēs veidojam savu sākuma paketi, kas tiks izmantota daudzos projektos, kā arī ieteicams versijas vērtības aizstāt ar jaunākajām, lai projektā vienmēr instalētu jaunākās spraudņu versijas.

Mezglam_moduliem vajadzētu parādīties arī projekta mapē, kurā ir visi mezglu spraudņu faili. Ir instalēti visi nepieciešamie spraudņi, varat doties uz Gulp konfigurācijas iestatījumiem.

Gulpfile.js iestatīšana

gulpfile.js- tas ir mūsu uzdevumu pārvaldnieka galvenais konfigurācijas fails, tieši tajā mēs saglabāsim visus iestatījumus un komandas.

Viss Gulp darbs ir atkarīgs no uzdevuma ( Angļu uzdevums). Uzdevums ir atsevišķa, atsevišķa funkcija ar nosaukumu. Katru uzdevumu var izsaukt atsevišķi.

Atbilstības režīms mūsdienu standartiem

Pirmkārt, faila sākumā savienojiet saderības režīmu tikai ar mūsdienu standartiem:

"izmantot stingri";

Jūs varat izlasīt vairāk par šo direktīvu.

Notiek spraudņa inicializēšana

Spraudņi tiek inicializēti ar šādu konstrukciju:

var initPlugin = pieprasīt ("spraudņa nosaukums");

Saskaņā ar šo konstrukciju mēs inicializējam visus mūsu spraudņus:

Var gulp = pieprasīt ("gulp"), // galvenais spraudnis gulp stylus = pieprasīt ("gulp-stylus"), // irbuli priekšapstrādātāja prefikss = pieprasīt ("gulp-autoprefixer"), // pievienojot automātiskos prefiksus cssmin = pieprasīt ("gulp-minify-css"), // minify css uglify = pieprasīt ("gulp-uglify"), // minify js jshint = pieprasīt ("gulp-jshint"), // izsekot kļūdām js rigger = pieprasīt ( "gulp -rigger"), // darbs ar ieslēgumiem html un js imagemin = need ("gulp -imagemin"), // attēlu minimizēšana spritesmith = need ("gulp.spritesmith"), // attēlu apvienošana sprites rimraf = pieprasīt ("rimraf"), // cleanup sourcemaps = pieprasīt ("gulp-sourcemaps"), // sourcemaps rename = pieprasīt ("gulp-rename"), // pārdēvēt failus plumber = pieprasīt ("gulp-plumber"), // aizsargs apstādināšanai galp watch = pieprasīt ("gulp-watch"), // iespēju paplašināšana watch connect = pieprasīt ("gulp-connect"); // tiešā ielāde

Ceļa konstantes

Ērtības labad mēs nekavējoties definēsim visus ceļus un maskas:

Var path = (build: (// Šeit mēs norādām, kur likt failus gatavi pēc montāžas html: "build /", js: "build /js /", css: "build /css /", img: "build / css / images / ", fonti:" build / fonts / ", htaccess:" build / ", contentImg:" build / img / ", sprites:" src / css / images / ", spritesCss:" src / css / partial / "), src: (// Kur iegūt html avotus no:" src / template / *. html ", // Sintakse src / template / *. html pasaka, ka mēs vēlamies ņemt visus failus ar. html paplašinājums js: "src / js / [^ _] *. js", // Stilos un skriptos mums ir nepieciešami tikai galvenie faili jshint: "src / js / *. js", css: "src / css / styles.styl ", cssVendor:" src /css/vendor/*.* ", // Ja vēlamies bibliotēkas failus glabāt atsevišķi, noņemiet komentāru rindā img:" src /css /images /**/*.* " , // Sintakse img /**/*.* nozīmē - paņemt visus visu paplašinājumu failus no mapes un no apakšdirektoriju fontiem: "src /fonts /**/*.*", contentImg: "src /img /* * /*.*", sprites:" src / css / sprites /*. png ", htaccess:" src / .htaccess "), skatīties: (// Šeit mēs norādīsim pēc izmaiņām no kuriem failiem mēs vēlamies skatīties html: "src / template / ** /*. html", js: "src / js / ** /*. js", css: "src / css /**/*.* ", img:" src /css /images /**/*.* ", contentImg:" src /img /**/*.* ", fonti:" src /fonts /**/*.* ", htaccess : "src / .htaccess", sprites: "src / css / sprites / *. png"), tīrs: "./build", // direktoriji, kurus var tīrīt outputDir: "./build" // sākotnējais saknes direktorijs miniservera palaišanai);

Ņemiet vērā, ka mēs varam izmantot vārdu maskas:

• * .js- visi faili ar paplašinājumu js
• [^ _] *. js- visi faili ar paplašinājumu js, izņemot tos, kas sākas ar pasvītrojumu
• *.* - visus failus ar jebkuru paplašinājumu pašreizējā direktorijā
• /**/*.html- visus failus ar paplašinājumu .html pašreizējā direktorijā un visus pakārtotos direktorijus

Uzdevums

Tagad, kad visas konstantes ir uzrakstītas, varat sākt rakstīt uzdevumus. Visiem uzdevumiem ir šāda struktūra:

Gulp.task ("taskName", function () (// dažas funkcijas));

Mini serveris un LiveReload

Pirmkārt, mēs konfigurēsim vietējā servera un LiveReload darbu:

// Vietējais serveris attīstībai gulp.task ("connect", function () (connect.server ((// iestatīt servera konfigurācijas saknes :, // servera sākuma porta saknes direktorijs: 9999, // kādu portu mēs izmantosim livereload: true/ / inicializēt darbu LiveReload));));

Visticamāk, jums bieži vien būs jāstrādā vienlaikus pie vairākiem projektiem vienlaikus. Serveris ļauj vienlaikus darbināt vairākus serverus, pietiek ar porta reģistrēšanu dažādiem projektiem.

Veidot HTML

// uzdevums html veidošanai gulp.task ("html: build", function () (gulp.src (path.src.html) // Atlasiet failus vēlamajā ceļā. pipe (rigger ()) // Palaist caur rigger . pipe (gulp.dest (path.build.html)) // augšupielādējiet tos būvmapē .pipe (connect.reload ()) // Un ielādējiet mūsu serveri atjauninājumiem));

JS uzbūve

// pārbaudiet, vai js nav kļūdu, un izvadiet tos konsolei gulp.task ("jshint: build", function () (return gulp.src (path.src.jshint) // atlasiet failus vēlamajā ceļā.pipe (jshint ( )) // palaist caur jshint .pipe (jshint.reporter ("jshint-stilīgs")); // ieveidot kļūdas izvadi konsolē)); // ēku javascript gulp.task ("js: build", function () (gulp.src (path.src.js) // Atrodiet mūsu galveno failu.pipe (rigger ()) // Palaidiet to caur rigger .pipe ( sourcemaps .init ()) // Initialize sourcemap .pipe (uglify ()) // Saspiest mūsu js .pipe (sourcemaps.write ()) // Pievienot maps.pipe (pārdēvēt ((sufikss: ".min"))) / / izvades failam pievienojiet sufiksu .min .pipe (gulp.dest (path.build.js)) // unload gatavs fails būvē .pipe (connect.reload ()) // Un restartējiet serveri));

Sprite uzbūve

Visi attēli, kas jāapvieno spritos, tiek pievienoti direktorijam src / css / sprites /, un pēc tam, kad tie ir veikti caur Gulp, tie kļūst par vienu sprite attēlu. Jums nevajadzētu ievietot logotipus un fona rakstus bez skaidriem izmēriem.

// build sprites gulp.task ("sprites: build", function () (var spriteData = gulp.src (path.src.sprites) // izvēlieties, kur iegūt attēlus, lai tos apvienotu sprite.pipe (spritesmith ((imgName : "sprite.png", // sprite attēla nosaukums cssName: "sprite.styl", // stila nosaukums, kurā mēs saglabājam attēlu pozīcijas sprite imgPath: "images / sprite.png", // ceļš, kur sprite ir cssFormat: "irbulis", // formāts, kādā mēs apstrādājam pozīcijas cssTemplate: "stylus.template.mustache", // maskas fails cssVarMap: function (sprite) (sprite.name = "s-" + sprite.name // katra sprite nosaukums sastāv no faila nosaukuma un konstrukcijas "s-" nosaukuma sākumā)))); spriteData.img.pipe (gulp.dest (path.build.sprites)) ; // ceļš, kur mēs saglabājam attēlu spriteData.css.pipe (gulp.dest (ceļš .build.spritesCss)); // ceļš, kur saglabājam stilus));

Lai parādītu sprite, vienkārši izmantojiet mixin. Piemēram, faila lorem.png paraugs no sprite izskatīsies šādi:

Lorema sprite ($ s-lorem)

Tagad objekts ar klasi .lorem kā fonu ņems attēla izmērus un pašu attēlu.

Veidojiet statiskus attēlus

Statiskie attēli ir attēli, kas tiek izmantoti izkārtojuma veidnē.

// veidot statiskus attēlus gulp.task ("image: build", function () (gulp.src (path.src.img) // Atlasiet mūsu attēlus.pipe (imagemin ((// Saspiest tos progresīvi: true, // compression.jpg svgoPlugins: [(removeViewBox: false)], // compression.svg interlaced: true, // compression.gif optimizationLevel: 3 // kompresijas pakāpe no 0 līdz 7))) .pipe (gulp.dest (ceļš. build.img)) // augšupielādēt, lai izveidotu .pipe (connect.reload ()) // restartējiet serveri));

Dinamisku attēlu veidošana

Dinamiski attēli ir satura attēli, kas mainīsies vietnē un ir savienoti veidnes līmenī tikai demonstrēšanai. Piemēram, tas var būt ziņu attēli utt.

// veidot dinamiskus attēlus gulp.task ("imagescontent: build", function () (gulp.src (path.src.contentImg) .pipe (imagemin ((// Saspiest tos progresīvi: true, // compress.jpg svgoPlugins: [(removeViewBox: false)], // compression.svg interlaced: true, // compression.gif optimizationLevel: 3 // kompresijas pakāpe no 0 līdz 7))) .pipe (gulp.dest (path.build.contentImg)) // augšupielādēt, lai izveidotu .pipe (connect.reload ()) // restartējiet serveri));

Izveidojiet CSS

// pielāgota css veidošana gulp.task ("cssOwn: build", function () (gulp.src (path.src.css) // Atlasiet mūsu galveno stila lapu.pipe (sourcemaps.init ()) // inicializēt soucemap. pipe (irbulis ((komprese: true, "include css": true))) // Sastādīt irbuli .pipe (prefikss ((pārlūks: ["pēdējā 3 versija", "> 1%", "ti 8", "ti 7) "]))) // Pievienot piegādātāja prefiksus .pipe (cssmin ()) // Compress.pipe (sourcemaps.write ()) // rakstīt sourcemap .pipe (pārdēvēt ((sufikss:" .min ")))) / / pievienojiet .min sufiksu izvades faila nosaukumam.pipe (gulp.dest (path.build.css)) // augšupielādēt, lai izveidotu .pipe (connect.reload ()) // restartējiet serveri));

Atsevišķs uzdevums ārējiem stiliem:

// ēku pārdevēja css gulp.task ("cssVendor: build", function () (gulp.src (path.src.cssVendor) // Paņemiet piegādātāja mapi .pipe (sourcemaps.init ()) // inicializēt soucemap .pipe [cssmin ()] // Compress.pipe (sourcemaps.write ()) // rakstīt sourcemap .pipe (gulp.dest (path.build.css)) // augšupielādēt, lai izveidotu .pipe (connect.reload ()) / / pārstartējiet serveri));

Pievienosim arī vispārīgu CSS veidošanas uzdevumu:

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

Ja jums ir jāapstrādā ārējie stili atsevišķi no mājas stiliem un jāizkrauj tie atsevišķus failus jāatceļ rindiņa "cssVendor: build"

Fonta veidošana

// veidot fontus gulp.task ("fonts: build", function () (gulp.src (path.src.fonts) .pipe (gulp.dest (path.build.fonts)) // augšupielādēt, lai izveidotu));

Htaccess būve

// veidot htaccess gulp.task ("htaccess: build", function () (gulp.src (path.src.htaccess) .pipe (gulp.dest (path.build.htaccess)) // augšupielādēt, lai izveidotu));

Vispārēja uzbūve

Lai mums nebūtu jāveido katra daļa atsevišķi, mēs uzrakstīsim uzdevumu vispārējai būvei:

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

Būves tīrīšana

Dažreiz ir nepieciešams pilnībā iztukšot būvniecības direktoriju. Šeit mums palīdzēs šāds uzdevums:

// notīrīt būvmapi gulp.task ("tīrīt", funkcija (cb) (rimraf (ceļš.tīrīt, cb);));

Skatieties vai izsekojiet izmaiņas reāllaikā

Viens no svarīgākajiem un noderīgas funkcijas Gulp ir pulksteņa funkcija, kas ļauj reālā laikā uzraudzīt visas izmaiņas izveidotajos failos un atkarībā no tā veikt īpašas darbības:

// skatīties gulp.task ("skatīties", funkcija () (// veidot html izmaiņu gadījumā skatīties (, funkcija (notikums, cb) (gulp.start ("html: veidot");)); // veidot sprites pārmaiņu gadījumā skatīties (, funkcija (notikums, cb) (gulp.start ("sprites: build");))); // veidot konteksta attēlus pārmaiņu novērošanas gadījumā (, funkcija (notikums, cb) (gulp. start ("imagescontent: build");)); // build css pārmaiņu gadījumā skatīties (, funkcija (notikums, cb) (gulp.start ("css: build");)); // pārbaudīt js gadījumā of change watch (, ["jshint"]); // build js for change watch (, funkcija (notikums, cb) (gulp.start ("js: build");)); // veidot statiskus attēlus pārmaiņu skatīšanās gadījums (, funkcija (notikums, cb) (gulp.start ("image: build");)); // veidot fontus pārmaiņu skatīšanās gadījumā (, funkcija (notikums, cb) (gulp.start (" fonts: build ");)); // build htaccess izmaiņu gadījumā skatīties (, funkcija (notikums, cb) (gulp.start (" htaccess: build ");));));

Noklusējuma darbības

Noklusējuma darbības ir uzdevumi, kurus uzdevumu pārvaldnieks veiks, kad konsolē ievadīsit komandu gulp:

// noklusējuma darbības gulp.task ("noklusējums", ["veidot", "skatīties", "savienot"]);

Mūsu gadījumā mēs pabeigsim savu projektu, iespējosim skatīšanās režīmu un iedarbināsim serveri.

Komandrindas komandas

Visas komandrindas galp komandas sastāv no divām daļām, tas ir pats gulp komanda un atstarpi, ko atdala uzdevuma nosaukums. Šeit ir mūsu konfigurācijai piemērojamo komandu saraksts:

• gulp - galvenā komanda, palaiž noklusējuma uzdevumu
• gulp build - būvē visu
• gulp watch - sāc skatīties
• gulp clean - sakopt uzbūves direktoriju
• gulp connect - palaidiet serveri
• gulp html: veidot - veidot HTML
• gulp jshint: build - pārbaudiet, vai JS nav kļūdu
• gulp js: būvēt - veidot JS
• gulp sprites: būvēt - veidot sprite
• gulp image: veidot - veidot statiskus attēlus
• gulp imagecontent: veidot - veidot dinamiskus attēlus
• gulp cssOwn: veidot - veidot pielāgotu CSS
• gulp cssPārdevējs: veidot - veidot ārēju CSS
• gulp css: build - vispārēja CSS būve
• gulp fonts: veidot - veidot fontus
• gulp htaccess: veidot - veidot htaccess

Šajā brīdī gulpfile.js iestatīšana ir pabeigta.

Sākuma pakotnes kopēšana projektam

Vispirms ejiet cauri konsolei mapē, kurā mēs izstrādājam, piemēram, cd develop / example un nokopējiet visu no sākuma pakotnes direktorija uz mūsu projektu cp -a ~ / develop / start /. ~ / izstrādāt / piemērs /

Šī kopēšanas metode ir visērtākā, jo nokopēs visu precīzi, ieskaitot slēptos .gitignore failus utt.

Secinājums

Izmantojot šo rokasgrāmatu mēs esam sagatavojuši sākuma paketi Gulp izmantošanai mūsu front-end attīstības projektos.

Šī pakete ir pieejama arī vietnē GitHub.

Pēcraksts

Šis raksts nav galīgs un tiks atjaunināts atkarībā no izmaiņām un uzlabojumiem.