{"id":229304,"date":"2022-11-15T13:33:00","date_gmt":"2022-11-15T10:33:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229304"},"modified":"2022-11-09T06:23:56","modified_gmt":"2022-11-09T03:23:56","slug":"pakiety-kilku-lykow-na-poczatek","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/pakiety-kilku-lykow-na-poczatek\/","title":{"rendered":"Pakiety kilku \u0142yk\u00f3w na pocz\u0105tek"},"content":{"rendered":"\n

Oprogramowanie takie jak Gulp<\/a> i inne narz\u0119dzia nie s\u0105 nowe. Dla tych, kt\u00f3rzy nie u\u017cywali ich wcze\u015bniej, rozpocz\u0119cie pracy mo\u017ce by\u0107 troch\u0119 trudne (ale tak naprawd\u0119 nie powinno by\u0107).<\/p>\n

W por\u00f3wnaniu z narz\u0119dziami takimi jak CodeKit<\/a> (kt\u00f3re nadal lubi\u0119 i polecam<\/a>, w zale\u017cno\u015bci od projektu), maj\u0105 one troch\u0119 wi\u0119cej narzutu na ich konfiguracj\u0119, konfiguracj\u0119 i gotowo\u015b\u0107 do pracy.<\/p>\n

Ale kiedy ju\u017c to wszystko skonfigurujesz, mo\u017ce to by\u0107 naprawd\u0119 przydatne w rozproszonym zespole, niezale\u017cnie od systemu operacyjnego, i mo\u017ce pom\u00f3c w ulepszeniu procesu kompilacji.<\/p>\n

Nie taki jest jednak cel postu. Zamiast tego, oto lista kilku pakiet\u00f3w na pocz\u0105tek.<\/p>\n

Pomy\u015bl o nich w ten spos\u00f3b: je\u015bli szukasz sposob\u00f3w na prac\u0119 z Sass<\/a>, JavaScript i optymalizacj\u0105 obraz\u00f3w, to s\u0105 dobre biblioteki.<\/p>\n

Pakiety \u0142yk\u00f3w na pocz\u0105tek<\/h2>\n

Zanim przejdziemy do ka\u017cdego z poni\u017cszych pakiet\u00f3w, chc\u0119 zauwa\u017cy\u0107, \u017ce wa\u017cne jest, aby przeczyta\u0107 ka\u017cd\u0105 z linkowanych stron. Dokumentacja pomaga przej\u015b\u0107 przez opcje oferowane przez biblioteki, kt\u00f3rych nie pokazuje podany przeze mnie kod.<\/p>\n

Oznacza to, \u017ce nie nale\u017cy po prostu kopiowa\u0107 i wkleja\u0107 tego, co poda\u0142em. U\u017cyj go jako punktu wyj\u015bcia, ale przeczytaj r\u00f3wnie\u017c dokumentacj\u0119. Mo\u017cesz nie znale\u017a\u0107 nic nowego.<\/p>\n

Z drugiej strony mo\u017ce si\u0119 okaza\u0107, \u017ce istniej\u0105 opcje dostosowywania konkretnego projektu.<\/p>\n

1 Sass<\/h3>\n

Mo\u017cesz zdecydowa\u0107 si\u0119 na wsp\u00f3\u0142prac\u0119 z Less<\/a> (tak naprawd\u0119 nie jestem ani tu, ani tam), ale mam tendencj\u0119 do faworyzowania Sassa. Dlatego u\u017cywam biblioteki gulp-sass<\/a>, specjalnie do kompilowania plik\u00f3w Sass do CSS.<\/p>\n

\"Pakiety<\/a><\/p>\n

Zwykle mam\u00a0 katalog asset<\/strong>, aw tym katalogu znajduj\u0105 si\u0119 podkatalogi dla obraz\u00f3w<\/strong>, styl\u00f3w<\/strong> i skrypt\u00f3w<\/strong>.<\/p>\n

W\u00a0 katalogu styles<\/strong> mam dwa podkatalogi:<\/p>\n

    \n
  1. scss<\/strong><\/li>\n
  2. css<\/strong><\/li>\n<\/ol>\n

    Trzymam wszystkie moje pliki SCSS w odpowiednim katalogu, a nast\u0119pnie u\u017cywam gulp-sass do wyprowadzania skompilowanych plik\u00f3w do CSS<\/a>.<\/p>\n

    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
    Stamt\u0105d kolejkuj\u0119 pliki CSS za pomoc\u0105 niezb\u0119dnej funkcji WordPress API<\/a>.<\/p>\n
    2 Minimalizacja JavaScript<\/h3>\n
    W tym momencie korzy\u015bci z minifikacji plik\u00f3w JavaScript zosta\u0142y udowodnione raz za razem, wi\u0119c nie zamierzam dalej omawia\u0107 tej kwestii.<\/p>\n
    Jest kilka pakiet\u00f3w, kt\u00f3re wypr\u00f3bowa\u0142em, poniewa\u017c dotycz\u0105 one pracy z minifikacj\u0105 JavaScript, a gulp-uglify<\/a> jest tym, kt\u00f3rego u\u017cywam najbardziej.<\/p>\n
    \"Pakiety<\/a><\/p>\n
    Przypomnij sobie z poprzedniej sekcji, \u017ce mam sw\u00f3j katalog asset\u00f3w, a w nim podkatalog<\/strong> skrypt\u00f3w.<\/strong> Ten katalog zawiera jeden w\u0142asny podkatalog: dev.<\/strong><\/p>\n
    Bior\u0119 pliki JavaScript znajduj\u0105ce si\u0119 w dev<\/strong> i wyprowadzam je<\/a> do katalogu g\u0142\u00f3wnego\u00a0 katalogu scripts<\/strong>.<\/p>\n
    gulp.task('minify-js', function() {\n  return gulp.src('assets\/scripts\/dev\/*.js')\n    .pipe(uglify())\n    .pipe(gulp.dest('assets\/scripts'));\n});<\/code><\/pre>\n
    Stamt\u0105d, tak jak powy\u017cej, kolejkuj\u0119 je za pomoc\u0105 tej samej funkcji API WordPress<\/a>.<\/p>\n
    3 Optymalizacja obrazu<\/h3>\n
    Wreszcie, jedna rzecz, kt\u00f3ra mo\u017ce pom\u00f3c w szybkim wczytaniu stron, to zapewnienie optymalizacji zasob\u00f3w graficznych.<\/p>\n
    Oczywi\u015bcie, istnieje kilka narz\u0119dzi, kt\u00f3rych mo\u017cesz u\u017cy\u0107 r\u0119cznie, aby to zrobi\u0107, ale je\u015bli cz\u0119sto dodajesz, zmieniasz lub modyfikujesz zasoby graficzne i chcesz zautomatyzowa\u0107 proces kompilacji optymalizacji, polecam u\u017cycie gulp-imagemin<\/a>.<\/p>\n
    [obraz]<\/p>\n
    Istnieje kilka zale\u017cno\u015bci dla tej konkretnej biblioteki, wi\u0119c musisz si\u0119 upewni\u0107, \u017ce s\u0105 one r\u00f3wnie\u017c uwzgl\u0119dnione. Obejmuj\u0105 one<\/p>\n