Hej alle sammen, venner! I dag vil vi se nærmere på, hvad Gulp er, og hvordan det kan bruges til at automatisere arbejdet hos en frontend-udvikler. Som et resultat af lektionen vil vi sammensætte et seriøst og imponerende fungerende front-end miljø til webudvikling ved hjælp af Gulp.

Video lektion:

Fedt nok

Stammer

• Selvstudium om opgradering af Gulp til version 4: Tjek Gulp 4-vejledningen

https://github.com/agragregra/gulp-lesson

Gulp er et værktøj, der hjælper med at automatisere rutinemæssige webudviklingsopgaver. Gulp er designet til at løse problemer som:

• Oprettelse af en webserver og automatisk genindlæsning af siden i browseren, når koden gemmes, overvågning af ændringer i projektfiler;
• Brug af forskellige JavaScript-, CSS- og HTML-forbehandlere (CoffeeScript, Less, Sass, Stylus, Jade osv.);
• Minifikation af CSS og JS kode, samt optimering og sammenkædning af individuelle projektfiler til én;
• Automatisk oprettelse af leverandørpræfikser (præfikser til navnet på CSS-egenskaber, som browserproducenter tilføjer for ikke-standardegenskaber) for CSS.
• Håndtering af filer og mapper i projektet - oprettelse, sletning, omdøbning;
• Lancering og overvågning af udførelsen af ​​eksterne operativsystemkommandoer;
• Arbejde med billeder - komprimering, oprettelse af sprites, ændring af størrelse (png, jpg, svg osv.);
• Implementer (send til en ekstern server) et projekt via FTP, SFTP, Git osv.
• Tilslutning og brug af et ubegrænset antal Node.js og Gulp hjælpeprogrammer, programmer og plugins i et projekt.
• Udarbejdelse af diverse projektkort og automatisering af andet manuelt arbejde.

Det er sikkert at sige, at Gulp og de mange hjælpeprogrammer, der er skrevet til det, er velegnede til at løse næsten ethvert problem, når man udvikler et projekt af enhver kompleksitet - fra en lille hjemmeside til et stort projekt.

Ethvert projekt, der bruger Gulp, har en fil i roden gulpfile.js, som indeholder et sæt projektstyringsinstruktioner. Jeg vil gerne sige med det samme, at det at skrive instruktioner til Gulp ikke er programmering, selvom de er skrevet i JavaScript. Vær ikke bange for store gulpfile.js, stort set alle instruktionerne er de samme og har fælles funktioner. Når du læser denne guide, burde du ikke have nogen spørgsmål om Gulp, da byggesystemet er enkelt. Men hvis du stadig har spørgsmål, så husk at skrive i kommentarerne.

Installation af Gulp

Opmærksomhed! Hvis du er bruger af den seneste version af Windows, anbefaler jeg at bruge Bash-terminalen til webudvikling. I dette tilfælde er det ikke nødvendigt at downloade installationsprogrammet fra Nodejs.org. Brug denne vejledning:.

Hvis du har problemer med at gennemføre selvstudiet med Gulp 4, anbefaler jeg at rulle tilbage til version 3, gennemgå hele selvstudiet og først derefter opdatere package.json til version 4. For bedre forståelse. Du kan rulle versionen tilbage i filen package.json. I stedet for "gulp": "^4.x.x", skriv versionen "^3.9.1", slet mappen "node_modules" og installer pakkerne igen " npm i".

For at arbejde med Gulp skal du have Node.js installeret. Installation af Node.js til forskellige platforme er ret simpelt - download Node-installationsprogrammet til dit operativsystem og installer. Jeg anbefaler at installere den nyeste version af Stable. Til Linux og nyeste Windows-brugere har jeg udarbejdet en separat installationsvejledning: Brug af Linux-undersystemet til webudvikling i Windows 10.

Når Node er installeret, kan du begynde at installere Gulp. Åbn en terminal (højreklik på mappen, mens du holder Shift > Åbn Linux Shell her) og kør følgende kommando:

Npm i gulp -g

For Mac- og Linux-brugere og Ubuntu bash på Windows skal global installation med -g-switchen udføres med superbrugerrettigheder, sudo, For eksempel:
sudo npm i gulp -g.

Fra denne kommando ser vi, at pakkehåndteringen er startet npm(Node Package Manager), som installerer Gulp i systemet med installeringskommandoen. Nøgle -g angiver, at pakken vil blive installeret på systemet globalt, det vil sige på systemet, og ikke i projektmappen. Uden -g-switchen er pakken installeret i mappen, hvori de aktuelle kommandoer udføres, så vær forsigtig.

Oprettelse af et Gulp-projekt

Lad os oprette et eksempel på en projektmappe at arbejde med, lad det for eksempel være mappen mit projekt.

Meget vigtigt! Opret ikke russisksprogede projektmapper, og sørg for, at stien til projektmappen ikke indeholder kyrilliske tegn, det vil sige, at den ikke er skrevet på russisk. Ellers kan du have problemer med at køre forskellige Gulp-værktøjer. Din brugers mappe bør heller ikke være på russisk. Alt er kun med latinske bogstaver.

Lad os nu åbne en terminal i projektmappen. For Windows-brugere skal du bare holde Shift nede og åbne kontekstmenuen. Der vil være en mulighed "Åbn Linux shell her". Linux-skallen skal være forudinstalleret, se selvstudium: Brug af Linux-undersystemet til webudvikling på Windows.

Npm init

Følg instruktionerne, lad os udfylde metaoplysningerne om vores projekt:

Som et resultat af denne enkle indledende opsætning af vores nye Gulp-projekt, vil en ny fil blive tegnet i myproject-mappen package.json.

Package.json filen er vores projekts manifestfil, som beskriver, udover de oplysninger, som vi har indtastet i terminalen, også oplysninger om de pakker, der er brugt i vores projekt.

For eksempel hvis vi installerer Gulp i et projekt med nøglen --save-dev, så vil den anvendte pakke og version automatisk blive tilføjet til vores package.json. Et sådant regnskab giver dig mulighed for hurtigt at implementere et nyt projekt ved hjælp af en eksisterende package.json og installere de nødvendige moduler med afhængigheder, der er specificeret i package.json i nye projekter.

Lad os installere Gulp i vores projekt:

Npm i gulp --save-dev

Hvad vi ser fra denne linje: npm installerer gulp-pakken i den aktuelle myproject-mappe (fordi der ikke er nogen -g-switch til at installere pakken globalt på systemet) og gemmer pakkenavnet med versionen i filen package.json:

Derudover har vi en mappe node_modules, som nu indeholder gulp-pakken installeret og de nødvendige afhængigheder. Alle moduler og afhængigheder, som vi installerer i projektet, vil automatisk blive dumpet i denne mappe. Der kan være rigtig mange mapper med afhængigheder, på trods af at vi ikke har installeret så mange pakker. Dette skyldes det faktum, at der ud over hovedpakkerne er installeret programmer, der er nødvendige for den korrekte drift af hovedpakken. Der er ingen grund til at rense eller slette noget fra mappen node_modules. Derudover kan du have en ekstra fil package-lock.json. Der er ikke noget galt med dette, det er en servicefil, som du simpelthen kan ignorere.

Katalogstruktur i projekter

Når du arbejder med forskellige plugins, programmer og scripts, det være sig et jQuery-plugin, et modul til et CMS, et webprojekt eller anden software, har du sikkert bemærket, at alle projekter har en lignende mappestruktur, for eksempel har de fleste projekter en mappe dist Og app. Lad os skabe den indledende struktur for vores læringsprojekt. Som et resultat skal vi oprette følgende struktur i vores projekt myproject (alle filer, der ikke eksisterede, vil blive oprettet tomme indtil videre):

• mit projekt/
  • app/
    • css/
    • skrifttyper/
    • img/
    • js/
    • sur/
    • index.html
  • dist/
  • node_modules/
  • gulpfile.js
  • package.json

Denne struktur findes ret ofte i næsten alle projekter, men dette er ikke et aksiom, og nogle projekter kan have en helt anden struktur. Til denne artikel vil vi bruge netop denne projektstruktur.

Her ser vi folderen app/, som vil indeholde alle projektets kildemateriale - originale CSS, Sass, js-biblioteksfiler, originale billeder. Generelt er dette kildemappen til vores projekt.

Folder dist/ vil indeholde et færdigt produkt, optimeret, komprimeret, kæmmet. Dette er produktionsfolderen.

gulpfile.js

Lad os nu åbne det i kodeeditoren gulpfile.js og skriv ind i det:

Var gulp = require("gulp");

Med denne linje forbinder vi Gulp med vores projekt ved hjælp af funktionen kræve. Denne funktion forbinder pakker fra mappen node_modules til vores projekt og tildeler dem til en variabel. I dette tilfælde opretter vi en variabel sluge.

Gulp.task("mytask", function() ( console.log("Hej, jeg er en opgave!"); ));

min opgave er navnet på den kommando, du vil kalde på den placering, du har brug for i gulpfile.js. Derudover kan du udføre opgaven direkte på kommandolinjen ved at skrive:

Gulp mytask

gulpfile.js:

Resultatet af kommandoen gulp min opgave:

Hvis du bruger Gulp 4, og du får en fejl om, at opgaven ikke kan fuldføres, kan du tilføje async before function() og udføre koden asynkront: var gulp = require("gulp"); gulp.task("mytask", async function() ( console.log("Hej, jeg er en opgave!"); ));

Dette er naturligvis et meget simpelt grundlæggende eksempel på at lave en opgave. Som regel er opgaver noget mere komplekse og inkluderer nogle ekstra kommandoer:

Gulp.task("mytask", funktion () ( return gulp.src("kildefiler") // Valg af kildefiler til behandling af plugin.pipe(plugin()) // Kaldning af Gulp-plugin for at behandle filen .pipe(gulp .dest("mappe")) // Output den resulterende fil til destinationsmappen (dest er destinationen)))

• gulp.src- udvælgelse af projektkildefiler til behandling af plugin'et;
• .pipe(plugin())- kalder Gulp-plugin'et for at behandle filen;
• .pipe(gulp.dest("mappe"))- output den resulterende fil til destinationsmappen (dest - destination).

Dette er Gulp-basen, nu kan du oprette instruktioner. Lad os først oprette en handler, der vil kompilere Sass-filer til CSS (CSS-forbehandling).

Gulp Sass

Lad os installere pakken gulp-sass til vores projekt, gemmer versionen og navnet i package.json.

Bemærk venligst, at alle Gulp-pakker, til enhver opgave, er nemme at Google og har ret omfattende instruktioner til tilslutning på deres hjemmesider og i dokumentationen.

npm i gulp-sass --save-dev

Var gulp = require("gulp"), sass = require("gulp-sass"); //Tilslut Sass-pakken

Lad os oprette en fil i app/sass-mappen main.sass, indstil kropsbaggrunden til sort og skriv en handler til den i gulpfile.js

gulpfile.js:

Var gulp = require("gulp"), // Connect Gulp sass = require("gulp-sass"); //Forbind Sass-pakken gulp.task("sass", function())( // Opret en opgave "sass" return gulp.src("app/sass/main.sass") // Tag source.pipe( sass()) // Konverter Sass til CSS ved hjælp af gulp-sass .pipe(gulp.dest("app/css")) // Upload resultatet til app/css-mappen));

Herefter ville det være logisk at udføre vores nye opgave i terminalen frækt:

Gulp sass

Som et resultat af at udføre denne kommando, vises en fil i app/css-mappen main.css.

Fra de samme mirakler, min ven. Som du kan se, er alt simpelt :-)

Valg af filer til gulp.src

Grundlæggende har vi dækket alt, hvad der er at vide om Gulp, nu vil vi dykke ned i alle detaljer af det, der blev skitseret ovenfor.

Valget af filer i eksemplet ovenfor er ret simpelt; vi tog filen direkte: gulp.src("app/sass/main.sass"). Men filer kan også vælges efter skabelon. Filvalgsmønsteret kaldes glob- https://en.wikipedia.org/wiki/Glob_(programmering) . Lad os se nærmere på alle mulighederne for at vælge filer til behandling.

Mest almindelige prøveudtagningsmønstre

• *.sass- vælger alle filer, der har en specifik filtypenavn (i dette tilfælde .sass) i rodmappen projekt.
• **/*.js- vælger alle filer med filtypenavnet .js i alle projektmapper.
• !header.sass- udelukker filen fra det generelle valg
• *.+(scss|sass)- angiver et komplekst mønster for flere filtyper, adskilt af en lodret streg. I dette eksempel vil valget inkludere alle sass- og scss-filer i projektroden.

Lad os lave nogle ændringer i opgaven frækt og gør det mere universelt:

Gulp.task("sass", function())( return gulp.src("app/sass/**/*.sass") // Tag alle sass-filer fra sass-mappen og underordnede, hvis nogen.pipe( sass( )) .pipe(gulp.dest("app/css")) ));

Faktum er, at det ikke altid er praktisk at tage en separat fil direkte, da det er i mappen frækt Der kan være andre filer med sass-udvidelsen, der kan bruges i projektet.

Bemærk venligst, at sass-filer, der er beregnet til at blive importeret til andre filer som en del af en fælles fil, begynder med en understregning _del-1.sass. Sådanne filer deltager ikke i kompileringen som separate filer, men tilføjes via @import til hovedfilerne.

Overvågning af ændringer i filer (Gulp Watch)

Gulp understøtter metoden holde øje for at kontrollere gemte filer og har følgende syntaks:

Gulp.watch("watch-filer", ["opgave1", ​​"opgave2"]);

Hvis vi for eksempel ønsker at overvåge alle ændringer i vores projekts sass-filer, kan vi bruge følgende konstruktion:

Gulp.watch("app/sass/**/*.sass", ["sass"]);

Hvad vi ser: Gulp overvåger alle sass-filer, og når de er gemt, udfører de en sass-opgave, der automatisk kompilerer dem til css-filer.

Vi kan også oprette en separat opgave for at overvåge alle de nødvendige filer

Gulp.task("watch", function() ( gulp.watch("app/sass/**/*.sass", ["sass"]); // Ser sass-filer // Ser andre filtyper ) );

For Gulp 4 vil koden se sådan ud: gulp.task("watch", function() ( gulp.watch("app/sass/**/*.sass", gulp.parallel("sass")); ) );

Hvis vi kører i konsollen gulp ur så vil Gulp automatisk se efter alle ændringer i sass-filer, når de gemmer og kompilere dem til css.

Det ville være rart, ud over denne skønhed, automatisk at genindlæse siden, når der er ændringer i filer. Til denne opgave er Browser Sync velegnet til os.

Automatisk sideopdatering ved hjælp af Bbrowser Sync

Browser synkronisering er en fremragende løsning til LiveReload-sider, når du gemmer filer. Desuden sker genindlæsningen ikke kun i én browser, men også i alle browsere på netværket, det være sig mobile enheder eller andre computere på det samme Wi-Fi-netværk.

Vi ved allerede, hvordan man installerer tilføjelser til Gulp, så lad os installere Browser Sync i vores projekt:

Npm i browser-sync --save-dev

Og vi vil selvfølgelig inkludere det i gulpfile.js-filen, som vi gjorde tidligere med gulp-sass-pakken.

Var gulp = require("gulp"), // Include Gulp sass = require("gulp-sass"), // Inkluder Sass-pakken, browserSync = require("browser-sync"); // Connect Browser Sync

Opret en opgave til Browser Sync:

Gulp.task("browser-sync", function() ( // Opret en opgave browser-sync browserSync(( // Udfør browser Sync server: ( // Definer serverparametre baseDir: "app" // Directory for serveren - app ) , notify: false // Deaktiver meddelelser )); ));

Store! Vores server er klar til drift og automatisk genindlæsning. Lad os nu følge ændringerne i Sass. Hvis Sass-filen opdateres, injicerer vi automatisk den ændrede CSS-fil i HTML:

Gulp.task("sass", function())( // Opret en Sass-opgaveretur gulp.src("app/sass/**/*.sass") // Tag source.pipe(sass()) / / Transformer Sass i CSS ved hjælp af gulp-sass .pipe(gulp.dest("app/css")) // Upload resultatet til app/css-mappen .pipe(browserSync.reload((stream: true))) // Opdater CSS'en på siden, når du ændrer ));

Alt, hvad vi skal gøre, er at køre browser-synkroniseringsopgaven, før den starter gulp ur. Lad os ændre opgaven lidt holde øje ved at tilføje udførelse browser-synkronisering Og frækt før lanceringen holde øje:

Gulp.task("watch", ["sass", "browser-sync"], function() ( gulp.watch("app/sass/**/*.sass", ["sass"]); // Overvågning af sass-filer // Overvågning af andre filtyper ));

Bemærk venligst, at vi udfører opgaver ["sass", "browser-sync"] før lancering holde øje, da deres udførelse er nødvendig for, at vi kan vise ændringer korrekt på tidspunktet for serverstart.

For Gulp 4 ville det være mere logisk at skrive dette og udføre hele strukturen i standardopgaven: gulp.task("watch", function() ( gulp.watch("app/sass/**/*.sass" , gulp.parallel(" sass")); )); gulp.task("standard", gulp.parallel("sass", "browser-sync", "watch"));

Lad os placere vagtopgaven efter alle andre opgaver, og som et resultat får vi dette gulpfile.js til Gulp 3:

Var gulp = require("gulp"), // Include Gulp sass = require("gulp-sass"), // Inkluder Sass-pakken, browserSync = require("browser-sync"); // Connect Browser Sync gulp.task("sass", function())( // Opret en Sass-opgaveretur gulp.src("app/sass/**/*.sass") // Tag source.pipe(sass () ) // Konverter Sass til CSS ved hjælp af gulp-sass .pipe(gulp.dest("app/css")) // Upload resultatet til app/css-mappen .pipe(browserSync.reload((stream: true) )) // Vi opdaterer CSS'en på siden, når den ændres)); gulp.task("browser-sync", function() ( // Opret en opgave browser-sync browserSync(( // Udfør browserSync server: ( // Definer serverparametre baseDir: "app" // Directory for serveren - app ), notify: false // Deaktiver meddelelser )); )); gulp.task("watch", ["sass", "browser-sync"], function() ( gulp.watch("app/sass/**/*.sass", ["sass"]); // Overvågning af sass-filer // Overvågning af andre filtyper ));

Dette er koden til Gulp 4:

Var gulp = require("gulp"), // Include Gulp sass = require("gulp-sass"), // Inkluder Sass-pakken, browserSync = require("browser-sync"); // Connect Browser Sync gulp.task("sass", function())( // Opret en Sass-opgaveretur gulp.src("app/sass/**/*.sass") // Tag source.pipe(sass () ) // Konverter Sass til CSS ved hjælp af gulp-sass .pipe(gulp.dest("app/css")) // Upload resultatet til app/css-mappen .pipe(browserSync.reload((stream: true) )) // Vi opdaterer CSS'en på siden, når den ændres)); gulp.task("browser-sync", function() ( // Opret en opgave browser-sync browserSync(( // Udfør browserSync server: ( // Definer serverparametre baseDir: "app" // Directory for serveren - app ), notify: false // Deaktiver meddelelser )); )); gulp.task("watch", function() ( gulp.watch("app/sass/**/*.sass", gulp.parallel("sass")); // Overvågning af sass-filer )); gulp.task("standard", gulp.parallel("sass", "browser-sync", "watch"));

For at overvåge ændringer i browseren laver vi den passende markering i index.html-filen i app-biblioteket med forbindelsen til stilfilen main.css:

Lad os køre kommandoen "gulp" i terminalen. Resultatet er fascinerende:

Lad os finde ud af, hvad der sker i konsollen (billedet kan variere afhængigt af softwareversionen):

Efter at vi er tilfredse med resultatet, opstår der et meget forventet spørgsmål - hvordan man helt præcist opdaterer siden, mens man gemmer HTML og JS?

Og vi er klar til denne opgave. Opret en fil i app/js-mappen almindelig.js. Dette er den primære brugerdefinerede JS-fil i vores projekt. Lad os ændre koden:

Kode til Gulp 3:

Gulp.task("watch", ["sass", "browser-sync"], function() ( gulp.watch("app/sass/**/*.sass", ["sass"]); // Overvågning af sass-filer i sass-mappen gulp.watch("app/*.html", browserSync.reload); // Overvågning af HTML-filer i projektets rod gulp.watch(["app/js/common.js", "app /libs/**/*.js"], browserSync.reload); // Overvågning af JS-hovedfilen og bibliotekerne ));

Kode til Gulp 4 (her er det bedre at tilføje en ekstra opgave til behandling af HTML og JS):

Gulp.task("scripts", function() ( return gulp.src(["app/js/common.js", "app/libs/**/*.js"]) .pipe(browserSync.reload(( stream: sand ))) )); gulp.task("kode", function() (retur gulp.src("app/*.html") .pipe(browserSync.reload((stream: true ))))); gulp.task("watch", function() ( gulp.watch("app/sass/**/*.sass", gulp.parallel("sass")); // Overvågning af sass-filer gulp.watch(" app /*.html", gulp.parallel("code")); // Se HTML-filer i projektets rod gulp.watch(["app/js/common.js", "app/libs/**/* . js"], gulp.parallel("scripts")); // Overvågning af JS-hovedfilen og bibliotekerne )); gulp.task("standard", gulp.parallel("sass", "browser-sync", "watch"));

Her bruger vi browserSync.reload-funktionen, som venligst blev leveret til os af Browser Sync-pakken. Bemærk venligst udvalget af sporingsfiler.

I princippet har vi allerede et ret avanceret arbejdsmiljø. Men videre, det er ikke alt, hvad Gulp er i stand til.

JavaScript optimering

Lad os se på, hvordan du kan optimere dit projekts JS-filer. Oftest har biblioteker og tredjeparts jQuery- og JavaScript-plugins brug for optimering. Lad os oprette i en mappe app pakke libs, som vil indeholde de nødvendige biblioteker til projektet. Vi vil placere alle biblioteker i separate mapper. For at installere nye biblioteker anbefaler jeg at bruge Bower.

Installer Bower:

Npm i -g bower

Bemærk venligst, at Bower kræver, at Git er installeret. Hvis du bruger Ubuntu bash-skallen på Windows, behøver du ikke installere Git.

Lad os nu oprette en fil i projektmappen .bowerrc, hvori vi skriver:

("mappe": "app/libs/")

Hvis du er en Windows-bruger, kan du ikke bare oprette en fil, der starter med en prik. I dette tilfælde kan du blot sætte et punktum i slutningen af ​​filen og trykke på Enter: .bowerrc.

Med denne indstilling angiver vi standardstien til installation af plugins vha Bower.

Lad os installere jQuery og Magnific Popup, for eksempel:

Bower og jquery magnific-popup

Bemærk venligst, at alle (eller næsten alle) plugins har en dist-mappe, vi talte om dette tidligere. Denne folder indeholder færdige produktionsfiler, som vi vil bruge i vores projekt.

Lad os lave en opgave scripts, som samler alle JS-biblioteksfiler i én og formindsker filen. For at gøre dette skal du installere 2 pakker: gulp-concat og gulp-uglifyjs.

Npm i --save-dev gulp-concat gulp-uglifyjs

Lad os inkludere nye biblioteker i gulpfile.js:

Var gulp = require("gulp"), // Connect Gulp sass = require("gulp-sass"), // Connect the Sass-pakken, browserSync = require("browser-sync"), // Connect Browser Sync concat = require ("gulp-concat"), // Connect gulp-concat (til filsammenkædning) uglify = require("gulp-uglifyjs"); // Connect gulp-uglifyjs (til JS-komprimering)

Vi opretter en opgave til at bygge og komprimere alle biblioteker (før visning):

Gulp.task("scripts", function() ( return gulp.src([ // Tag alle de nødvendige biblioteker "app/libs/jquery/dist/jquery.min.js", // Tag jQuery "app/libs/ magnific -popup/dist/jquery.magnific-popup.min.js" // Tag Magnific Popup ]).pipe(concat("libs.min.js")) // Saml dem i en bunke i en ny fil libs. min.js .pipe(uglify()) // Komprimer JS-filen.pipe(gulp.dest("app/js")); // Upload til app/js-mappen));

Lad os se, hvordan vores nye opgave fungerer scripts ved at køre i terminalen:

Udførelse af en opgave scripts kan køres før uret udføres. Gulp 3:

For Gulp 4 vil koden se sådan ud - tilføj en opgave til parallel eksekvering scripts(en eller anden struktur er allerede blevet indstillet tidligere): gulp.task("watch", function() ( gulp.watch("app/sass/**/*.sass", gulp.parallel("sass")); / / Observation for sass-filer gulp.watch("app/*.html", gulp.parallel("code")); // Overvågning af HTML-filer i projektets rod gulp.watch(["app/js/common.js" , " app/libs/**/*.js"], gulp.parallel("scripts")); // Overvågning af JS-hovedfilen og bibliotekerne )); gulp.task("standard", gulp.parallel("sass", "scripts", "browser-sync", "watch"));

Dernæst kan du forbinde alle de nødvendige CSS-biblioteksfiler til projektet. I vores tilfælde skal der kun medtages ét bibliotek - dette er Magnific Popup. Lad os klare det @importere i Sass-fil sass/libs.sass:

@import "app/libs/magnific-popup/dist/magnific-popup.css" // Importer Magnific Popup-biblioteket

Opmærksomhed! I nye versioner gulp-sass For at importere CSS-filer til Sass skal du angive filtypenavnet .css og importere CSS-filer til SASS-filer med en understregning i begyndelsen af ​​navnet. For at importere filen library-name.css for eksempel, skal du oprette en ekstra SASS-fil, for eksempel _libs.sass, og importere den nødvendige CSS til den - @import "app/libs/biblioteksnavn.css" og tilføj hjælpeprogrammet _libs.sass til main.sass'en uden at specificere understregningen og udvidelsen, for eksempel sådan: @import "libs"

Ved udgangen modtager vi i app/css-mappen, udover main.css, filen libs.css, som indeholder stilene for alle biblioteker. Der er ingen mening i at formindske filen main.css, da den indeholder brugerdefinerede (bruger) stilarter. Men vi er glade for at minificere filen libs.css.

Opmærksomhed! Hvis der ikke vises nogen bibliotekskode i libs.css-filen, og du stadig ser @import-sætninger i den, skal du oprette en separat _libs.sass-fil til de biblioteker, der starter med understregning. Importer derefter denne fil til den primære fil, hvorved både bibliotekerne og brugerdefinerede stilarter kombineres i én fil.

Installer pakker for at formindske CSS gulp-cssnano Og gulp-omdøb:

Npm og gulp-cssnano gulp-rename --save-dev

Og lad os forbinde dem i vores gulpfile.js:

Var gulp = require("gulp"), // Connect Gulp sass = require("gulp-sass"), // Connect the Sass-pakken, browserSync = require("browser-sync"), // Connect Browser Sync concat = require ("gulp-concat"), // Inkluder gulp-concat (til filsammenkædning) uglify = require("gulp-uglifyjs"), // Inkluder gulp-uglifyjs (til JS-komprimering) cssnano = require("gulp-cssnano " ), // Tilslut pakken til CSS minification rename = require("gulp-rename"); // Inkluder biblioteket for at omdøbe filer

Og lav den tilsvarende opgave css-libs. Lad os straks tilføje denne opgave til at se, så bibliotekerne bliver samlet under projektlanceringen. Det er bedre at kalde sass-opgaven, før du kører css-libs, så vi har noget at formindske:

Gulp.task("css-libs", ["sass"], function() ( return gulp.src("app/sass/libs.sass") // Vælg filen til minify.pipe(sass()) / / Konverter Sass til CSS med gulp-sass .pipe(cssnano()) // Compress.pipe(rename((suffiks: ".min"))) // Tilføj suffix.min .pipe(gulp.dest("app/ css ")); // Upload til app/css-mappen)); gulp.task("watch", ["browser-sync", "css-libs", "scripts"], function() ( gulp.watch("app/sass/**/*.sass", ["sass "]); // Overvågning af sass-filer i sass-mappen gulp.watch("app/*.html", browserSync.reload); // Overvågning af HTML-filer i projektets root gulp.watch(["app/js/common) .js", "app/libs/**/*.js"], browserSync.reload); // Overvågning af JS-hovedfilen og bibliotekerne ));

Kode til Gulp 4:

Gulp.task("css-libs", function() ( return gulp.src("app/sass/libs.sass") // Vælg en fil til minify.pipe(sass()) // Konverter Sass til CSS vha. gulp -sass .pipe(cssnano()) // Compress.pipe(rename((suffiks: ".min"))) // Tilføj suffix.min .pipe(gulp.dest("app/css")); / / Upload til app/css-mappen)); gulp.task("watch", function() ( gulp.watch("app/sass/**/*.sass", gulp.parallel("sass")); // Overvågning af sass-filer gulp.watch(" app /*.html", gulp.parallel("code")); // Se HTML-filer i projektets rod gulp.watch(["app/js/common.js", "app/libs/**/* . js"], gulp.parallel("scripts")); // Overvågning af JS-hovedfilen og bibliotekerne )); gulp.task("standard", gulp.parallel("css-libs", "sass", "scripts", "browser-sync", "watch"));

Forberedelse til produktion

Resulterende kode for Gulp 4 vil blive præsenteret i slutningen af ​​artiklen.

Til produktion (bygning i dist-mappen) vil vi oprette en separat byggeopgave i slutningen af ​​gulpfile.js. I denne instruktion vil vi bygge Sass, JS og uploade, hvad vi har klar til dist-mappen.

Gulp.task("build", ["sass", "scripts"], function() ( var buildCss = gulp.src([ // Overfør CSS-stile til produktionen "app/css/main.css", "app/ css/libs.min.css" ]).pipe(gulp.dest("dist/css")) var buildFonts = gulp.src("app/fonts/**/*") // Overfør skrifttyper til production.pipe (gulp.dest("dist/fonts")) var buildJs = gulp.src("app/js/**/*") // Flyt scripts til production.pipe(gulp.dest("dist/js") ) var buildHtml = gulp.src("app/*.html") // Overfør HTML til production.pipe(gulp.dest("dist")); ));

Her udfører vi dem ved at tildele eventuelle handlinger til variabler. På denne måde kan du udføre multitasking-opgaver. Du behøver ikke tilegne dig det, men vi gør det på denne måde, fordi det er smukkere.

Alt er fint, men der er altid et "men". Før vi samler projektet, vil det være tilrådeligt for os at rydde dist-mappen, så der ikke er unødvendige indmad tilbage fra tidligere iterationer med vores projekt.

Installer og aktiver del-pakken:

Npm i del --save-dev var gulp = require("gulp"), // Include Gulp sass = require("gulp-sass"), // Inkluder Sass-pakken, browserSync = require("browser-sync") , // Connect Browser Sync concat = require("gulp-concat"), // Connect gulp-concat (til filsammenkædning) uglify = require("gulp-uglifyjs"), // Connect gulp-uglifyjs (til JS-komprimering) cssnano = require("gulp-cssnano"), // Inkluder pakken til CSS-minifikation rename = require("gulp-rename"), // Inkluder biblioteket til omdøbning af filer del = require("del"); // Tilslut biblioteket for at slette filer og mapper

Opret en oprydningsopgave ren og tilføj dens udførelse før udførelse af build:

Gulp.task("clean", function() (retur del.sync("dist"); // Slet dist-mappen før bygning)); gulp.task("build", ["clean", "sass", "scripts"], function() ( var buildCss = gulp.src([ // Flyt bibliotekerne til produktionen "app/css/main.css" , "app/css/libs.min.css" ]) .pipe(gulp.dest("dist/css")) var buildFonts = gulp.src("app/fonts/**/*") // Overfør skrifttyper til production.pipe(gulp.dest("dist/fonts")) var buildJs = gulp.src("app/js/**/*") // Flyt scripts til production.pipe(gulp.dest("dist /js ")) var buildHtml = gulp.src("app/*.html") // Overfør HTML til production.pipe(gulp.dest("dist")); ));

For Gulp 4, prøv at oprette opgaver selv, som vi gjorde i tidligere eksempler.

Billedoptimering

Som du måske har bemærket, mangler vores produktionsprojekt billeder. Lad os rette op på denne misforståelse og tilføje billedbehandling til vores projekt. Dette afsnit er skrevet ved hjælp af Gulp 3. Koden for Gulp 4 kan tilpasses uafhængigt, som vi gjorde tidligere.

Der er 3 billeder i app/img-mappen, som vi skal flytte til produktionsmappen ved at optimere.

For at optimere billeder skal du installere 2 pakker ( gulp-imagemin, imagemin-pngquant) og tilslut dem:

Npm i gulp-imagemin imagemin-pngquant --save-dev var gulp = require("gulp"), // Inkluder Gulp sass = require("gulp-sass"), // Inkluder Sass-pakken, browserSync = require(" browser -sync"), // Connect Browser Sync concat = require("gulp-concat"), // Connect gulp-concat (til filsammenkædning) uglify = require("gulp-uglifyjs"), // Connect gulp-uglifyjs ( til JS-komprimering) cssnano = require("gulp-cssnano"), // Inkluder en pakke til CSS-minifikation rename = require("gulp-rename"), // Inkluder et bibliotek til at omdøbe filer del = require("del" ), / / ​​Inkluder biblioteket til sletning af filer og mapper imagemin = require("gulp-imagemin"), // Inkluder biblioteket til at arbejde med billeder pngquant = require("imagemin-pngquant"); // Inkluder biblioteket til at arbejde med png

Gulp.task("img", function() ( return gulp.src("app/img/**/*") // Tag alle billeder fra app .pipe(imagemin(( // Komprimer dem med de bedste sammenflettede indstillinger) : sand, progressiv: sand, svgoPlugins: [(removeViewBox: falsk)], brug: ))) .pipe(gulp.dest("dist/img")); // Upload til produktion )); gulp.task("build", ["clean", "img", "sass", "scripts"], function() ( var buildCss = gulp.src([ // Overfør biblioteker til produktion "app/css/main) .css", "app/css/libs.min.css" ]).pipe(gulp.dest("dist/css")) var buildFonts = gulp.src("app/fonts/**/*") / / Flyt skrifttyperne til production.pipe(gulp.dest("dist/fonts")) var buildJs = gulp.src("app/js/**/*") // Flyt scripts til production.pipe(gulp. dest( "dist/js")) var buildHtml = gulp.src("app/*.html") // Overfør HTML til production.pipe(gulp.dest("dist")); ));

Alt er fint. Så længe antallet af billeder i projektet ikke overstiger 3 stk. Et stort antal billeder vil tage meget længere tid at behandle, så det vil være en god idé at tilføje en cache til billedbehandlingen, så billederne cachelagres, hvilket sparer os tid.

Installer og tilslut gulp-cache:

Npm i gulp-cache --save-dev var gulp = require("gulp"), // Inkluder Gulp sass = require("gulp-sass"), // Inkluder Sass-pakken, browserSync = require("browser-sync " ), // Connect Browser Sync concat = require("gulp-concat"), // Connect gulp-concat (til filsammenkædning) uglify = require("gulp-uglifyjs"), // Connect gulp-uglifyjs (for JS komprimering ) cssnano = require("gulp-cssnano"), // Inkluder pakken til CSS-minifikation rename = require("gulp-rename"), // Inkluder biblioteket til at omdøbe filer del = require("del"), / / Inkluder biblioteket for at slette filer og mapper imagemin = require("gulp-imagemin"), // Inkluder biblioteket til at arbejde med billeder pngquant = require("imagemin-pngquant"), // Inkluder biblioteket til at arbejde med png-cache = require("gulp-cache"); // Tilslut cachebiblioteket

Ændring af opgaven img:

Gulp.task("img", function() ( return gulp.src("app/img/**/*") // Tag alle billeder fra app .pipe(cache(imagemin(( // Komprimer dem med det bedste) indstillinger, der tager hensyn til caching interlaced: true, progressive: true, svgoPlugins: [(removeViewBox: false)], brug: )))) .pipe(gulp.dest("dist/img")); // Upload til produktion ) );

Automatisk generering af CSS-præfikser med Gulp

Leverandørpræfikser er påkrævet for at sikre maksimal kompatibilitet med alle moderne browsere. Det ville være logisk automatisk at tilføje præfikser, så ved at skrive i CSS eller Sass:

Display: flex

Vi fik følgende output:

Display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;

Lad os installere pakken gulp-autopræfikser og tilslut den til gulpfile.js:

Npm i --save-dev gulp-autoprefixer var gulp = require("gulp"), // Inkluder Gulp sass = require("gulp-sass"), // Inkluder Sass-pakken, browserSync = require("browser-sync " ), // Connect Browser Sync concat = require("gulp-concat"), // Connect gulp-concat (til filsammenkædning) uglify = require("gulp-uglifyjs"), // Connect gulp-uglifyjs (for JS komprimering ) cssnano = require("gulp-cssnano"), // Inkluder pakken til CSS-minifikation rename = require("gulp-rename"), // Inkluder biblioteket til at omdøbe filer del = require("del"), / / Inkluder biblioteket for at slette filer og mapper imagemin = require("gulp-imagemin"), // Inkluder biblioteket til at arbejde med billeder pngquant = require("imagemin-pngquant"), // Inkluder biblioteket til at arbejde med png-cache = require("gulp- cache"), // Inkluder cachebibliotekets autopræfikser = require("gulp-autopræfikser"); // Inkluder biblioteket til automatisk tilføjelse af præfikser

Og vi ændrer vores opgave frækt:

Gulp.task("sass", function())( // Opret en Sass-opgaveretur gulp.src("app/sass/**/*.sass") // Tag source.pipe(sass()) / / Transformer Sass i CSS via gulp-sass .pipe(autoprefixer(["sidste 15 versioner", "> 1%", "dvs. 8", "dvs. 7"], ( kaskade: sand ))) // Opret præfikser. pipe(gulp .dest("app/css")) // Upload resultatet til app/css-mappen .pipe(browserSync.reload((stream: true))) // Opdater CSS'en på siden, når den ændres )) ;

Standard Gulp-opgave

Opmærksomhed! Standardopgaven for Gulp 4 er forskellig fra den, der er givet i dette kapitel. Den komplette kode til Gulp 4 kan findes i slutningen af ​​artiklen.

Så vi har 2 hovedopgaver - gulp ur- at arbejde på et projekt online og gulp bygge- til at samle et projekt til produktion uden unødvendige filer, mapper og komprimerede billeder. Da vi oftest har brug for en opgave holde øje, kan du hænge det på standardopgaven, for ikke hele tiden at skrive gulp watch i konsollen, men blot skrive sluge.

Gulp.task("standard", ["watch"]);

Du skal også oprette en selvstændig opgave for at rydde Gulp-cachen, så den kan kaldes med en simpel kommando sluge klart:

Gulp.task("clear", funktion () ( return cache.clearAll(); ))

Hvis du har problemer med billeder eller andre cachelagrede filer, skal du blot rydde cachen.

Som et resultat burde vi få noget som dette gulpfile.js. Gulp 3:

Var gulp = require("gulp"), // Connect Gulp sass = require("gulp-sass"), // Connect the Sass-pakken, browserSync = require("browser-sync"), // Connect Browser Sync concat = require ("gulp-concat"), // Inkluder gulp-concat (til filsammenkædning) uglify = require("gulp-uglifyjs"), // Inkluder gulp-uglifyjs (til JS-komprimering) cssnano = require("gulp-cssnano " ), // Inkluder en pakke til CSS minification rename = require("gulp-rename"), // Inkluder et bibliotek til at omdøbe filer del = require("del"), // Inkluder et bibliotek til sletning af filer og mapper imagemin = require(" gulp-imagemin"), // Inkluder biblioteket til at arbejde med billeder pngquant = require("imagemin-pngquant"), // Inkluder biblioteket til at arbejde med png-cache = require("gulp-cache"), // Inkluder cachebibliotekets autopræfikser = require("gulp-autopræfikser");// Inkluder biblioteket for automatisk at tilføje præfikser gulp.task("sass", function())( // Opret en Sass opgave return gulp.src( "app/sass/**/*. sass") // Tag source.pipe(sass()) // Konverter Sass til CSS ved hjælp af gulp-sass .pipe(autoprefixer(["sidste 15 versioner", "> 1) %", "dvs. 8", "dvs. 7 "], ( kaskade: sand ))) // Opret prefixes.pipe(gulp.dest("app/css")) // Upload resultaterne til app/css-mappen .pipe(browserSync.reload((stream: true)) ) // Opdater CSS'en på siden, når )); gulp.task("browser-sync", function() ( // Opret en opgave browser-sync browserSync(( // Udfør browserSync server: ( // Definer serverparametre baseDir: "app" // Directory for serveren - app ), notify: false // Deaktiver meddelelser )); )); gulp.task("scripts", function() ( return gulp.src([ // Tag alle de nødvendige biblioteker "app/libs/jquery/dist/jquery.min.js", // Tag jQuery "app/libs/ magnific -popup/dist/jquery.magnific-popup.min.js" // Tag Magnific Popup ]).pipe(concat("libs.min.js")) // Saml dem i en bunke i en ny fil libs. min.js .pipe(uglify()) // Komprimer JS-filen.pipe(gulp.dest("app/js")); // Upload til app/js-mappen)); gulp.task("css-libs", ["sass"], function() ( return gulp.src("app/css/libs.sass") // Vælg filen til minify.pipe(sass()) / / Konverter Sass til CSS med gulp-sass .pipe(cssnano()) // Compress.pipe(rename((suffiks: ".min"))) // Tilføj suffix.min .pipe(gulp.dest("app/ css ")); // Upload til app/css-mappen)); gulp.task("clean", function() (retur del.sync("dist"); // Slet dist-mappen før bygning)); gulp.task("img", function() ( return gulp.src("app/img/**/*") // Tag alle billeder fra app .pipe(cache(imagemin(( // Med caching // . pipe(imagemin(( // Komprimer billeder uden caching interlaced: true, progressive: true, svgoPlugins: [(removeViewBox: false)], brug: )))/**/) .pipe(gulp.dest("dist/img ")); // Upload til produktion )); gulp.task("build", ["clean", "img", "sass", "scripts"], function() ( var buildCss = gulp.src([ // Overfør bibliotekerne til produktionen "app/css/main.css", "app/css/libs.min.css" ]).pipe(gulp.dest("dist/css")) var buildFonts = gulp.src ( "app/fonts/**/*") // Overfør skrifttyperne til production.pipe(gulp.dest("dist/fonts")) var buildJs = gulp.src("app/js/**/*" ) / / Flyt scripts til production.pipe(gulp.dest("dist/js")) var buildHtml = gulp.src("app/*.html") // Flyt HTML til production.pipe(gulp.dest ("dist" )); )); gulp.task("clear", funktion (callback) (retur cache.clearAll(); )); gulp.task("watch", ["browser-sync", "css" -libs", "scripts"], function() ( gulp.watch("app/sass/**/*.sass", ["sass"]); // Ser sass-filer i sass-mappen gulp.watch("app/*.html", browserSync.reload); // Overvåg HTML-filer i projektets root gulp.watch(["app/js/common.js", "app/libs/**/*.js"], browserSync.reload); // Overvåg JS-filer i mappen js)); gulp.task("standard", ["watch"]);

Resulterende kode for Gulp 4:

Var gulp = require("gulp"), // Connect Gulp sass = require("gulp-sass"), // Connect the Sass-pakken, browserSync = require("browser-sync"), // Connect Browser Sync concat = require ("gulp-concat"), // Inkluder gulp-concat (til filsammenkædning) uglify = require("gulp-uglifyjs"), // Inkluder gulp-uglifyjs (til JS-komprimering) cssnano = require("gulp-cssnano " ), // Inkluder en pakke til CSS minification rename = require("gulp-rename"), // Inkluder et bibliotek til at omdøbe filer del = require("del"), // Inkluder et bibliotek til sletning af filer og mapper imagemin = require(" gulp-imagemin"), // Inkluder biblioteket til at arbejde med billeder pngquant = require("imagemin-pngquant"), // Inkluder biblioteket til at arbejde med png-cache = require("gulp-cache"), // Inkluder cachebibliotekets autoprefixer = require("gulp-autoprefixer");// Inkluder biblioteket for automatisk at tilføje præfikser gulp.task("sass", function() ( // Opret en Sass opgave retur gulp.src(" app/sass/**/*. sass") // Tag source.pipe(sass()) // Konverter Sass til CSS ved hjælp af gulp-sass .pipe(autoprefixer(["sidste 15 versioner", "> 1% ", "dvs. 8", "dvs. 7 "], ( kaskade: sand ))) // Opret prefixes.pipe(gulp.dest("app/css")) // Upload resultaterne til app/css-mappen . pipe(browserSync.reload((stream: true)) ) // Opdater CSS'en på siden, når )); gulp.task("browser-sync", function() ( // Opret en opgave browser-sync browserSync(( // Udfør browserSync server: ( // Definer serverparametre baseDir: "app" // Directory for serveren - app ), notify: false // Deaktiver meddelelser )); )); gulp.task("scripts", function() ( return gulp.src([ // Tag alle de nødvendige biblioteker "app/libs/jquery/dist/jquery.min.js", // Tag jQuery "app/libs/ magnific -popup/dist/jquery.magnific-popup.min.js" // Tag Magnific Popup ]).pipe(concat("libs.min.js")) // Saml dem i en bunke i en ny fil libs. min.js .pipe(uglify()) // Komprimer JS-filen.pipe(gulp.dest("app/js")); // Upload til app/js-mappen)); gulp.task("kode", function() (retur gulp.src("app/*.html") .pipe(browserSync.reload((stream: true ))))); gulp.task("css-libs", function() ( return gulp.src("app/css/libs.sass") // Vælg en fil til minify.pipe(sass()) // Konverter Sass til CSS vha. gulp -sass .pipe(cssnano()) // Compress.pipe(rename((suffiks: ".min"))) // Tilføj suffix.min .pipe(gulp.dest("app/css")); / / Upload til app/css-mappen)); gulp.task("clean", async function() (retur del.sync("dist"); // Slet dist-mappen før bygning)); gulp.task("img", function() ( return gulp.src("app/img/**/*") // Tag alle billeder fra app .pipe(cache(imagemin(( // Med caching // . pipe(imagemin(( // Komprimer billeder uden caching interlaced: true, progressive: true, svgoPlugins: [(removeViewBox: false)], brug: )))/**/) .pipe(gulp.dest("dist/img ")); // Upload til produktion )); gulp.task("prebuild", async function() ( var buildCss = gulp.src([ // Overfør biblioteker til produktion "app/css/main.css", " app/css/libs.min.css" ]).pipe(gulp.dest("dist/css")) var buildFonts = gulp.src("app/fonts/**/*") // Overfør skrifttyperne til production .pipe(gulp.dest("dist/fonts")) var buildJs = gulp.src("app/js/**/*") // Flyt scripts til production.pipe(gulp.dest("dist/ js" )) var buildHtml = gulp.src("app/*.html") // Overfør HTML til production.pipe(gulp.dest("dist")); )); gulp.task("clear", funktion (tilbagekald ) ( return cache.clearAll(); )) gulp.task("watch", function() ( gulp.watch("app/sass/**/*.sass", gulp.parallel("sass") ); // Ser frække filer gulp.watch("app/*.html", gulp.parallel("code")); // Se HTML-filer i projektets rod gulp.watch(["app/js/common.js", "app/libs/**/*.js"], gulp.parallel("scripts")); // Overvågning af JS-hovedfilen og bibliotekerne )); gulp.task("standard", gulp.parallel("css-libs", "sass", "scripts", "browser-sync", "watch")); gulp.task("build", gulp.parallel("prebuild", "clean", "img", "sass", "scripts"));

Du kan se på eksempelprojektet fra denne lektion på GitHub og downloade det: https://github.com/agragregra/gulp-lesson

For at installere alle pakker og afhængigheder for det downloadede eksempel skal du køre kommandoen npm i i projektmappen.

Husk - ethvert plugin til Gulp har god dokumentation om tilslutning og brug af det på npmjs.com eller på GitHub-siden.

Vær hilset. Hvis du er involveret i frontend-udvikling, har du måske bemærket, at du ofte skal udføre de samme opgaver. Det ville være fantastisk at automatisere alt dette og reducere mængden af ​​rutine til et minimum. Opgaveledere og projektmontører, som f.eks Gulp og Grunt.

Gulp er en forgrening af Grunt-projektet. Han tog den bedste praksis fra sine forældre. Instruktionskoden er skrevet i JavaScript. Det virker flere gange hurtigere end Grunt.

Gulp er virkelig kraftfuld. Det vil gøre frontend-udvikling nemmere og hurtigere. Jeg vil liste de vigtigste opgaver, som projektmontøren vil hjælpe dig med at løse.

• Oprettelse af en webserver til fejlretning
• Genindlæs automatisk sider, når der foretages ændringer (LiveReload)
• Sporing af ændringer i projektfiler
• Brug af HTML, CSS, JS forprocessorer
• Kombinere filer og formindske dem
• Automatisk oprettelse af leverandørpræfikser til browsere (Autoprefixer)
• Automatisering af fil- og mappestyring
• Start og styring af eksterne operativsystemkommandoer
• Opstart og kontrol af applikationer
• Billedoptimering (komprimering, ændring af størrelse osv.)
• Upload af et projekt til en ekstern server ved hjælp af FTP, SFTP, Git osv.
• Tilslutning og brug af yderligere plugins (i dag er der allerede 3570 af dem; løsningen kan være
• finde til næsten alle daglige rutineopgaver og mere)
• Automatisering af manuelt arbejde

Installation

Gulp kræver, at Node.js kører. Du kan downloade det på den officielle hjemmeside. Jeg råder dig til at installere LTS-versionen af ​​softwareplatformen. Efter installation af Node.js kan du fortsætte med at installere Gulp. For at gøre dette skal du åbne styresystemkonsollen og køre følgende kommando:

Vi bruger parameteren -g, som giver dig mulighed for at installere Gulp globalt på styresystemet, uden at være bundet til et specifikt projekt.

Det er vigtigt, at der ikke er nogen russiske tegn i stien til installationsmappen. Dette kan forårsage, at nogle gulp-plugins ikke fungerer korrekt.

Okay, det er tid til at lave et projekt, hvor vi vil bruge Gulp. Gå til projektbiblioteket og kør kommandoen:

Dette vil køre et script, der vil stille dig nogle spørgsmål om projektet. Resultatet vil være en konfigureret fil til npm package.json. Dette er projektets manifest. Den indeholder en liste over pakker, der bruges i projektet og anden information. På dette tidspunkt indtastede jeg følgende data, tilpas det til dit projekt.

navn: (bybtc-landing) version: (1.0.0) beskrivelse: Landingsside for byBTC indgangspunkt: (index.js) testkommando: git repository: https://github.com/Neuropassenger/bybtc-landing.git nøgleord : landing

Hvis du vil springe et spørgsmål over, skal du blot trykke på Enter. Standardværdien vil blive brugt. Nu kan vi installere Gulp til vores projekt. Kør kommandoen:

npm i --save-dev gulp

Gulp vil blive installeret i projektbiblioteket og parameteren –save-dev vil tilføje det til package.json afhængighed. Dette vil give en anden udvikler, der åbner dit projekt, mulighed for hurtigt at implementere det på deres maskine (ved hjælp af kommandoen npm i).

Hvis alt gik godt, skulle der vises en mappe i projektmappen node_modules. Den indeholder den installerede pakke sluge og alle de afhængigheder, der skal til, for at det kan fungere.

Det er tid til at skabe den grundlæggende struktur for projektet. Jeg holder mig til de samme mappenavne som mange udviklere. Jeg råder dig til også at gøre dette, så en anden person hurtigt kan forstå strukturen i dit projekt. Der er dog ingen, der forbyder dig at bruge de navne, du ønsker.

Opret to mapper i projektroden:

• /src/ – kildekoden til projektet under udvikling, det er her du vil redigere filerne
• /dist/ – projektfiler og mapper efter montering, færdigt produkt

Katalog /dist/ udfyldes automatisk ved opbygning af projektet. Lad os komme videre med det nu /src/. Opret følgende mapper inde:

• /css/ – til cascading style sheets
• /js/ – til JavaScript-scripts
• /img/ – for billeder
• /fonts/ – for skrifttyper
• /sass/ – for SASS preprocessor-filer (hvis du bruger SASS)
• /libs/ – for tredjepartsbiblioteker

Hvis alt er klar, så er det tid til at gå videre til at oprette filen gulpfile.js i roden af ​​projektet, som vil hjælpe dig med at konfigurere Gulp. Det er her, du kan oprette Gulp-instruktioner, der hjælper med at automatisere nogle af de hverdagsagtige opgaver.

Gulp instruktioner

Enhver instruktion oprettes i gulpfile.js ved hjælp af funktionen gulp.task(). Den første parameter er navnet på instruktionen. Så er der en række af navnene på instruktioner, der skal udføres, før den definerede instruktion udføres. Den sidste parameter er en funktion, hvis krop definerer, hvad instruktionen gør.

gulp.task("instruktionsnavn", ["instruktion_udført_før_den_nuværende", "en anden_instruktion"], function() ( // Nogle handlinger));

For at kalde instruktionen skal du bruge følgende kommando i konsollen:

gulp kommandonavn

Kompilere SASS til CSS

Lad os starte med at kompilere SASS til CSS. Installer gulp-sass-pakken:

npm i --save-dev gulp-sass

Først skal du forbinde de pakker, du bruger til gulpfile.js. Lad os gøre det:

var gulp = require("gulp"), sass = require("gulp-sass");

Lad os nu oprette en erklæring, der vil kompilere SASS til CSS:

gulp.task("sass", function() ( return gulp.src("src/sass/**/*.sass") .pipe(sass()) .pipe(gulp.dest("src/css") ); ));

I den første linje af instruktionerne angiver vi kildefilerne til kompilering. I et specifikt eksempel vil alle filer med filtypenavnet blive taget .sass placeret inde i mappen /src/sass/ og dens undermapper. Du kan også vælge bestemte filer. Her er en eksempelliste over, hvordan du kan indstille stier til kildefiler.

• src/sass/main.sass – vælg filen main.sass
• src/sass/*.sass – vælger alle filer med filtypenavnet sass
• src/sass/**/*.sass – vælger alle filer med sass-udvidelsen i alle undermapper i sass-mappen
• !src/sass/main.sass – main.sass fil undtagelse
• ['!src/sass/main.sass', 'src/sass/second.sass'] – udelukkelse af en række filer main.sass og second.sass
• src/sass/**/*.+(scss|sass) – vælg alle scss- og sass-filer i alle undermapper i sass

Opret nu i mappen /src/sass/ fil main.sass og definere nogle stilarter i det:

kropsfarve: rød skriftstørrelse: 20px

Gem filen. Nu kan vi tjekke, hvordan kompileringen fungerer. I konsollen kører vi kommandoen:

Tjek kataloget /src/css/. Den skal indeholde den nyligt kompilerede CSS-fil. Ser du? Store! Lad os gå videre.

Automatisk sideopdatering (LiveReload)

Lad os gå videre til at automatisere sideopdateringer, når de ændrer sig, dvs. lad os sætte det op LiveReload. Dette er en af ​​de mest populære opgaver. Vi skal bruge npm-pakken Browsersynkronisering for automatisk at opdatere browseren. Lad os installere det:

npm i --save-dev browser-sync

Lad os forbinde browser-synkronisering pakke i begyndelsen gulpfile.js, som vi gjorde tidligere med pakker sluge Og gulp-sass:

browserSync = require("browser-sync");

Lad os oprette instruktioner til at starte Browsersync:

gulp.task("browser-sync", function() ( browserSync(( server: ( baseDir: "src" ) )); ));

Alt, hvad vi gjorde, var at ringe til Browsersync for at starte og specificere projektmappen med kildefilerne. Der er andre indstillinger for Browsersynkronisering. Du kan finde ud af dem i dokumentationen.

Lad os tilføje en mere rør til instruktioner frækt, som vil blive brugt til at opdatere stilarter ved kompilering af CSS-filer. Angiv parameteren strøm: sandt. Dette giver dig mulighed for at opdatere stilene streaming uden at genindlæse siden helt.

Pipe(browserSync.reload(( stream: sand; )))

Derefter vil vi oprette en instruktion, der vil overvåge ændringer i filer og genindlæse siden, hvis det er nødvendigt.

gulp.task("watch", ["browser-sync"], function() ( gulp.watch("src/sass/**/*.sass", ["sass"]); gulp.watch("src /js/**/*.js", browserSync.reload); gulp.watch("src/**/*.html", browserSync.reload); ));

Lad mig forklare. Instruktionerne udføres før start browser-synkronisering, dvs. Webserveren begynder at fejlsøge projektet. Herefter udføres selve instruktionen holde øje. Til at spore ændringer i filer, vi bruger gulp.watch().

Inde i den anonyme funktion udfører vi 3 gange gulp.watch med to parametre. Den første parameter er de filer, der skal overvåges, den anden er de handlinger, der skal udføres, når filer ændres, dvs. Følg instruktionerne frækt eller opdatere siden.

Vær opmærksom på den første gulp.watch. I stedet for browserSync.reload vi videregiver instruktionen i arrayet frækt, som skal udføres, hvis filerne er blevet ændret. I den, som du husker, stream-opdaterer vi stilene på siden.

Minificering og sammenlægning af filer

Næsten ethvert projekt skal bruge tredjepartsbiblioteker. Deres antal kan være fra 5 til uendeligt. Derfor skal de alle indgå i det færdige produkt. Det ville være rart at optimere det hele, nemlig:

• minify (komprimere) brugte biblioteker
• reducere antallet af anmodninger til serveren ved at kombinere biblioteker i en enkelt fil

Lad os tilføje flere biblioteker til projektets kildefiler. Til dette bruger jeg Bower, pakke til NPM. Installer Bower:

Opret en konfigurationsfil .bowerrc i roden af ​​projektet for Bower, hvor vi fortæller det, hvor bibliotekerne skal gemmes:

("mappe": "src/libs/" )

Lad os installere for eksempel biblioteket jQuery og skyder glat:

bower i jquery slick-karrusel

Nu kan vi begynde at sammenkæde og komprimere biblioteker. Til dette vil vi bruge pakker gulp-concat Og gulp-uglifyjs vedrørende JavaScript-filer. Lad os installere dem:

npm i --save-dev gulp-concat gulp-uglifyjs

Angående CSS – pakke gulp-cssnano. Installere:

npm i --save-dev gulp-cssnano

Minificerede filer har normalt suffikset .min. Pakken hjælper os med at tilføje den gulp-omdøb. Installere:

npm i --save-dev gulp-rename

Lad os starte med at forbinde de installerede plugins til gulpfile.js:

concat = require("gulp-concat"), uglifyJs = require("gulp-uglifyjs"), cssNano = require("gulp-cssnano"), omdøb = require("gulp-omdøb");

JavaScript

Lad os oprette en instruktion, der giver os mulighed for at komprimere og flette JavaScript-filer:

gulp.task("min-js", function() ( return gulp.src([ "src/libs/jquery/dist/jquery.min.js", "src/libs/slick-carousel/dist/slick.min .js" ]) .pipe(concat("libs.min.js")) .pipe(uglifyJs()) .pipe(gulp.dest("src/js")); ));

Inde i en anonym funktionserklæring min-js Vi angiver først stierne til JavaScript-biblioteksfilerne som et array. Så ved at bruge concat kombinerer vi bibliotekerne til en enkelt fil libs.min.js uglifyJs. Og til sidst skal du gemme resultatet i en mappe /src/js/.

Instruktionerne kan kontrolleres ved hjælp af kommandoen i konsollen:

I mappe /src/js/ filen vises libs.min.js, som kombinerer og komprimerer JavaScript-biblioteksfilerne, der bruges i projektet.

CSS

Lad os oprette det i kataloget /src/css/ fil libs.sass. Vi importerer CSS-biblioteksfiler til den. For eksempel ved at bruge Bower downloadede jeg biblioteket Bootstrap:

bower i bootstrap

Lad os åbne filen libs.sass og importer Bootstrap CSS-filen til den:

@import "src/libs/bootstrap/dist/css/bootstrap"

Således vil vi samle alle CSS-biblioteksfilerne ét sted, nemlig i filen libs.sass ved hjælp af import. Lad os nu oprette en komprimeringsinstruktion:

gulp.task("min-css", ["sass"] , function() ( return gulp.src("src/css/libs.css") .pipe(cssNano()) .pipe(rename(( suffiks: ".min" ))) .pipe(gulp.dest("src/css")); ));

Før komprimering kompilerer vi CSS'en fra SASS ved hjælp af instruktionen frækt, som vi angav i arrayet efter instruktionsnavnet min-css.

I den første linje tager vi en bestemt fil, libs.css. Dernæst komprimerer vi det ved hjælp af cssNano. Brug derefter omdøbe tilføje et suffiks .min. Vi gemmer resultatet i en mappe /src/css/.

Kontrol af instruktionerne:

Hvis du gjorde alt korrekt, så i mappen /src/css/ to filer skal vises. libs.css Og libs.min.css. Sammenlign deres størrelser.

Automatisk tilføjelse af leverandørpræfikser (Autoprefixer)

Når du bruger nye CSS-funktioner, skal du angive leverandørpræfikser, for at stilarter fungerer korrekt. At gøre sådanne ting manuelt er en utaknemmelig opgave. Så lad os få Gulp til at gøre det for os.

Lad os først installere gulp-autopræfikser:

npm i --save-dev gulp-autopræfikser

Lad os forbinde den installerede pakke til gulpfile.js:

autopræfikser = require("gulp-autopræfikser");

Okay, nu kan vi bruge autopræfikser i instruktionerne frækt. Lad os gøre det efter opkaldet .pipe(sass()), fordi Leverandørpræfikser skal placeres, efter at SASS er konverteret til CSS. Lad os tilføje en ny rør:

Pipe(autopræfikser([ "sidste 10 versioner" ], ( kaskade: sand )))

Den første parameter autopræfikser vi passerer et array, hvor vi angiver, at vi ønsker at aktivere understøttelse af de seneste 10 browserversioner. Den anden parameter er indstillingerne, hvor vi angiver, at vi ønsker at se smuk kode i outputtet, dvs. aktivere kaskade.

Vi tjekker ved at tilføje til main.sass ny ejendom bøje. Kør instruktionerne frækt:

I main.css leverandørpræfikser skal vises. Det er meget enkelt, alt fungerer automatisk. Fantastiske!

Endelig opbygning af projektet

Det sidste, jeg gerne vil berøre i denne guide til Gulp-begyndere, er den endelige opbygning af projektet. Til dette har vi brug for en mappe /dist/, som vi lavede i begyndelsen. Det skal rengøres før hver samling. Til dette vil vi bruge NPM-pakken del. Lad os installere det:

npm i --save-dev del

Lad os forbinde pakken del V gulpfile.js:

del = require("del");

Lad os lave instruktioner ren for at rydde op i mappen / dist/ før montering:

gulp.task("clean", function() (retur del.sync("dist"); ));

Nu kan du begynde direkte at samle projektet. Lad os lave instruktioner bygge:

gulp.task("build", ["clean", "min-css", "min-js"], function() ( var buildCss = gulp.src([ "src/css/libs.min.css", "src/css/main.css" ]).pipe(gulp.dest("dist/css")); var buildFonts = gulp.src("src/fonts/**/*") .pipe(gulp.dest ("dist/fonts")); var buildJs = gulp.src("src/js/**/*") .pipe(gulp.dest("dist/js")); var buildHtml = gulp.src(" src/*.html") .pipe(gulp.dest("dist")); ));

Før du ringer instruktionerne bygge vi rydder mappen /dist/ i tilfælde af at montagen allerede er udført før. Derefter komprimerer og kombinerer vi JavaScript- og CSS-filer ved hjælp af instruktionerne min-js Og min-css henholdsvis. Samtidig kompilerer vi SASS til CSS, pga før du følger instruktionerne min-css instruktion udføres frækt.

Inde i instruktionens brødtekst kopierer vi de forberedte projektfiler til mappen med det færdige produkt /dist/. Lad os tjekke instruktionerne:

Alt fungerer fantastisk! I mappe /dist/ Nu er der et færdigt produkt efter montering, som kan uploades til produktionsserveren.

Konklusion

Dette afslutter guiden for begyndere om montageprojekter i Gulp. Som du kan se, er alt ret simpelt. Med tiden vil jeg udgive et par flere indlæg om Gulp og dets plugins, når jeg selv har en god forståelse af dem. I mellemtiden kan du bruge og automatisere dine rutineopgaver i frontend-udvikling i henhold til instruktionerne. Hvis du har spørgsmål, så stil dem i kommentarerne til opslaget.

( "name": "bybtc-landing", "version": "1.0.0", "description": "Landingsside for byBTC", "main": "index.js", "scripts": ( "test" : "echo \"Fejl: ingen test specificeret\" && exit 1" ), "repository": ( "type": "git", "url": "git+https://github.com/Neuropassenger/bybtc- landing.git" ), "keywords": [ "landing" ], "author": "Oleg Sokolov", "license": "ISC", "bugs": ( "url": "https://github.com /Neuropassenger/bybtc-landing/issues" ), "homepage": "https://github.com/Neuropassenger/bybtc-landing#readme", "devDependencies": ( "browser-sync": "^2.18.13" , "del": "^3.0.0", "gulp": "^3.9.1", "gulp-autoprefixer": "^4.0.0", "gulp-concat": "^2.6.1", " gulp-cssnano": "^2.1.2", "gulp-rename": "^1.2.2", "gulp-sass": "^3.1.0", "gulp-uglifyjs": "^0.6.2" ))

var gulp = require("gulp"), sass = require("gulp-sass"), browserSync = require("browser-sync"), concat = require("gulp-concat"), uglifyJs = require("gulp- uglifyjs"), cssNano = require("gulp-cssnano"), rename = require("gulp-rename"), autopræfiks = require("gulp-autopræfikser"), del = require("del"); gulp.task("sass", function() ( return gulp.src("src/sass/**/*.sass") .pipe(sass()) .pipe(autoprefixer([ "sidste 10 versioner" ], ( kaskade: sand ))) .pipe(gulp.dest("src/css")) .pipe(browserSync.reload((stream: true ))); )); gulp.task("min-css", ["sass"] , function() ( return gulp.src("src/css/libs.css") .pipe(cssNano()) .pipe(rename(( suffiks: ".min" ))) .pipe(gulp.dest("src/css")); )); gulp.task("min-js", function() ( return gulp.src([ "src/libs/jquery/dist/jquery.min.js", "src/libs/slick-carousel/dist/slick.min .js" ]) .pipe(concat("libs.min.js")) .pipe(uglifyJs()) .pipe(gulp.dest("src/js")); )); gulp.task("browser-sync", function() ( browserSync(( server: ( baseDir: "src" ) )); )); gulp.task("watch", ["browser-sync"], function() ( gulp.watch("src/sass/**/*.sass", ["sass"]); gulp.watch("src /js/**/*.js", browserSync.reload); gulp.watch("src/**/*.html", browserSync.reload); )); gulp.task("clean", function() (retur del.sync("dist"); )); gulp.task("build", ["clean", "min-css", "min-js"], function() ( var buildCss = gulp.src([ "src/css/libs.min.css", "src/css/main.css" ]).pipe(gulp.dest("dist/css")); var buildFonts = gulp.src("src/fonts/**/*") .pipe(gulp.dest ("dist/fonts")); var buildJs = gulp.src("src/js/**/*") .pipe(gulp.dest("dist/js")); var buildHtml = gulp.src(" src/*.html") .pipe(gulp.dest("dist")); ));

Installation af Gulp er ret simpelt. Først skal du installere Gulp-pakken globalt:

Npm install -g gulp

Installer det derefter i dit projekt:

Npm install --save-dev gulp

Brug af Gulp

Lad os oprette en Gulp-opgave for at minificere en af ​​vores JavaScript-filer. Opret en fil kaldet gulpfile.js. Det vil definere dine opgaver, som startes ved hjælp af gulp-kommandoen.

Tilføj følgende kommandoer til din gulpfile.js-fil:

Var gulp = require("gulp"), uglify = require("gulp-uglify"); gulp.task("minify", function () ( gulp.src("js/app.js") .pipe(uglify()) .pipe(gulp.dest("build")) ));

Installer gulp-uglify via npm ved at køre npm install --save-dev gulp-uglify og kør derefter opgaven via gulp minify. Lad os sige, at du har en fil kaldet app.js i js-mappen, en ny app.js vil blive oprettet i build-mappen og indeholde en komprimeret version af js/app.js.

Hvad sker der egentlig her?

Vi gør flere ting i vores gulpfile.js-fil. Først indlæser vi gulp og gulp-uglify modulerne:

Var gulp = require("gulp"), uglify = require("gulp-uglify");

Vi definerer derefter en opgave kaldet minify, som, når den køres, kalder funktionen givet som sit andet argument:

Gulp.task("minify", funktion () ( ));

Til sidst, og dette er den svære del, definerer vi, hvad vores opgave skal gøre:

Gulp.src("js/app.js") .pipe(uglify()) .pipe(gulp.dest("build"))

Hvis du ikke er bekendt med tråde, og de fleste frontend-udviklere ikke er det, vil koden ovenfor ikke fortælle dig noget.

Strømme

Strømme tillader nogle data at passere gennem en række typisk små funktioner, der ændrer dataene og derefter videregiver dem til den næste funktion.

I eksemplet ovenfor tager funktionen gulp.src() en streng, der matcher en fil eller et sæt filer, og opretter en strøm af objekter, der repræsenterer disse filer. De passerer (eller flyder) derefter ind i uglify()-funktionen, som tager filobjekter og returnerer nye minificerede filobjekter. Dette resultat overføres derefter til funktionen gulp.dest(), som gemmer de ændrede filer.

Her er hvad der sker i diagramform:

Når der kun er én opgave, gør funktionen intet. Overvej dog følgende kode:

Gulp.task("js", funktion () ( return gulp.src("js/*.js") .pipe(jshint()) .pipe(jshint.reporter("default")) .pipe(uglify() ) .pipe(concat("app.js")) .pipe(gulp.dest("build")); ));

For at køre dette selv skal du installere gulp, gulp-jshint, gulp-uglify og gulp-concat.

Denne opgave tager alle filerne, der svarer til js/*.js (med andre ord, alle JavaScript-filerne i js-mappen), kører JSHint på dem, udskriver en rapport, minimerer hver fil og fletter dem derefter, gemmer dem i build /app.js. I diagramform:

Hvis du er bekendt med Grunt, vil du bemærke, at dette er helt anderledes end, hvordan Grunt fungerer. Grunt bruger ikke tråde. I stedet tager den filerne, kører en opgave for hver fil og gemmer til nye filer, og gentager hele processen for hver opgave. Som et resultat af mange filsystemkald er Grunt langsommere end Gulp.

For en bedre forståelse af streams, læs Stream Handbook.

gulp.src()

Gulp.src()-funktionen tager en eller flere filer eller et array og returnerer en strøm, der kan sendes til plugins.

De to andre plugins er tydeligere: uglify()-funktionen minimerer koden, og concat("app.js")-funktionen kombinerer alle filer til én kaldet app.js.

gulp-load-plugin

Et modul, som jeg finder ret nyttigt, kaldes gulp-load-plugins, det indlæser automatisk alle Gulp-plugins fra filen package.json og vedhæfter dem til objektet. Hovedapplikationen er som følger:

Var gulpLoadPlugins = require("gulp-load-plugins"), plugins = gulpLoadPlugins();

Du kan skrive alt på én linje ( var plugins = require("gulp-load-plugins")();), men jeg er ikke en stor fan af opkald på én linje.

Efter at have kørt denne kode, vil plugins-objektet indeholde dine plugins med navne i CamelCase-stil (for eksempel vil gulp-ruby-sass blive indlæst som plugins.rubySass ). Du kan bruge dem på den sædvanlige måde. For eksempel ville vores js-opgave blive forkortet sådan:

Var gulp = require("gulp"), gulpLoadPlugins = require("gulp-load-plugins"), plugins = gulpLoadPlugins(); gulp.task("js", funktion () ( return gulp.src("js/*.js") .pipe(plugins.jshint()) .pipe(plugins.jshint.reporter("standard")) .pipe (plugins.uglify()) .pipe(plugins.concat("app.js")) .pipe(gulp.dest("build")); ));

Vedhæftet til dette er en package.json-fil, der indeholder noget, der ligner dette:

( "devDependencies": ( "gulp-concat": "~2.2.0", "gulp-uglify": "~0.2.1", "gulp-jshint": "~1.5.1", "gulp": " ~3.5.6" ) )

Dette eksempel er faktisk ikke meget kortere. For store og komplekse Gulp-filer vil dette dog reducere filoverførselsblokken til en eller to linjer.

Version 0.4.0 af gulp-load-plugins udgivet i begyndelsen af ​​marts tilføjede doven indlæsning af plugin'et, hvilket forbedrer ydeevnen. Plugins indlæses ikke, før de kaldes, hvilket betyder, at du ikke behøver at bekymre dig om, at ubrugte plugins i package.json påvirker ydeevnen (selvom de nok skal fjernes alligevel). Med andre ord, hvis du kører en opgave, der kun kræver to plugins, vil den ikke indlæse alle de plugins, som andre opgaver kræver.

Fil sporing

Gulp har evnen til at holde øje med filændringer og udføre en eller flere opgaver, når ændringer opdages. Denne funktion er utrolig nyttig (sandsynligvis en af ​​de mest nyttige i Gulp for mig). Du kan gemme Less-filen, og Gulp vil forvandle den til CSS og opdatere browseren uden nogen handling fra din side.

For at se en fil eller filer skal du bruge gulp.watch()-funktionen, som tager et mønster af filer eller en række af dem (såsom gulp.src()), eller en række opgaver til at køre dem eller udføre en tilbagekaldsfunktion .

Lad os sige, at vi har en byggeopgave, der omdanner vores skabelonfiler til HTML, og vi ønsker at definere en overvågningsopgave, der holder øje med ændringer af skabelonerne og kører en opgave for at konvertere dem til HTML. Vi kan bruge urfunktionen på denne måde:

Gulp.task("watch", function () ( gulp.watch("skabeloner/*.tmpl.html", ["build"]); ));

Nu, når du ændrer skabelonfilen, vil byggeopgaven blive kørt, som vil oprette HTML.

Du kan også give uret en tilbagekaldsfunktion i stedet for en række opgaver. I dette tilfælde modtager funktionen et hændelsesobjekt, der indeholder information om hændelsen, der kaldte funktionen:

Gulp.watch("templates/*.tmpl.html", function (event) ( console.log("Begivenhedstype: " + event.type); // tilføjet, ændret eller slettet console.log("Begivenhedssti: " + event.path); // sti til filen ));

Et andet karakteristisk træk ved gulp.watch() er, at det returnerer en watcher . Brug den til at lytte efter yderligere begivenheder eller til at tilføje filer til dit ur. For at køre en opgaveliste og kalde en funktion på samme tid, kan du f.eks. tilføje en lytter til ændringshændelsen, når watcher vender tilbage:

Var watcher = gulp.watch("skabeloner/*.tmpl.html", ["build"]); watcher.on("change", function (event) ( console.log("Begivenhedstype: " + event.type); // tilføjet, ændret eller slettet console.log("Begivenhedssti: " + event.path); // stien til filen ));

Ud over ændringsarrangementet kan du lytte til en række andre begivenheder:

• ende
  Udløses, når overvågeren afsluttes (hvilket betyder, at opgaver og tilbagekald ikke længere vil blive kaldt, når filer ændres).
• fejl
  Udløses, når der opstår en fejl.
• parat
  Udløses, når filer er fundet og klar til at blive sporet.
• intet match
  Udløses, når ingen filer matcher anmodningen.

Watcher-objektet indeholder også nogle metoder, der kan kaldes:

• watcher.end()
  Stopper overvågeren (der vil ikke blive kaldt flere opgaver eller tilbagekald).
• watcher.files()
  Returnerer en liste over filer, som overvågeren overvåger.
• watcher.add(glob)
  Tilføjer filer til overvågeren, der matcher det angivne globmønster (tager også en valgfri tilbagekaldsfunktion som det andet argument).
• watcher.remove(filsti)
  Fjerner en bestemt fil fra watcher.

13. december 2017 kl. 17.40

Vi forstår og arbejder med gulp

• JavaScript

Hej alle. Hvis du på nogen måde er forbundet med JS, har du sikkert hørt om sådan en applikation som gulp. Og måske har de endda brugt det. Ud fra egen erfaring kan jeg sige, at det kan være svært at "få styr på", hvordan man arbejder med det, selvom nøglen til forståelse ligger på overfladen. Det er derfor, jeg udgiver dette materiale i håb om, at det vil være nyttigt.

Der blev også lavet en video baseret på dette materiale, så du kan vælge i hvilken form du vil forbruge det.

Hvis du sammenligner gulp med andre populære samlesystemer, er det som at sammenligne en færdiglavet quadcopter af typen "købt og fløjet" og et kit til selvmontering af en drone. Ja, du tager først afsted næste dag, men dine hænder har mere fleksibilitet og kontrol, især hvis du har en ikke-standard opgave.

Faktisk, efter at have overvundet adgangstærsklen, ser gulp ikke så kompliceret ud, og til tider er det endda forståeligt og logisk. Men uden ordentlig forberedelse kan det være svært at nå en sådan tilstand. Lad os dykke direkte ned i det og se på de principper, som gulp er bygget på.

Lad os komme langvejs fra. I nodejs økosystem er der sådan noget som tråde eller strøm. På grund af oversættelsens kompleksitet kaldes tråde også tråde i et flertrådet program. I vores tilfælde er en strøm et objekt, der repræsenterer streamingdata, og er et helt andet koncept.

Så disse streams tilbyder en praktisk grænseflade til asynkront arbejde med data. Hele læse-/skriveprocessen varetages af nodemotoren, og vi har kun de tilsvarende tilbagekald, når der er dukket et nyt stykke data op, når der er opstået en fejl, når flowet er afsluttet osv. Dette opnår I/O-effektivitet med minimal indsats fra programmørens side.

Const fs = require("fs"); const input = fs.createReadStream("minfil"); input.on("data", (chunk) => ( console.log(chunk); )); input.on("end", () => ( console.log("filen er læst"); ));
Næsten alt kan være streams i nodejs, fra filer eller strenge til sockets. For eksempel i den berømte Express-ramme er HTTP-anmodning og -svar intet andet end streams. Streams kan være skrivebeskyttet, skrivebeskyttet eller begge dele.

Vandløb har én nyttig funktion: de kan stables sammen i en kæde kaldet et rør. Således kan vi kombinere flere tråde med hinanden og administrere dem som én. Outputtet af en tråd går til input af den næste og så videre indtil slutningen. Som du kan gætte ud fra oversættelsen af ​​ordet pipe, ligner det meget en pipeline.

Dette giver dig mulighed for at bestemme det nødvendige dataflow (igen vanskeligheden ved oversættelse. Her mener vi flow eller strøm) lige her og nu uden at vente på at dataene bliver tilgængelige.

For eksempel er det sådan, vi kan bestemme, hvad vi vil give som et resultat, og "hvordan" ved at give er allerede håndteret af motoren selv.

Const fs = require("fs"); const express = require("express"); var app = express(); app.get("/", function (req, res) ( fs.createReadStream("minfil") .pipe(res); )); app.lyt(3000);
Bemærk venligst, at anmodningshåndteringen fuldfører før filen overhovedet er åbnet - resten tager nodemotoren sig af.

Gulp er bygget på en lignende tilgang. Dette er dens fordel, men det er også dens ulempe. Det kan i det mindste betragtes som en ulempe på grund af den forvirring, der opstår, da gulp bruger andre, lignende, men uforenelige tråde. Gulp arbejder tæt sammen med filsystemet, hvorfor det bruger streams, som ikke så meget repræsenterer en strøm af data, men individuelle virtuelle filer med hver sit indhold.

Hvis du nogensinde har hørt om vinyl, er dette præcis implementeringen af ​​tråde, som gulp bruger. Hvis vi tager en standardopgave for galp og ser på, hvad der er indeni, vil vi opdage, at for hvert kald til datahændelsen modtager vi et filobjekt, som indeholder alle de nødvendige oplysninger: filnavnet, stien til filen, arbejdsmappe og selvfølgelig dens indhold.

Const gulp = require("gulp"); gulp.task("default", function() ( gulp.src("./*.js") .on("data", funktion(fil) ( console.log("data callback"); console.log( file.inspect()); /* Det udsender: * data callback * > * tilbagekald af data * > */ )).pipe(gulp.dest("dist/")); ));
Indholdet kan præsenteres i to formater: som en allerede læst buffer eller som en native nodestrøm. Hvert trin i galprøret tager sådanne filer som input, udfører en form for transformation og sender det videre til outputtet af den næste kæde. Den sidste kæde gemmer dem normalt bare på disken.

Pipe(gulp.dest("dist/"));
At indse, at trådene i gulp er forskellige, fører til oplysning og forståelse, da det forklarer de fleste problemer og fejl.

Lad os se på et rigtigt eksempel. Du vil bruge browserify til at flette dine JS-filer. Du går og finder gulp-browserify plugin. Men du ser en note, der siger, at plugin'et er forældet, dvs. Forældet.

Som en velopdragen programmør afviser du denne mulighed og går på udkig efter, hvilken løsning der ikke er forældet. Find de officielle opskrifter fra gulp, og du vil se, at browserify fungerer med gulp direkte. Nå, direkte, gennem laget, som bare konverterer den oprindelige nodestrøm til en vinylstrøm, der sluger forstår. Uden det ville intet fungere, da det er forskellige tråde.

Hvis du vil skrive din egen transformation, kan du bruge denne skabelon.
Som du kan se, er alt enkelt her: vores handler vil blive kaldt for hver fil, som vil udføre ændringerne. Vi kan gøre, hvad vi vil: ændre indholdet af filen, omdøbe filen, slette filen eller tilføje et par nye filer mere til strømmen.

Som vi husker, kan indholdet af en fil i en vinylstrøm repræsenteres som en buffer eller som en datastrøm. Det er dog ikke nødvendigt at understøtte begge dele. Du kan altid bruge pakken

• Oversættelse

Denne artikel er den første i en serie om emnet at tæmme CSS. I dag vil vi se på teknologi CSS-nulstilling.

Hvorfor er dette nødvendigt?

Hver browser indstiller sine egne standard stilværdier for forskellige HTML-elementer. Ved at bruge CSS Reset kan vi udjævne denne forskel for at sikre, at stilarter er kompatible på tværs af browsere.

For eksempel bruger du elementet -en i dit dokument. De fleste browsere, som Internet Explorer og Firefox, tilføjer et link Blå farve Og understregning. Forestil dig dog, at fem år fra nu beslutter nogen at oprette en ny browser (lad os kalde det UltraBrowser). Browserudviklerne kunne ikke lide den blå farve og var irriterede over understregningen, så de besluttede at fremhæve links i rødt Og fremhævet. Det er baseret på dette, at hvis du indstiller basisstilværdien for et element -en, så er det med garanti, som du vil have det, og ikke hvordan UltraBrowser-udviklerne foretrækker at vise det.

Men nu har vi slet ingen indrykning, også mellem enkelte afsnit! Hvad skal man gøre? Lyv ikke og vær ikke bange: under vores nulstilling vil vi beskrive den regel, vi har brug for. Dette kan gøres på forskellige måder: angiv indrykket i bunden eller toppen af ​​afsnittet, angiv det i procent, pixels eller em.

Det vigtigste er, at browseren nu spiller efter vores regler, og ikke vi efter dens regler. Jeg besluttede at gøre det på denne måde:

* ( margin: 0; polstring: 0; ) p ( margin: 5px 0 10px 0; )

Som et resultat fik vi, hvad der kan ses i det tredje eksempel.

Du kan oprette dine egne nulstillingsstile, hvis du løser et specifikt problem i dit projekt. På trods af dette er der ingen trin-for-trin guide til at oprette din egen CSS-nulstilling. Stol på dine egne principper og din egen stil.

For at hjælpe dig med at træffe det rigtige valg, er her et par flere links:

1. Less is more - mit valg af Reset CSS (Ed Elliott).

2. Din CSS-nulstilling er det første, browseren skal se

Nulstilling af stilarter efter at have indstillet dine egne stilarter for elementer er den forkerte tilgang. I dette tilfælde skal du ikke forvente noget godt fra browserens visning. Husk, at du altid skal inkludere CSS Reset først, og derefter alle andre stilarter.

Ja, jeg forstår, det lød sjovt, men dette er en af ​​de største fejl hos udviklere, unge og gamle. Mange mennesker glemmer simpelthen dette.

Nogle vil måske stille et logisk spørgsmål: hvorfor sker det? Svaret er enkelt: Regler skrevet lavere i teksten i CSS-filen (og endnu lavere i deres rækkefølge i dokumentet) overskriver de tidligere erklærede regler.

Lad os ikke gå for langt væk fra emnet og fortsætte. Lad os anvende Eric Meyers stile til vores eksempel, men efter beskrivelser af vores ejendomme, som vist i eksempel 4. Matematikere ville sige følgende: "Det var det, vi skulle bevise."

3. Brug et separat CSS-dokument til CSS-nulstilling

Jeg må (nej, jeg var på ingen måde tvunget) til at nævne dette råd. Brug af en separat fil til CSS-nulstilling er en almindelig praksis, der understøttes af et stort antal udviklere.

Faktisk indtager jeg skabelsens position en stor CSS-fil på grund af den højere ydeevne af denne tilgang. Men i dette spørgsmål er jeg tilbøjelig til at være enig med flertallet: CSS Reset skal placeres i en separat fil (normalt kaldet reset.css). I dette tilfælde kan du bruge det i forskellige projekter uden at gøre nogen indsats for at adskille det fra andre CSS-regler.

4. Prøv at undgå at bruge en universalvælger

Selvom dette koncept virker, er det ofte ikke ønskeligt at bruge det på grund af inkompatibilitet med nogle browsere (for eksempel behandles denne vælger ikke korrekt i Internet Explorer). Du bør kun bruge denne teknik til enkle, små, statiske og forudsigelige sider (hvis du skulle gøre det).

Dette råd er især vigtigt, når du udvikler løsninger såsom CMS-temaer. Du kan ikke forudsige på forhånd, hvordan det vil blive brugt, eller hvordan det vil blive ændret. Det er bedre at beskrive grundlæggende CSS-regler for alle elementer end at bruge den uforudsigelige (omend mindre) mekanisme med universelle vælgere til dette formål.

5. Undgå redundante egenskabsbeskrivelser, når du bruger CSS-nulstilling

En anden grund til, at jeg ikke kan lide en separat fil til CSS-nulstilling, er den potentielle redundans af efterfølgende CSS-egenskabserklæringer. At gentage dine individuelle stilarter blandt hele sættet af CSS-filer er dårlig manerer og bør undgås. Selvfølgelig er vi nogle gange for dovne til omhyggeligt at gennemgå et sæt stilarter og kombinere nogle af dem, men vi bør i det mindste prøve!

Lad os gå tilbage til Erics CSS-nulstilling. Den indstiller standardværdier for elementets linjehøjde, farve og baggrund legeme på følgende måde:

krop (linjehøjde: 1; farve: sort; baggrund: hvid;)

Lad os sige, at du allerede ved, hvordan elementet vil se ud legeme:

1. baggrundsfarve: #cccccc;
2. farve: #996633;
3. Du vil gentage et bestemt baggrundsbillede vandret.

I dette tilfælde er det ikke nødvendigt at oprette en ny vælger til at beskrive dine egenskaber - du kan blot inkludere dem i CSS-nulstillingen. Lad os gøre det:

body ( line-height: 1; color: #996633; background:#ccc url(tiled-image.gif) repeat-x top left; )

Vær ikke bange for at ændre selve CSS-nulstillingen. Tilpas det til dig selv, få det til at fungere for dig. Skift, omarranger, fjern og tilføj efter behov i dit specifikke tilfælde.

Eric Meyer sagde følgende om dette: "dette er ikke et tilfælde, hvor alle skal bruge CSS Reset uden ændringer."