Share
Werken jij en je team met styleguides? Beschikt u over documentatie voor uw modules? Zo niet, geen paniek. In deze tutorial laat ik u zien hoe het mogelijk is om de manier waarop u met uw team werkt te verbeteren. We verkennen concepten die zijn voorgesteld door Brad Frost en Dave Olsen, met Pattern Lab om styleguides te maken, met Gulp om de activa af te handelen. Laten we beginnen!
Gulp.js is een streaming build-systeem en een taakloper. Het belangrijkste concept is dat u streams hebt waarin u veel dingen voor uw bestanden definieert. Het is sneller dan het handmatig beheren van dingen, waardoor je zenuwen en veel tijd bespaart. In deze tutorial plaatsen we bijvoorbeeld al onze Sass-bestanden in een pijp (een proces):
Om meer te leren over de basisprincipes van Gulp, bekijk Kezz Bracey's beginnersgids De commandoregel voor webontwerp: automatisering met gesputter.
Pattern Lab is een concept om te creëren atomair ontwerpsystemen; bouw modules in plaats van direct pagina's te bouwen. Het definieert verschillende samengestelde delen:
Je begint met het kleinste element, uitbouwt tot grotere delen, tot je volledige pagina's hebt. Deze aanpak helpt u tijd te besparen, samen te werken en een solide structuur te garanderen.
Atomen kunnen niet worden opgesplitst in kleinere stukjes.
Dit zijn de eenvoudigste blokken, inclusief fundamentele tags zoals lijsten, kleuren, lettertypen, animaties, enzovoort.
Moleculen zijn groepen van verschillende elementen (atomen) die samen functioneren als een eenheid.
Bijvoorbeeld een teaser met een kop, een afbeelding, alinea en een link zoals "Lees meer". Elk van deze is een enkel element, maar samen vormen ze een molecuul; onderdeel van een groter, complexer systeem.
Organismen zijn groepen elementen (atomen en moleculen) en werken als een sectie op uw website.
Denk bijvoorbeeld aan de kop van een website. Het is een groter systeem, opgebouwd uit moleculen zoals een zoekformulier en navigatie, die beide op hun beurt zijn opgebouwd uit kleinere atomen.
Pattern Lab header organism, te zien op een klein schermBekijk de online UI-demo's en krijg een gevoel voor het hele systeem.
Nu is het tijd om beide systemen te combineren en een workflow voor uw team te creëren. Pattern Lab geeft ons onze HTML en levert de eenvoudige gebruikersinterface, Gulp zal alle benodigde middelen verwerken.
Als u Gulp wilt gebruiken, moet u eerst node.js op uw systeem hebben staan. Als dat niet het geval is, kijk dan eens naar de opdrachtregel voor webontwerp van Kezz Bracey: Third Party Packages temmen voor installatie-instructies.
Laten we beginnen met Gulp.js wereldwijd te installeren. Typ in de terminal:
npm install gulp -g
Nu moeten we de repository van Patternlab klonen om ons een basis te geven om vanuit te werken.
git clone [email protected]: pattern-lab / patternlab-php.git
Vervolgens hebben we een slikbestand nodig om onze taken in te stellen. Maak een gulpfile.js in de hoofdmap van uw projectmap. Daarna hebben we een config-bestand nodig, waarin we alle paden definiëren, dus maak een build.config.json in je map.
De volgende bestanden zijn ook nodig:
Accentsconagua
.bowerrcpackage.jsonbower.jsonNa al deze basisstappen hebben we de basisstructuur van het project. Laten we nu beginnen met het bouwen van de taken voor onze workflow.
Bovenaan ons gulpfile.js-bestand hebben we elke afhankelijkheid nodig. Als u een plug-in installeert, moet u deze "nodig" hebben en een naam geven.
Begin met slikken en ons config-bestand voor alle paden en configuratie.
var gulp = require ('gulp'), config = require ('./ build.config.json');Tijdens ons ontwikkelingsproces hoeven we onze code niet te verkleinen (dat is tijdverspilling, tenzij we klaar zijn om te implementeren). Met het volgende productie variabele kunnen we sommige taken in- en uitschakelen. Je zult dit later in actie zien.
// Productiebehandeling // Beschrijving: Gebruik 'productie'variabele met' gulpif '// Minifing en optimalisatie schakelen voor activa var-productie;
Met het instellen van dingen kunnen we nu verschillende taken toevoegen om ons te helpen bij onze ontwikkeling!
// Installeer de benodigde afhankelijkheid npm install gulp-clean // Vereist afhankelijkheid var clean = require ('gulp-clean');Als u een afbeelding uit de map "source /" verwijdert, ziet u dat er ook een kopie van de afbeelding in "public /" staat. Vanwege deze duplicatie voeren we een eenvoudige stap uit om de afbeeldingsmap op te schonen in "public /".
// Taak: Opschonen: vóór // Beschrijving: Asset-bestanden verwijderen voordat andere taken worden uitgevoerd gulp.task ('clean: before', function () return gulp.src (config.assets.dest) .pipe (clean (force : true)));// Installeer de benodigde afhankelijkheden npm install gulp-concat gulp-uglify gulp-rename // Vereist dependencies var concat = require ('gulp-concat'); var uglify = require ('gulp-uglify'); var rename = require ('gulp-rename');Voor implementatiedoeleinden is het belangrijk om slechts één bestand met alle scripts te hebben. Om dit te bereiken gebruiken we de plug-in slok-concat en combineer al onze scripts om te produceren application.js. Als de variabele productie is dus waar application.js zal zijn uglified en krijg een nieuwe naam: application.min.js.
gulp.task ('scripts', function () return gulp.src (config.scripts.files) .pipe (concat ('application.js')) .pipe (gulpif (production, uglify ())) .pipe ( gulpif (productie, hernoemen (suffix: '.min'))) .pipe (gulp.dest (config.scripts.dest)) .pipe (browserSync.reload (stream: true)););Met deze taak worden alle lettertypen naar de openbare map verplaatst. Niets meer.
// Taak: verwerk lettertypen gulp.task ('fonts', function () return gulp.src (config.fonts.files) .pipe (gulp.dest (config.fonts.dest)) .pipe (browserSync.reload ( stream: true)););Voor deze stap zullen we de plug-in installeren en vereisen slok-imagemin. Zodra we dat hebben gedaan, kunnen we het gebruiken om afbeeldingen te verkleinen. Dit zal geheugen besparen en de prestaties verbeteren.
// Installeer imagemin npm install gulp-imagemin // Vereist dependencies var imagemin = require ('gulp-imagemin');Als de variabele productie waar is, dan worden alle afbeeldingen verkleind. Als dat klaar is, duwen we ze naar de doelmap.
// Taak: verwerk afbeeldingen gulp.task ('images', function () return gulp.src (config.images.files) .pipe (gulpif (production, imagemin ())). Pip (gulp.dest (config. images.dest)) .pipe (browserSync.reload (stream: true)););Laten we de afhankelijkheden installeren en vereisen slok-Sass en slok-cssmin.
// Installeer de benodigde afhankelijkheden npm install gulp-sass gulp-cssmin // Vereisen de afhankelijkheden var sass = require ('gulp-sass'); var cssmin = require ('gulp-cssmin');Nu nemen we alle Sass-bestanden, gebruiken we de Sass-plug-in om ze te compileren naar CSS, en dan als de variabele productie waar is, cssmin zal zijn ding doen.
// Taak: omgaan met Sass en CSS gulp.task ('sass', function () return gulp.src (config.scss.files) .pipe (sass ()) .pipe (gulpif (production, cssmin ())) .pipe (gulpif (productie, hernoemen (suffix: '.min'))) .pipe (gulp.dest (config.scss.dest)) .pipe (browserSync.reload (stream: true)) );Pattern Lab heeft een eigen server, die u kunt starten met een eenvoudige shell-opdracht. Om deze opdracht uit te voeren hebben we de plugin nodig teug-shell.
// Installeer de benodigde afhankelijkheden npm installeer gulp-shell // Vereisen de afhankelijkheden var shell = require ('gulp-shell');Op dit punt kopiëren we de map met de styleguide van core naar openbaar. Op dit punt ziet u een solide front-end in de browser.
// Taak: patternlab // Beschrijving: Bouw statische Pattern Lab-bestanden via PHP-script gulp.task ('patternlab', function () return gulp.src (", read: false) .pipe (shell (['php core / builder.php -gpn '])) .pipe (browserSync.reload (stream: true));); // Taak: styleguide // Beschrijving: Kopieer Styleguide-Folder van core / naar public gulp.task ('styleguide', function () return gulp.src (config.patternlab.styleguide.files) .pipe (gulp.dest (config.patternlab.styleguide.dest)););Pattern Lab heeft een ingebouwde server, maar Browser-Sync zorgt voor de injectie van CSS-wijzigingen zonder herladen van de pagina.
// Installeer de benodigde afhankelijkheden npm installeer browsersynchronisatie slobberen // Vereisen afhankelijkheden var browser-sync = vereisen ('browsersynchronisatie'); var watch = require ('gulp-watch');De bewaker zorgt voor veranderingen en triggert de specifieke taken. Daarna wordt onze weergave in browsersynchronisatie door browsersynchronisatie bijgewerkt.
// task: BrowserSync // Beschrijving: BrowserSync-server uitvoeren met uitgeschakelde ghost-modus gulp.task ('browsersynchronisatie', functie () browserSync (server: baseDir: config.root, ghostMode: true, open: " extern "););We specificeren de bestanden voor de bewaker en activeren de taken die we nodig hebben in het geval van een wijziging.
// Taak: bekijk bestanden gulp.task ('watch', function () // Watch Pattern Lab-bestanden gulp.watch (config.patternlab.files, ['patternlab']); // Watch scripts gulp.watch (config .scripts.files, ['scripts']); // Bekijk afbeeldingen gulp.watch (config.images.files, ['images']); // Watch Sass gulp.watch (config.scss.files, ['sass ']); // Watch fonts gulp.watch (config.fonts.files, [' fonts ']););schrift slok in de shell activeert de standaardtaak. Maar voordat Gulp dit begint, triggert het de clean: vóór taak om alle openbare bestanden op te ruimen.
// Taak: Standaard // Beschrijving: Bouw alle spullen van het project zodra gulp.task ('standaard', ['schoon: vóór'], functie () production = false; gulp.start ('patternlab', 'styleguide ',' fonts ',' sass ',' images ',' scripts '););Laten we een taak maken om te ontwikkelen op de styleguide, maar zonder activa te verzwakken. Dit triggers browser-sync, bouwt alle activa en start de kijker.
// Taak: Start uw productieproces // Beschrijving: Typ 'gulp' in terminal gulp.task ('serve', function () production = false; gulp.start ('browsersynchronisatie', 'standaard', 'kijk maar' ); );Voor deze stap hebben we een paar nieuwe plug-ins nodig.
// Installeer de benodigde afhankelijkheden npm install gulp-bump gulp-filter gulp-git gulp-tag-versie // Verplicht afhankelijkheden var bump = require ('gulp-bump'); var filter = vereisen ('gulp-filter'); var git = require ('gulp-git'); var tagversion = require ('gulp-tag-versie');Nu definieert u de gulp-taak vrijlating, stel de variabele productie in op waar (nu moeten we verkleinen) en de stream openen. Je moet alle bestanden met een versienummer nemen, de plugin bump gebruiken en het mogelijk maken om het type te definiëren (patch, minor of major) via een parameter in de shell.
Als u de uitvoert vrijlating-taak zonder een type dan slok-bump zal een patch nemen - x.x.1. Hierna duw je de bestanden naar de root en commit je de wijzigingen. Nu is het tijd om een nieuwe tag voor het project te genereren. Het bestand package.json is nodig om het huidige versienummer voor de nieuwe tag te krijgen.
Ten slotte pushen we alle bestanden en tags naar de oorsprong en naar de branch die we willen.
// Functie: loslaten (bumpen en taggen) // Beschrijving: Bump npm-versies, maak Git-tag en push naar oorsprong gulp.task ('release', function () production = true; return gulp.src (config.versioning. bestanden) .pipe (bump (type: gulp.env.type || 'patch')) .pipe (gulp.dest ('./')) .pipe (git.commit ('Release a' + gulp. env.type + '-update')) // lees slechts één bestand om versienummer te krijgen .pipe (filter ('package.json')) // Tag it .pipe (tagversion ()) // Publiceer bestanden en tags naar eindpunt .pipe (shell (['git push origin develop', 'git push origin --tags'])););Het is mogelijk om alle bestanden op een server te implementeren via rsync; dit is super snel en comfortabel. Type gulp inzetten in je terminal en na een paar seconden heb je het lokale project op de server. U hoeft mappen niet handmatig te slepen en neer te zetten. Automatiseer alle dingen. U definieert de host en het pad van de map waarin u wilt implementeren build.config.js.
// Taak: statische inhoud implementeren // Beschrijving: statische inhoud implementeren met rsync shell-opdracht gulp.task ('deploy', function () return gulp.src (config.deployment.local.path, read: false). pipe (shell (['rsync' + config.deployment.rsync.options + "+ config.deployment.local.path + '/' + config.deployment.remote.host])));Je hebt zoveel code geschreven, en hier is het eindresultaat! U hebt misschien liever een afzonderlijk bestand voor elke taak, in welk geval u van plan bent om het op te splitsen. In dit geval zullen we omwille van de eenvoud alles weergeven in één Gulpfile:
var gulp = vereisen ('gulp'), bump = vereisen ('gulp-bump'), clean = vereisen ('gulp-clean'), concat = require ('gulp-concat'), browserSync = require ('browser- sync '), cssmin = require (' gulp-cssmin '), filter = require (' gulp-filter '), git = require (' gulp-git '), gulpif = require (' gulp-if '), imagemin = require ('gulp-imagemin'), rename = require ('gulp-rename'), sass = require ('gulp-sass'), shell = require ('gulp-shell'), tagversion = require ('gulp-tag -versie '), uglify = require (' gulp-uglify '), config = require (' ./ build.config.json '); // Trigger var-productie; // Taak: Opschonen: vóór // Beschrijving: Asset-bestanden verwijderen voordat andere taken worden uitgevoerd gulp.task ('clean: before', function () return gulp.src (config.assets.dest) .pipe (clean (force : true))); // Taak: verwerk scripts gulp.task ('scripts', function () return gulp.src (config.scripts.files) .pipe (concat ('application.js')) .pipe (gulpif (production, uglify ( ))) .pipe (gulpif (productie, hernoemen (suffix: '.min'))) .pipe (gulp.dest (config.scripts.dest)) .pipe (browserSync.reload (stream: true) );); // Taak: verwerk lettertypen gulp.task ('fonts', function () return gulp.src (config.fonts.files) .pipe (gulp.dest (config.fonts.dest)) .pipe (browserSync.reload ( stream: true));); // Taak: verwerk afbeeldingen gulp.task ('images', function () return gulp.src (config.images.files) .pipe (gulpif (production, imagemin ())). Pip (gulp.dest (config. images.dest)) .pipe (browserSync.reload (stream: true));); // Taak: omgaan met Sass en CSS gulp.task ('sass', function () return gulp.src (config.scss.files) .pipe (sass ()) .pipe (gulpif (production, cssmin ())) .pipe (gulpif (productie, hernoemen (suffix: '.min'))) .pipe (gulp.dest (config.scss.dest)) .pipe (browserSync.reload (stream: true)) ); // Taak: patternlab // Beschrijving: Bouw statische Pattern Lab-bestanden via PHP-script gulp.task ('patternlab', function () return gulp.src (", read: false) .pipe (shell (['php core / builder.php -gpn '])) .pipe (browserSync.reload (stream: true));); // Taak: styleguide // Beschrijving: Kopieer Styleguide-Folder van core / naar public gulp.task ('styleguide', function () return gulp.src (config.patternlab.styleguide.files) .pipe (gulp.dest (config.patternlab.styleguide.dest));); // task: BrowserSync // Beschrijving : Start BrowserSync-server met uitgeschakelde ghost-modus gulp.task ('browsersynchronisatie', functie () browserSync (server: baseDir: config.root, ghostMode: true, open: "external");); // Taak: bekijk bestanden gulp.task ('watch', function () // Watch Pattern Lab-bestanden gulp.watch (config.patternlab.files, ['patternlab']); // Watch scripts gulp.watch (config .scripts.files, ['scripts']); // Bekijk afbeeldingen gulp.watch (config.images.files, ['images']); // Bekijk Sass gulp.watch (config.scss.files, ['sa ss ']); // Watch fonts gulp.watch (config.fonts.files, ['fonts']); ); // Taak: Standaard // Beschrijving: Bouw alle spullen van het project zodra gulp.task ('standaard', ['schoon: vóór'], functie () production = false; gulp.start ('patternlab', 'styleguide ',' fonts ',' sass ',' images ',' scripts ');); // Taak: Start uw productieproces // Beschrijving: Typ 'gulp' in terminal gulp.task ('serve', function () production = false; gulp.start ('browsersynchronisatie', 'standaard', 'kijk maar' ); ); // Taak: statische inhoud implementeren // Beschrijving: statische inhoud implementeren met rsync shell-opdracht gulp.task ('deploy', function () return gulp.src (config.deployment.local.path, read: false). pipe (shell (['rsync' + config.deployment.rsync.options + "+ config.deployment.local.path + '/' + config.deployment.remote.host]))); // Functie: Releasing ( Bump & Tagging) // Beschrijving: Bump npm-versies, maak Git-tag en push naar oorsprong gulp.task ('release', function () production = true; return gulp.src (config.versioning.files) .pipe (bump (type: gulp.env.type || 'patch')) .pipe (gulp.dest ('./')) .pipe (git.commit ('Release a' + gulp.env.type + '- update ')) // lees slechts één bestand om versienummer te krijgen .pipe (filter (' package.json ')) // Tag it .pipe (tagversion ()) // Publiceer bestanden en tags naar endpoint .pipe (shell ( ['git push origin developing', 'git push origin --tags'])););Nu hebben we ons configbestand nodig om de verschillende paden in te stellen. Dit bestand is nodig om de paden en configuratie van het project te behouden:
"root": "./public", "deployment": "local": "path": "public", "remote": "host": "YOUR HOST", "rsync": "options": "-avzh --delete -e ssh", "assets": "base": "source / assets /", "dest": "public / assets /", "versioning": "bestanden": ["./package.json", "./bower.json"], "scripts": "base": "source / assets / javascripts /", "files": ["source / assets /javascripts/**/*.js "]," dest ":" public / assets / javascripts / "," components ": " base ":" source / assets / components / "," scss ": "base": "source / assets / scss /", "files": ["source / assets / scss / ** / *. scss"], "dest": "public / assets / stylesheets /", "fonts ": " base ":" source / assets / fonts / "," files ": [" source / assets / fonts / ** / * "]," dest ":" public / assets / fonts / "," images ": " base ":" source / assets / images / "," files ": [" source / assets / images / ** / * "]," dest ":" public / assets / images / ", "patternlab": "styleguide": "files": ["core / styleguide / **"], "dest": "public / styleguide /", "files": ["source / _patterns / ** / *.snor", "source / _patterns / ** / *. json", "source / _data / *. json"]
Ik werk graag met een combinatie van Gulp en Pattern Lab. Ik heb in verschillende teams gewerkt en deze basis gelegd voor elk project. Feedback van elk teamlid is altijd positief geweest vanwege het eenvoudig te volgen proces. Iedereen heeft een solide ondergrond, kan de module kiezen en deze met gemak gebruiken. Zie de opmerkingen hieronder voor vragen of feedback.
