[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":3,"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":39,"AhXAFuQQeAwg3zTmANyCGG875j2r6XnpRfsAKtoOOLc":75,"LcrNe1i6tDU3lvjYdscHfB1b4ylm70oY76Rxx4f8NMo":164,"_apollo:default":209},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","footer","Fußzeile",[9,24,29,34],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum",null,"/impressum",{"__typename":16,"id":17,"name":18,"direction":19},"Language","de","German","ltr",true,false,{"__typename":23,"class":13},"MenuItemAttributes",{"__typename":10,"id":25,"title":26,"description":13,"url":27,"langcode":15,"internal":20,"expanded":21,"attributes":28},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":21,"expanded":21,"attributes":38},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"menu":40},{"__typename":5,"id":41,"name":42,"items":43},"nuxt-main-menu","Nuxt Hauptmenü",[44,50,55,60,65,70],{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":48,"internal":20,"expanded":21,"attributes":49},"9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog","/know-how",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":51,"title":52,"description":13,"url":53,"langcode":48,"internal":20,"expanded":21,"attributes":54},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":56,"title":57,"description":13,"url":58,"langcode":48,"internal":20,"expanded":21,"attributes":59},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":48,"internal":20,"expanded":21,"attributes":64},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":48,"internal":20,"expanded":21,"attributes":69},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":48,"internal":20,"expanded":21,"attributes":74},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"route":76},{"__typename":77,"entity":78},"RouteInternal",{"__typename":79,"id":80,"title":81,"changed":82,"created":88,"langcode":89,"path":90,"promote":21,"status":20,"sticky":21,"metatag":91,"postCategory":111,"postContentElements":13,"evergreen":13,"tags":136,"postWpBody":154,"wpHeaderImage":13,"wpHeaderImageOld":13,"wpHeaderImageOldSmall":13,"wpOgImage":13,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":157,"author":158},"NodeWpPost","1015","Front-end Workflow mit Gulp",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1391092865,"UTC","+00:00","2014-01-30T14:41:05+00:00",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},{"__typename":16,"id":17,"name":18,"direction":19},"/blog/front-end-workflow-mit-gulp",[92,99,106],{"__typename":93,"tag":94,"attributes":95},"MetaTagValue","meta",{"__typename":96,"name":97,"content":98},"MetaTagValueAttributes","title","Front-end Workflow mit Gulp | Liechtenecker UX Design Studio",{"__typename":100,"tag":101,"attributes":102},"MetaTagLink","link",{"__typename":103,"href":104,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"MetaTagLinkAttributes","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/blog/front-end-workflow-mit-gulp","canonical",{"__typename":107,"tag":94,"attributes":108},"MetaTagProperty",{"__typename":109,"property":110,"content":81},"MetaTagPropertyAttributes","og:title",{"__typename":112,"id":113,"name":114,"path":115,"status":20,"weight":116,"description":117,"langcode":121,"changed":122,"metatag":125},"TermCategories","8","UX/UI Design","/kategorie/design",0,{"__typename":118,"processed":119,"format":120},"Text","Themen aus dem Bereich Design & User Experience","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":123,"timezone":85,"offset":86,"time":124},1713772777,"2024-04-22T07:59:37+00:00",[126,129,133],{"__typename":93,"tag":94,"attributes":127},{"__typename":96,"name":97,"content":128},"UX/UI Design | Liechtenecker UX Design Studio",{"__typename":93,"tag":94,"attributes":130},{"__typename":96,"name":131,"content":132},"description","Themen aus dem Bereich Design & User Experience",{"__typename":100,"tag":101,"attributes":134},{"__typename":103,"href":135,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/design",[137,142,146,150],{"__typename":138,"id":139,"name":140,"path":141,"weight":116},"TermTags","119","automation","/tag/automation",{"__typename":138,"id":143,"name":144,"path":145,"weight":116},"507","frontend","/tag/frontend",{"__typename":138,"id":147,"name":148,"path":149,"weight":116},"565","gulp","/tag/gulp",{"__typename":138,"id":151,"name":152,"path":153,"weight":116},"1583","workflow","/tag/workflow",{"__typename":155,"processed":156,"format":120,"summary":13},"TextSummary","\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cdiv alt=\"Gulp\" data-entity-type=\"media\" data-entity-uuid=\"19e8486d-2314-4d36-a9e0-b6a70b935c05\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2014/01/gulp1-1.png.webp?itok=kXt-CVYL 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2014/01/gulp1-1.png.webp?itok=no-D46Qu 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1000\" height=\"400\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2014/01/gulp1-1.png.webp?itok=yl-un2F8 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2014/01/gulp1-1.png.webp?itok=kfy0CJbx 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1000\" height=\"400\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2014/01/gulp1-1.png.webp?itok=MM9HlK9L 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2014/01/gulp1-1.png.webp?itok=UgfjYsXs 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"298\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2014/01/gulp1-1.png.webp?itok=vttykRiJ 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2014/01/gulp1-1.png.webp?itok=QO23voSD 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"192\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2014/01/gulp1-1.png.webp?itok=YXy3cN1n 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/01/gulp1-1.png.webp?itok=D7zlz9tW 2x\" type=\"image/webp\" width=\"1000\" height=\"400\">\n                  \u003Cimg loading=\"lazy\" width=\"1000\" height=\"400\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/01/gulp1-1.png.jpg?itok=D7zlz9tW\" alt=\"Gulp\" title=\"Gulp\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003Cp>\u003Cbr>\nVor genau 123 Tagen habe ich euch den Task-Runner Grunt vorgestellt und gezeigt wie man Bildoptimierung in seinen täglichen Workflow einbauen kann und auch sollte. Mittlerweile gibt es schob über 2000 Grunt Plugins und es werden täglich mehr. Man kann sich also vorstellen, dass die Möglichkeiten hier quasi unbegrenzt sind. Für wirklich jeden Workflow ist hier etwas dabei und das sind nur ein paar Gründe warum Grunt so beliebt und verbreitet ist. Kein Wunder, dass bis jetzt kein Konkurrenzprodukt in Sicht war. Doch diese Zeit ist vorbei. Gulp steigt in den Ring und erhebt Anspruch auf die bisherige Alleinherrschaft von Grunt.\u003C/p>\n\u003Ch3>Warum brauchen wir Gulp\u003C/h3>\n\u003Cp>Bereits seit Mitte des letzten Jahres gibt es \u003Ca title=\"Gulp Stream system\" href=\"http://gulpjs.com/\">Gulp\u003C/a>. Grob gesagt ist es genau wie Grunt: Ein Task-Runner der einem dabei Hilft, tägliche Aufgaben zu automatisieren. Trotzdem gibt es Unterschiede und Gulp geht neue Wege. Worin sich diese Tools unterscheiden und  wo die Vorteile bzw. Nachteile liegen möchte ich in diesem Artikel veranschaulichen.\u003Cbr>\nBevor wir uns die Details in einem Beispiel genau ansehen möchte ich hier zuerst noch die wichtigsten Nachteile von Grunt aufzeigen.\u003C/p>\n\u003Cul>\n\u003Cli>die Grunt Konfiguration ist oft sehr lang , unübersichtlich und undurchschaubar\u003C/li>\n\u003Cli>die Grunt Plugins beinhalten zu viel Logik, Teilaufgaben sind in vielen Plugins enthalten\u003C/li>\n\u003C/ul>\n\u003Cp>Das sind genau die Punkte die Gulp besser machen möchte. Den besten Überblick bekommt man natürlich bei einem realen Beispiel, weshalb wir auch gleich damit beginnen werden. In unserem Beispiel werden wir typische Assets-Aufgaben automatisieren: Sass kompilieren, JavaScript komprimieren und Bilder optimieren.\u003C/p>\n\u003Cblockquote>\n\u003Cp>No Need To Grunt, Take A Gulp Of Fresh Air – Travis Maynard\u003C/p>\n\u003C/blockquote>\n\u003Ch3>Setup\u003C/h3>\n\u003Cdiv alt=\"Datei Struktur\" data-entity-type=\"media\" data-entity-uuid=\"6149fdca-642b-4d5b-9560-53c50785e5d5\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2014/01/test1-1.png.webp?itok=e_sxJwsm 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2014/01/test1-1.png.webp?itok=KLkpuVoN 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"407\" height=\"209\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2014/01/test1-1.png.webp?itok=X6Asz6QI 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2014/01/test1-1.png.webp?itok=7B0KDOto 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"407\" height=\"209\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2014/01/test1-1.png.webp?itok=oAaOEPdY 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2014/01/test1-1.png.webp?itok=ANv8cDLa 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"407\" height=\"209\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2014/01/test1-1.png.webp?itok=ucbm8f5B 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2014/01/test1-1.png.webp?itok=64RtMLi1 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"407\" height=\"209\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2014/01/test1-1.png.webp?itok=s8ZG-kyr 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/01/test1-1.png.webp?itok=HlsI4qqe 2x\" type=\"image/webp\" width=\"407\" height=\"209\">\n                  \u003Cimg loading=\"lazy\" width=\"407\" height=\"209\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2014/01/test1-1.png.jpg?itok=HlsI4qqe\" alt=\"Datei Struktur\" title=\"Datei Struktur\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003Cp>Auf die Installation von \u003Ca title=\"Gulp Installation\" href=\"http://gulpjs.com/\">Gulp\u003C/a> und \u003Ca title=\"NodeJs\" href=\"http://nodejs.org/\">NodeJS\u003C/a>  werde ich hier nicht eingehen. Nach der Installation solltet ihr in eurem Assets Ordner eine leere Gulpfile.js Datei, eine package.json Datei und einen node_modules Ordnern haben. Nun erstellen wir noch unsere gewünschte File-Struktur.\u003Cbr>\n\u003Cbr>\nWas wollen wir nun genau erreichen:\u003C/p>\n\u003Cul>\n\u003Cli>Sass Datei kompilieren in den styles Ordner\u003C/li>\n\u003Cli>JS File komprimieren\u003C/li>\n\u003Cli>Bilder aus images-orig optimieren und in images speichern\u003C/li>\n\u003C/ul>\n\u003Ch3>Styles Task\u003C/h3>\n\u003Cp>Zuerst installieren wir das Gulp \u003Ca title=\"Gulp Sass Modul\" href=\"https://npmjs.org/package/gulp-sass\">Sass Modul \u003C/a>mit „npm install gulp-sass —-save“\u003Cbr>\nÜber den save Parameter schreiben wir das Modul automatisch in unsere package.json Datei. Das Gulpfile.js Grundgerüst sieht wie folgt aus:\u003C/p>\n\u003Cpre>\n// Module definieren\nvar gulp = require('gulp');\nvar gutil = require('gulp-util');\n// Gulp default task\ngulp.task('default', ['']);\n\u003C/pre>\n\u003Cp>Jedes eingesetzte Modul wird im Gulpfile.js in einer Variabel gespeichert. Jetzt können wir einen neuen Task definieren und wir beginnen mit unseren Styles.\u003C/p>\n\u003Cpre>\n// Styles task\ngulp.task('styles', function () {\n    gulp.src('sass/main.scss')\n        .pipe(sass())\n        .pipe(gulp.dest('styles'));\n});\n\u003C/pre>\n\u003Cp>Was hier passiert ist simpel. Wir geben eine Quelle für unsere Sass Datei an, danach lassen wir das Sass Modul über die Datei laufen und geben die neue Datei an einem Zielort aus. Hier ist der erste Unterschied zu Grunt gleich zu sehen: gulp.src und gulp.dest sind Gulp API Funktionen. Da wir bei vielen Tasks Dateien lesen und schreiben wollen, ist es sinnvoll diese Aufgaben aus den Modules auszulagern. Weiters setzten wir den Styles Task als default. Dadurch wird dieser gestartet wenn wir “gulp” im Terminal eingeben. Danach sollte die kompilierte Datei unter dem Ordner styles zu finden sein.\u003C/p>\n\u003Cpre>\n// Gulp default task\ngulp.task('default', ['styles']);\n\u003C/pre>\n\u003Ch3>Script Task\u003C/h3>\n\u003Cp>Im zweiten Task wollen wir unsere JavaScript Datei komprimieren. Dafür verwenden wir das \u003Ca title=\"Gulp Uglify Modul\" href=\"https://npmjs.org/package/gulp-uglify\">Uglify Modul\u003C/a>.\u003C/p>\n\u003Cpre>\nnpm install gulp-uglify —save\n\u003C/pre>\n\u003Cp>Auch hier müssen wir jetzt das Modul im Gulpfile.js in einer Variabel definieren, bevor wir es im nächsten Task verwenden können.\u003C/p>\n\u003Cpre>\n// Script task\ngulp.task('scripts', function() {\n    gulp.src('scripts/main.js')\n        .pipe(uglify())\n        .pipe(gulp.dest('scripts/'));\n});\n\u003C/pre>\n\u003Cp>Nachdem wir uns wieder zuerst die gewünscht Datei holen, schicken wir sie durch das Uglify Modul und überschreiben sie dann. Nun haben wir eine komprimierte Version.\u003C/p>\n\u003Ch3>Images Task\u003C/h3>\n\u003Cp>Als nächstes wollen wir uns noch das Optimieren von Bilder ansehen. Wieder installieren wir hierfür ein \u003Ca title=\"Gulp imagemin Modul\" href=\"https://npmjs.org/package/gulp-imagemin\">Modul\u003C/a> und setzen die Variable im Gulpfile.js.\u003C/p>\n\u003Cpre>\nnpm install gulp-imagemin —-save\n\u003C/pre>\n\u003Cp>Auch dieser Task ist recht simpel. Diesmal beschränken wir jedoch die Auswahl der Dateien auf bestimmte Dateiformate, da das Modul nur für diese ausgerichtet ist. Danach schmeißen wir die Dateien in das Bild-Optimierungsmodul und von dort gelangen sie in den images Ordner. Für die Entwicklungen können wir jetzt die optimierten Bilder verwenden, aber zur Sicherheit haben wir noch die Original Bilder parat, falls wir sie benötigen.\u003C/p>\n\u003Cpre>\n// Images task\ngulp.task('images', function () {\n    gulp.src('images-orig/*.{png,gif,jpg}')\n        .pipe(imagemin())\n        .pipe(gulp.dest('images/'));\n});\n\u003C/pre>\n\u003Ch3>Watch Task\u003C/h3>\n\u003Cp>Zuletzt wäre es vielleicht noch praktisch, wenn all diese Tasks automatisch gestartet werden, sobald sich etwas ändert. Auch das ist bei Gulp möglich und sogar schon integriert. Wir benötigen daher kein weiteres Modul.\u003Cbr>\nIm Task watch definieren wir, wo wir nach Änderungen Ausschau halten und welcher Task bei Änderungen gestartet werden soll. Auch den neuen watch Task müssen wir als default Task definieren, damit er ab Beginn von Gulp läuft.\u003C/p>\n\u003Cpre>\n// Rerun the task when a file changes\ngulp.task('watch', function () {\n    gulp.watch('sass/**.scss', ['styles']);\n    gulp.watch('scripts/**.js', ['scripts']);\n    gulp.watch('images-orig/**', ['images']);\n});\n\u003C/pre>\n\u003Cp>Wenn wir jetzt gulp in der Konsole eingeben, werden zuerst alle unser Tasks gestartet die wir unter default definiert haben. Der Prozess endet aber danach nicht, da der watch Task weiter auf Änderungen wartet.\u003Cbr>\nDen kompletten Code haben wir für euch auf \u003Ca title=\"Github Gulp\" href=\"https://github.com/Liechtenecker/blog-gulp\">Github\u003C/a> zur Verfügung gestellt.\u003C/p>\n\u003Ch3>Fazit\u003C/h3>\n\u003Cp>Et voilà, in nur 37 Zeilen haben wir unsere Automationen mit Gulp konfiguriert. Unser Code ist kurz, übersichtlich und effektiv. Genau hier sind einige Vorteile gegenüber Grunt zu erkennen. Deshalb haben wir uns auch entschieden unseren Workflow für Gulp zu adaptieren. Trotzdem ist es noch relativ neu am Markt und muss sich erst über einen längeren Zeitraum bewähren. Natürlich empfiehlt sich der Umstieg nicht sofort für jeden. Am Besten ihr verschafft euch selbst einen Überblick und bildet eine eigene Meinung dazu. Wir sind auf jeden Fall schon im Gulp-Fieber! =)\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n","\u003C!-- This site is optimized with the Yoast SEO plugin v15.7 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://legacy.liechtenecker.dev/blog/front-end-workflow-mit-gulp/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"Front-end Workflow mit Gulp - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Vor genau 123 Tagen habe ich euch den Task-Runner Grunt vorgestellt und gezeigt wie man Bildoptimierung in seinen täglichen Workflow einbauen kann und auch sollte. Mittlerweile gibt es schob über 2000 Grunt Plugins und es werden täglich mehr. Man kann sich also vorstellen, dass die Möglichkeiten hier quasi unbegrenzt sind. Für wirklich jeden Workflow ist […]\" />\n\u003Cmeta property=\"og:url\" content=\"https://legacy.liechtenecker.dev/blog/front-end-workflow-mit-gulp/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2014-01-30T15:41:05+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://legacy.liechtenecker.dev/wp-content/uploads/2014/01/gulp1-1.png\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Geschätzte Lesezeit\">\n\t\u003Cmeta name=\"twitter:data1\" content=\"5 Minuten\">\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://legacy.liechtenecker.dev/#website\",\"url\":\"https://legacy.liechtenecker.dev/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://legacy.liechtenecker.dev/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/blog/front-end-workflow-mit-gulp/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://legacy.liechtenecker.dev/wp-content/uploads/2014/01/gulp1-1.png\",\"width\":1000,\"height\":400},{\"@type\":\"WebPage\",\"@id\":\"https://legacy.liechtenecker.dev/blog/front-end-workflow-mit-gulp/#webpage\",\"url\":\"https://legacy.liechtenecker.dev/blog/front-end-workflow-mit-gulp/\",\"name\":\"Front-end Workflow mit Gulp - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://legacy.liechtenecker.dev/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://legacy.liechtenecker.dev/blog/front-end-workflow-mit-gulp/#primaryimage\"},\"datePublished\":\"2014-01-30T15:41:05+00:00\",\"dateModified\":\"2014-01-30T15:41:05+00:00\",\"author\":{\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/c6a4fab1680ccc1ec0ed63179501b4b1\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://legacy.liechtenecker.dev/blog/front-end-workflow-mit-gulp/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/c6a4fab1680ccc1ec0ed63179501b4b1\",\"name\":\"Christoph Rumpel\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/3191eb8b348673db049a15f94835ba83?s=96&d=mm&r=g\",\"caption\":\"Christoph Rumpel\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":159,"id":160,"myRole":161,"name":162,"nickname":163},"User","4","-","c-rumpel","Christoph Rumpel",{"latestKnowhow":165},[166,184,197],{"__typename":79,"id":167,"title":168,"path":169,"wpTeaserText":170,"wpPromotedTeaserImage":13,"wpHeaderImage":171},"1619","Behind the scenes: Ein Barrierefreiheits-Audit","/blog/behind-scenes-ein-barrierefreiheits-audit","”Entspricht unsere Website den gesetzlichen Anforderungen und wenn nicht, was genau müssen wir ändern?”\r\nDiese Frage lieben wir. Echt! Und so sieht unsere Antwort aus.",{"__typename":172,"id":173,"excludeFromScreenreader":13,"mediaImage":174,"name":182,"path":183,"status":20},"MediaImage","3364",{"__typename":175,"url":176,"width":177,"height":178,"alt":179,"title":13,"size":180,"mime":181},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-04/Headerbilder%20Blogartikel%20Behind%20the%20scene%20Accessibility%20Audit.jpg",2880,1300,"Headline mit Sujet: Tastatur mit Symbolen für Barrierefreiheit im Fokus auf hellem  Hintergrund",838204,"image/jpeg","Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":185,"title":186,"path":187,"wpTeaserText":188,"wpPromotedTeaserImage":13,"wpHeaderImage":189},"1616","Agentic KI trifft Design-System: Wie unser Presentation Maker entstand.","/blog/agentic-ki-trifft-design-system-wie-unser-presentation-maker-entstand","Nein, wir wollen euch jetzt nicht erzählen, was KI alles kann. Aber wir möchten euch zeigen, wie wir mit KI umgehen. \r\n",{"__typename":172,"id":190,"excludeFromScreenreader":13,"mediaImage":191,"name":195,"path":196,"status":20},"3355",{"__typename":175,"url":192,"width":177,"height":178,"alt":193,"title":13,"size":194,"mime":181},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-03/BLOG_Presentation%20Tool_TITEL-2880x1300px_1.jpg","Lukas und Daniel  arbeiten an Computern im Büro.",2621988,"BLOG_Presentation Tool_TITEL-2880x1300px.jpg","/media/3355/edit",{"__typename":79,"id":198,"title":199,"path":200,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":201},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":172,"id":202,"excludeFromScreenreader":21,"mediaImage":203,"name":207,"path":208,"status":20},"3303",{"__typename":175,"url":204,"width":177,"height":178,"alt":205,"title":13,"size":206,"mime":181},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-01/BLOG_Trendbericht%202026.jpg","UI Trends 2026, gelber Hintergrund, schwarze Schrift.",4700748,"BLOG_Trendbericht 2026.jpg","/media/3303/edit",{"Language:de":210,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":211,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":215,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":218,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":221,"Menu:footer":224,"ROOT_QUERY":234,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":250,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":253,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":256,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":259,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":262,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":265,"Menu:nuxt-main-menu":268,"TermCategories:8":282,"TermTags:119":293,"TermTags:507":294,"TermTags:565":295,"TermTags:1583":296,"User:4":297,"NodeWpPost:1015":298,"MediaImage:3364":323,"NodeWpPost:1619":325,"MediaImage:3355":328,"NodeWpPost:1616":330,"MediaImage:3303":333,"NodeWpPost:1606":335},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",212,"internal",20,"expanded",21,"attributes",214],{"__ref":213},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",216,"internal",20,"expanded",21,"attributes",217],{"__ref":213},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",219,"internal",20,"expanded",21,"attributes",220],{"__ref":213},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",222,"internal",21,"expanded",21,"attributes",223],{"__ref":213},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",225],[226,228,230,232],{"__ref":227},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":229},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":231},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":233},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",235,"menu({\"name\":\"FOOTER\"})",236,"menu({\"name\":\"NUXT_MAIN_MENU\"})",238,"route({\"path\":\"/blog/front-end-workflow-mit-gulp\"})",240,"latestKnowhow({\"excludeId\":\"1015\",\"limit\":3})",243],"Query",{"__ref":237},"Menu:footer",{"__ref":239},"Menu:nuxt-main-menu",["null","__typename",77,"entity",241],{"__ref":242},"NodeWpPost:1015",[244,246,248],{"__ref":245},"NodeWpPost:1619",{"__ref":247},"NodeWpPost:1616",{"__ref":249},"NodeWpPost:1606",["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",251,"internal",20,"expanded",21,"attributes",252],{"__ref":213},["null","__typename",23,"class",13],["null","__typename",10,"id",51,"title",52,"description",13,"url",53,"langcode",254,"internal",20,"expanded",21,"attributes",255],{"__ref":213},["null","__typename",23,"class",13],["null","__typename",10,"id",56,"title",57,"description",13,"url",58,"langcode",257,"internal",20,"expanded",21,"attributes",258],{"__ref":213},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",260,"internal",20,"expanded",21,"attributes",261],{"__ref":213},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",263,"internal",20,"expanded",21,"attributes",264],{"__ref":213},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",266,"internal",20,"expanded",21,"attributes",267],{"__ref":213},["null","__typename",23,"class",13],["null","__typename",5,"id",41,"name",42,"items",269],[270,272,274,276,278,280],{"__ref":271},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":273},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":275},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":277},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":279},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":281},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",112,"id",113,"name",114,"path",115,"status",20,"weight",116,"description",283,"langcode",284,"changed",285,"metatag",286],["null","__typename",118,"processed",119,"format",120],{"__ref":213},["null","__typename",83,"timestamp",123,"timezone",85,"offset",86,"time",124],[287,289,291],["null","__typename",93,"tag",94,"attributes",288],["null","__typename",96,"name",97,"content",128],["null","__typename",93,"tag",94,"attributes",290],["null","__typename",96,"name",131,"content",132],["null","__typename",100,"tag",101,"attributes",292],["null","__typename",103,"href",135,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",138,"id",139,"name",140,"path",141,"weight",116],["null","__typename",138,"id",143,"name",144,"path",145,"weight",116],["null","__typename",138,"id",147,"name",148,"path",149,"weight",116],["null","__typename",138,"id",151,"name",152,"path",153,"weight",116],["null","__typename",159,"id",160,"myRole",161,"name",162,"nickname",163],["null","__typename",79,"id",80,"title",81,"changed",299,"created",300,"langcode",301,"path",90,"promote",21,"status",20,"sticky",21,"metatag",302,"category",309,"contentElements",13,"evergreen",13,"tags",311,"wpBody",320,"wpHeaderImage",13,"wpHeaderImageOld",13,"wpHeaderImageOldSmall",13,"wpOgImage",13,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",157,"author",321],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],{"__ref":213},[303,305,307],["null","__typename",93,"tag",94,"attributes",304],["null","__typename",96,"name",97,"content",98],["null","__typename",100,"tag",101,"attributes",306],["null","__typename",103,"href",104,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",107,"tag",94,"attributes",308],["null","__typename",109,"property",110,"content",81],{"__ref":310},"TermCategories:8",[312,314,316,318],{"__ref":313},"TermTags:119",{"__ref":315},"TermTags:507",{"__ref":317},"TermTags:565",{"__ref":319},"TermTags:1583",["null","__typename",155,"processed",156,"format",120,"summary",13],{"__ref":322},"User:4",["null","__typename",172,"id",173,"excludeFromScreenreader",13,"mediaImage",324,"name",182,"path",183,"status",20],["null","__typename",175,"url",176,"width",177,"height",178,"alt",179,"title",13,"size",180,"mime",181],["null","__typename",79,"id",167,"title",168,"path",169,"wpTeaserText",170,"wpPromotedTeaserImage",13,"wpHeaderImage",326],{"__ref":327},"MediaImage:3364",["null","__typename",172,"id",190,"excludeFromScreenreader",13,"mediaImage",329,"name",195,"path",196,"status",20],["null","__typename",175,"url",192,"width",177,"height",178,"alt",193,"title",13,"size",194,"mime",181],["null","__typename",79,"id",185,"title",186,"path",187,"wpTeaserText",188,"wpPromotedTeaserImage",13,"wpHeaderImage",331],{"__ref":332},"MediaImage:3355",["null","__typename",172,"id",202,"excludeFromScreenreader",21,"mediaImage",334,"name",207,"path",208,"status",20],["null","__typename",175,"url",204,"width",177,"height",178,"alt",205,"title",13,"size",206,"mime",181],["null","__typename",79,"id",198,"title",199,"path",200,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",336],{"__ref":337},"MediaImage:3303"]