{"id":229442,"date":"2022-11-19T18:48:00","date_gmt":"2022-11-19T15:48:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229442"},"modified":"2022-11-19T18:48:03","modified_gmt":"2022-11-19T15:48:03","slug":"pierwsze-kroki-z-pakietami-startowymi-gulp","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/pierwsze-kroki-z-pakietami-startowymi-gulp\/","title":{"rendered":"Pierwsze kroki z pakietami startowymi Gulp"},"content":{"rendered":"\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/pl\/jaka-jest-roznica-w-codekit-i-composer\/\" title=\"M\u00f3wienie o CodeKit\">M\u00f3wienie o CodeKit<\/a> i korzy\u015bciach, jakie oferuje programistom front-end, pojawi\u0142o si\u0119 r\u00f3wnie\u017c tu\u017c po po\u015bcie, a tak\u017ce korzy\u015bciach, jakie oferuje <a href=\"https:\/\/gulpjs.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">co\u015b takiego jak Gulp<\/a>.<\/p>\n<p>Post na temat r\u00f3\u017cnicy mi\u0119dzy nimi, dlaczego mo\u017cesz chcie\u0107 jedno nad drugim, a zalety lub wady obu mog\u0105 by\u0107 jego postem.<\/p>\n<p>Ale w tym celu chcia\u0142bym wzi\u0105\u0107 <a href=\"https:\/\/wordpress.mediadoma.com\/pl\/pakiety-kilku-lykow-na-poczatek\/\" title=\"pakiety startowe,\">pakiety startowe,<\/a> o kt\u00f3rych pisa\u0142em, dotycz\u0105ce Gulpa i poda\u0107 prosty przyk\u0142ad startowego pliku Gulp i jak go u\u017cywa\u0107 w projektach WordPress.<\/p>\n<h2>Pierwsze kroki z Gulp<\/h2>\n<p>Po pierwsze jestem fanem Homebrew, wi\u0119c je\u015bli chodzi o zarz\u0105dzanie pakietami, kt\u00f3re nie s\u0105 cz\u0119\u015bci\u0105 Mac App Store, korzystam z niego. To znacznie u\u0142atwia instalowanie pakiet\u00f3w, aktualizowanie ich i odinstalowywanie.<\/p>\n<p>Je\u015bli nie czyta\u0142e\u015b <a href=\"https:\/\/wordpress.mediadoma.com\/pl\/homebrew-node-i-gulp-dla-rozwoju-wordpress\/\" title=\"mojego przewodnika po Homebrew\">mojego przewodnika po Homebrew<\/a>, zr\u00f3b to, poniewa\u017c pozosta\u0142a cz\u0119\u015b\u0107 tego postu zak\u0142ada, \u017ce \u200b\u200bmasz go zainstalowany.<\/p>\n<h3>1 Zainstaluj Gulp<\/h3>\n<p>Je\u015bli masz zainstalowany Homebrew, upewnij si\u0119, \u017ce wszystko wygl\u0105da dobrze i jest aktualne, mam ca\u0142y przewodnik dotycz\u0105cy konfiguracji Gulpa na lokalnym komputerze.<\/p>\n<\/p>\n<p>Wi\u0119c je\u015bli nie masz jeszcze tej konfiguracji, sprawd\u017a <a href=\"https:\/\/wordpress.mediadoma.com\/pl\/uzywanie-homebrew-do-instalacji-wezla-aby-zainstalowac-gulp\/\" title=\"ten post\">ten post<\/a>, aby dowiedzie\u0107 si\u0119, jak to zrobi\u0107.<\/p>\n<h3>2 Napisz plik konfiguracyjny Gulp, cz\u0119\u015b\u0107 1<\/h3>\n<p>Aby zainicjowa\u0107 plik konfiguracyjny Gulp, wprowad\u017a <a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-00-gulpfile-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">nast\u0119puj\u0105ce polecenie<\/a> w katalogu g\u0142\u00f3wnym projektu w terminalu:<\/p>\n<p>Proste, prawda?<\/p>\n<p>Spowoduje to utworzenie pustego <strong>pliku gulpfile.js<\/strong> w katalogu g\u0142\u00f3wnym projektu. Nast\u0119pnie nadszed\u0142 czas na edycj\u0119 pliku.<\/p>\n<p>W tym po\u015bcie u\u017cyj\u0119 czterech pakiet\u00f3w, kt\u00f3re wcze\u015bniej opisa\u0142em:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u0142yk<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-sass\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">prze\u0142ykaj-sass<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-imagemin\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u0142yk-obraz<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-uglify\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">prze\u0142yka\u0107<\/a><\/li>\n<\/ul>\n<p>Ka\u017cde z nich to zadania odpowiedzialne za transpilacj\u0119 Sassa, optymalizacj\u0119 obraz\u00f3w i minifikacj\u0119 JavaScriptu.<\/p>\n<blockquote>\n<p>Zadania, kt\u00f3re chcesz uruchomi\u0107 z wiersza polece\u0144, nie powinny zawiera\u0107 spacji.<\/p>\n<\/blockquote>\n<p>Aby skonfigurowa\u0107 podstawowe <a href=\"https:\/\/github.com\/gulpjs\/gulp\/blob\/master\/docs\/API.md#gulptaskname--deps--fn\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">zadania<\/a>, aby mo\u017cna je by\u0142o uruchamia\u0107 z wiersza polece\u0144, musisz wykona\u0107 nast\u0119puj\u0105ce czynno\u015bci:<\/p>\n<h4><a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-01-gulp-task-sass-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Sass<\/a><\/h4>\n<pre><code>gulp.task('sass', function(){\n  return gulp.src('assets\/styles\/scss\/*.scss')\n    .pipe(sass())\n    .pipe(gulp.dest('assets\/styles\/css'))\n});<\/code><\/pre>\n<h4><a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-02-gulp-task-js-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">JavaScript<\/a><\/h4>\n<pre><code>gulp.task('js', function() {\n  return gulp.src('assets\/scripts\/dev\/*.js')\n    .pipe(uglify())\n    .pipe(gulp.dest('assets\/scripts'));\n});<\/code><\/pre>\n<h4><a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-03-gulp-task-images-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Obrazy<\/a><\/h4>\n<pre><code>gulp.task('images', function() {\n  return gulp.src('assets\/images\/*')\n    .pipe(imagemin())\n    .pipe(gulp.dest('assets\/images'))\n});<\/code><\/pre>\n<h4>Prowadzenie ich indywidualnie<\/h4>\n<p>Uruchamianie tych zada\u0144 indywidualnie wymaga wpisania nast\u0119puj\u0105cych informacji w konsoli za ka\u017cdym razem, gdy chcesz, powiedzmy, transpilowa\u0107 pliki Sass i zminimalizowa\u0107 pliki JavaScript:<\/p>\n<p>Ale to szybko si\u0119 starzeje. Co wi\u0119cej, jest mniej wydajny, zw\u0142aszcza gdy mo\u017cesz skonfigurowa\u0107 <a href=\"https:\/\/github.com\/gulpjs\/gulp\/blob\/master\/docs\/API.md#gulpwatchglob--opts-tasks-or-gulpwatchglob--opts-cb\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">zegarek<\/a>, aby automatycznie uruchamia\u0142 zadania za ka\u017cdym razem, gdy zapisujesz plik.<\/p>\n<h3>2 Napisz plik konfiguracyjny Gulp, cz\u0119\u015b\u0107 2<\/h3>\n<p>Konfiguracja <a href=\"https:\/\/github.com\/gulpjs\/gulp\/blob\/master\/docs\/API.md#gulpwatchglob--opts-tasks-or-gulpwatchglob--opts-cb\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">zegarka<\/a> to prawdopodobnie najlepsza rzecz, jak\u0105 mo\u017cesz zrobi\u0107, je\u015bli chodzi o oszcz\u0119dno\u015b\u0107 czasu dzi\u0119ki Gulp.<\/p>\n<blockquote>\n<p>Ogl\u0105daj pliki i r\u00f3b co\u015b, gdy plik si\u0119 zmieni. To zawsze zwraca EventEmitter, kt\u00f3ry emituje <code>change<\/code>\u00a0zdarzenia.<\/p>\n<\/blockquote>\n<p>Konfiguracja zegarka jest \u0142atwa. Przypomina zadanie (w rzeczywisto\u015bci wymaga zadania), ale ma te\u017c specjalne argumenty. Aby doda\u0107 zadanie ogl\u0105dania, kt\u00f3re b\u0119dzie obs\u0142ugiwa\u0107 Sass, JavaScript i obrazy, <a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-05-gulp-watch-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">skonfiguruj nast\u0119puj\u0105ce elementy<\/a> w pliku gulpfile.js:<\/p>\n<pre><code>gulp.task('watch', function() {\n    gulp.watch('assets\/styles\/scss\/*.scss', gulp.series('sass'));\n    gulp.watch('assets\/scripts\/dev\/*.js', gulp.series('js'));\n    gulp.watch('assets\/images\/*', gulp.series('images'));\n});<\/code><\/pre>\n<p>Nast\u0119pnie po prostu uruchom <a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-06-gulp-watch-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">zadanie<\/a> :<\/p>\n<p>St\u0105d, za ka\u017cdym razem, gdy zapiszesz plik Sass, plik JavaScript lub dokonasz zmiany w obrazie, zadanie zostanie uruchomione automatycznie, wykonuj\u0105c prac\u0119 zdefiniowanego zadania. Zauwa\u017c, \u017ce b\u0119dzie to dzia\u0142a\u0107 bez przerwy w swoim w\u0105tku, wi\u0119c b\u0119dziesz musia\u0142 otworzy\u0107 now\u0105 kart\u0119 lub okno terminala, je\u015bli potrzebujesz wykona\u0107 dodatkow\u0105 prac\u0119.<\/p>\n<h2>Uwaga o wersjach<\/h2>\n<p>We wcze\u015bniejszych wersjach Gulpa, drugi argument funkcji watch akceptowa\u0142 tablic\u0119; jednak najnowsza wersja wymaga rzeczywistej funkcji (kt\u00f3r\u0105 wida\u0107 powy\u017cej w tym, \u017ce zadeklarowa\u0142em <strong>series<\/strong> ).<\/p>\n<p>Kr\u00f3tko m\u00f3wi\u0105c, Gulp 4 pozwala na wykonywanie sekwencyjne, kt\u00f3re odbywa si\u0119 za pomoc\u0105 <strong>serii<\/strong>, i wykonywanie r\u00f3wnoleg\u0142e (kt\u00f3re mo\u017ce korzysta\u0107 z funkcji <strong>r\u00f3wnoleg\u0142ej<\/strong> ). S\u0105 one poza zakresem tego postu, poniewa\u017c ma to wy\u0142\u0105cznie pom\u00f3c Ci zacz\u0105\u0107.<\/p>\n<p>Po zako\u0144czeniu powiniene\u015b mie\u0107 znacznie wi\u0119cej automatyzacji w procesie kompilacji.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rozpocz\u0119cie pracy z pakietami startowymi Gulp jest kontynuacj\u0105 poprzedniego postu, kt\u00f3rego celem jest pomoc w automatyzacji typowych zada\u0144, z kt\u00f3rych korzystamy.<\/p>\n","protected":false},"author":1,"featured_media":165162,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[721,919,752,845,866],"tags":[1169],"class_list":["post-229442","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deweloper","category-inny","category-otwarte-zrodlo","category-samouczki","category-wordpress-7","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/229442","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=229442"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/229442\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/165162"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=229442"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=229442"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=229442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}