{"id":229197,"date":"2022-11-15T13:33:00","date_gmt":"2022-11-15T10:33:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229197"},"modified":"2022-11-09T05:55:31","modified_gmt":"2022-11-09T02:55:31","slug":"naagra-gulp-paket-foer-nyboerjare","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/naagra-gulp-paket-foer-nyboerjare\/","title":{"rendered":"N\u00e5gra Gulp-paket f\u00f6r nyb\u00f6rjare"},"content":{"rendered":"\n

Programvara som Gulp<\/a> och andra verktyg \u00e4r inte nya. F\u00f6r den som inte har anv\u00e4nt dem tidigare kan det vara lite jobbigt att komma ig\u00e5ng (men det borde det verkligen inte vara).<\/p>\n

I j\u00e4mf\u00f6relse med verktyg som CodeKit<\/a> (som jag fortfarande gillar och rekommenderar<\/a>, beroende p\u00e5 projektet), har de lite mer omkostnader n\u00e4r det g\u00e4ller att f\u00e5 dem konfigurerade, konfigurerade och redo att g\u00e5.<\/p>\n

Men n\u00e4r du v\u00e4l har st\u00e4llt in allt, kan det vara riktigt anv\u00e4ndbart med ett distribuerat team oavsett operativsystem, och det kan hj\u00e4lpa det att g\u00f6ra din byggprocess lite mer robust.<\/p>\n

Det \u00e4r dock inte syftet med inl\u00e4gget. H\u00e4r \u00e4r ist\u00e4llet en lista med n\u00e5gra paket till att b\u00f6rja med.<\/p>\n

T\u00e4nk p\u00e5 dem s\u00e5 h\u00e4r: Om du letar efter s\u00e4tt att arbeta med Sass<\/a>, JavaScript och bildoptimering \u00e4r dessa bra bibliotek.<\/p>\n

Gulp-paket f\u00f6r nyb\u00f6rjare<\/h2>\n

Innan jag hoppar in i vart och ett av f\u00f6ljande paket vill jag notera att det \u00e4r viktigt att l\u00e4sa var och en av de l\u00e4nkade sidorna. Dokumentationen hj\u00e4lper till att g\u00e5 igenom alternativ som biblioteken erbjuder som koden jag har tillhandah\u00e5llit inte visas.<\/p>\n

Det vill s\u00e4ga, kopiera och klistra inte bara in det jag har tillhandah\u00e5llit. Anv\u00e4nd det som utg\u00e5ngspunkt, men l\u00e4s ocks\u00e5 igenom dokumentationen. Du kanske inte hittar n\u00e5got nytt.<\/p>\n

\u00c5terigen kan du uppt\u00e4cka att det finns alternativ f\u00f6r att justera just ditt projekt.<\/p>\n

1 Sass<\/h3>\n

Du kan v\u00e4lja att arbeta med Less<\/a> (jag \u00e4r varken h\u00e4r eller d\u00e4r, egentligen) men jag tenderar att favorisera Sass. S\u00e5ledes anv\u00e4nder jag ett bibliotek, gulp-sass<\/a>, specifikt f\u00f6r att kompilera Sass-filer till CSS.<\/p>\n

\"N\u00e5gra<\/a><\/p>\n

Jag har normalt en tillg\u00e5ngskatalog<\/strong> och i den katalogen finns n\u00e5gra underkataloger f\u00f6r bilder<\/strong>, stilar<\/strong> och skript<\/strong>.<\/p>\n

Inom stilkatalogen<\/strong> har jag tv\u00e5 underkataloger:<\/p>\n

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

    Jag beh\u00e5ller alla mina SCSS-filer i respektive katalog, och sedan anv\u00e4nder jag gulp-sass f\u00f6r att mata ut de kompilerade filerna till 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
    D\u00e4rifr\u00e5n st\u00e4ller jag CSS-filerna i k\u00f6 med den n\u00f6dv\u00e4ndiga WordPress API-funktionen<\/a>.<\/p>\n
    2 JavaScript-minifiering<\/h3>\n
    Vid det h\u00e4r laget har f\u00f6rdelarna med att f\u00f6rminska JavaScript-filer bevisats om och om igen, s\u00e5 jag t\u00e4nker inte utarbeta po\u00e4ngen ytterligare.<\/p>\n
    Det finns n\u00e5gra paket som jag har provat n\u00e4r det g\u00e4ller att arbeta med JavaScript-minifiering och gulp-uglify<\/a> \u00e4r det som jag tycker jag tycker mest om att anv\u00e4nda.<\/p>\n
    \"N\u00e5gra<\/a><\/p>\n
    Kom ih\u00e5g fr\u00e5n f\u00f6reg\u00e5ende avsnitt att jag har min tillg\u00e5ngskatalog<\/strong> och i den har jag min\u00a0 underkatalog f\u00f6r skript<\/strong>. Den katalogen inneh\u00e5ller en egen underkatalog: dev.<\/strong><\/p>\n
    Jag tar JavaScript-filerna som finns i dev<\/strong> och matar ut dem<\/a> i roten av skriptkatalogen<\/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
    D\u00e4rifr\u00e5n, som jag g\u00f6r ovan, st\u00e4ller jag dem i k\u00f6 med samma WordPress API-funktion<\/a>.<\/p>\n
    3 Bildoptimering<\/h3>\n
    Slutligen, en sak som kan r\u00e4cka l\u00e5ngt f\u00f6r att se till att dina sidor laddas snabbt \u00e4r att se till att dina bildtillg\u00e5ngar \u00e4r optimerade.<\/p>\n
    Visst, det finns n\u00e5gra verktyg du kan anv\u00e4nda manuellt f\u00f6r att g\u00f6ra detta, men om du ofta l\u00e4gger till, \u00e4ndrar eller modifierar bildtillg\u00e5ngar och du vill automatisera byggprocessen f\u00f6r optimering, rekommenderar jag att du anv\u00e4nder gulp-imagemin<\/a>.<\/p>\n
    [bild]<\/p>\n
    Det finns vissa beroenden f\u00f6r just det h\u00e4r biblioteket s\u00e5 du m\u00e5ste se till att de ocks\u00e5 ing\u00e5r. Dessa inkluderar<\/p>\n