{"id":230171,"date":"2022-11-19T18:50:00","date_gmt":"2022-11-19T15:50:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230171"},"modified":"2022-11-19T19:04:41","modified_gmt":"2022-11-19T16:04:41","slug":"gulpin-aloituspakettien-kaeytoen-aloittaminen","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/gulpin-aloituspakettien-kaeytoen-aloittaminen\/","title":{"rendered":"Gulpin aloituspakettien k\u00e4yt\u00f6n aloittaminen"},"content":{"rendered":"\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/fi\/mitae-eroa-codekitillae-ja-composerilla-on\/\" title=\"Puhuminen CodeKitist\u00e4\">Puhuminen CodeKitist\u00e4<\/a> ja sen etup\u00e4\u00e4n kehitt\u00e4jille tarjoamista eduista on my\u00f6s tullut heti postauksen j\u00e4lkeen ja my\u00f6s Gulpin <a href=\"https:\/\/gulpjs.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kaltaisista<\/a> eduista .<\/p>\n<p>Viesti n\u00e4iden kahden v\u00e4lisest\u00e4 erosta, miksi saatat haluta toista toiseen ja kumman tahansa eduista tai haitoista voi olla sen viesti.<\/p>\n<p>Mutta t\u00e4t\u00e4 varten haluaisin ottaa <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/muutama-ruokapaketti-aloittelijoille\/\" title=\"aloituspaketit\">aloituspaketit<\/a>, joista kirjoitin Gulpiin liittyen, ja antaa yksinkertaisen esimerkin Gulp-aloitustiedostosta ja sen k\u00e4ytt\u00e4misest\u00e4 WordPress-projekteissasi.<\/p>\n<h2>Gulpin k\u00e4yt\u00f6n aloittaminen<\/h2>\n<p>Ensinn\u00e4kin olen Homebrew-fani, joten k\u00e4yt\u00e4n sit\u00e4 pakettien hallinnassa, jotka eiv\u00e4t kuulu Mac App Storeen. T\u00e4m\u00e4 tekee pakettien asentamisesta, p\u00e4ivitt\u00e4misest\u00e4 ja asennuksen poistamisesta paljon helpompaa.<\/p>\n<p>Jos et ole lukenut <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/homebrew-node-ja-gulp-wordpressin-kehittaemiseen\/\" title=\"Homebrew-oppaani\">Homebrew-oppaani<\/a>, tee se, koska t\u00e4m\u00e4n viestin loppuosassa oletetaan, ett\u00e4 olet asentanut sen.<\/p>\n<h3>1 Asenna Gulp<\/h3>\n<p>Jos sinulla on Homebrew asennettuna, varmista, ett\u00e4 kaikki n\u00e4ytt\u00e4\u00e4 hyv\u00e4lt\u00e4 ja on ajan tasalla. Minulla on koko opas Gulpin m\u00e4\u00e4ritt\u00e4miseen paikalliselle koneellesi.<\/p>\n<\/p>\n<p>Joten jos sinulla ei viel\u00e4 ole t\u00e4t\u00e4 asetusta, katso <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/homebrewn-kaeyttaeminen-noden-asentamiseen-gulpin-asentaminen\/\" title=\"t\u00e4st\u00e4 viestist\u00e4\">t\u00e4st\u00e4 viestist\u00e4<\/a>, kuinka se tehd\u00e4\u00e4n.<\/p>\n<h3>2 Kirjoita Gulpin m\u00e4\u00e4ritystiedosto, osa 1<\/h3>\n<p>Jos haluat alustaa Gulp-m\u00e4\u00e4ritystiedoston, kirjoita <a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-00-gulpfile-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">seuraava komento<\/a> p\u00e4\u00e4telaitteen projektisi juurihakemistoon:<\/p>\n<p>Helppoa, eik\u00f6?<\/p>\n<p>T\u00e4m\u00e4 luo tyhj\u00e4n <strong>gulpfile.js<\/strong> -tiedoston projektisi juurihakemistoon. Seuraavaksi on aika muokata tiedostoa.<\/p>\n<p>T\u00e4ss\u00e4 viestiss\u00e4 aion k\u00e4ytt\u00e4\u00e4 nelj\u00e4\u00e4 pakettia, jotka olen aiemmin hahmotellut:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kulaus<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-sass\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ahmi-sass<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-imagemin\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ahmi-kuva<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-uglify\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">nielaista-ilke\u00e4<\/a><\/li>\n<\/ul>\n<p>Jokainen n\u00e4ist\u00e4 on teht\u00e4vi\u00e4, jotka vastaavat Sassin siirt\u00e4misest\u00e4, kuvien optimoinnista ja JavaScriptin v\u00e4hent\u00e4misest\u00e4.<\/p>\n<blockquote>\n<p>Teht\u00e4viss\u00e4, jotka haluat suorittaa komentorivilt\u00e4, \u200b\u200bei saa sis\u00e4lt\u00e4\u00e4 v\u00e4lily\u00f6ntej\u00e4.<\/p>\n<\/blockquote>\n<p>Jos haluat m\u00e4\u00e4ritt\u00e4\u00e4 <a href=\"https:\/\/github.com\/gulpjs\/gulp\/blob\/master\/docs\/API.md#gulptaskname--deps--fn\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">perusteht\u00e4v\u00e4t<\/a>, jotta voit suorittaa ne komentorivilt\u00e4, \u200b\u200bsinun on teht\u00e4v\u00e4 seuraava:<\/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\">Kuvat<\/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>Juoksemalla niit\u00e4 erikseen<\/h4>\n<p>N\u00e4iden teht\u00e4vien suorittaminen yksitellen edellytt\u00e4\u00e4, ett\u00e4 kirjoitat seuraavat konsoliin aina, kun haluat esimerkiksi siirt\u00e4\u00e4 Sass-tiedostoja ja pienent\u00e4\u00e4 JavaScript-tiedostoja:<\/p>\n<p>Mutta t\u00e4m\u00e4 vanhenee nopeasti. Lis\u00e4ksi se on v\u00e4hemm\u00e4n tehokas varsinkin, kun voit asettaa <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\">kellon<\/a> suorittamaan teht\u00e4v\u00e4si automaattisesti aina, kun tallennat tiedoston.<\/p>\n<h3>2 Kirjoita Gulpin m\u00e4\u00e4ritystiedosto, osa 2<\/h3>\n<p>Kellon <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\">asentaminen<\/a> on luultavasti paras asia, jonka voit tehd\u00e4, kun haluat s\u00e4\u00e4st\u00e4\u00e4 aikaa Gulpin avulla.<\/p>\n<blockquote>\n<p>Katso tiedostoja ja tee jotain, kun tiedosto muuttuu. T\u00e4m\u00e4 palauttaa aina EventEmitterin, joka l\u00e4hett\u00e4\u00e4 <code>change<\/code>\u00a0tapahtumia.<\/p>\n<\/blockquote>\n<p>Kellon asentaminen on helppoa. Se on paljon kuin teht\u00e4v\u00e4 (itse asiassa se vaatii teht\u00e4v\u00e4n), mutta sill\u00e4 on my\u00f6s erityisi\u00e4 argumentteja. Jos haluat lis\u00e4t\u00e4 katseluteht\u00e4v\u00e4n, joka k\u00e4sittelee Sassia, JavaScripti\u00e4 ja kuvia, <a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-05-gulp-watch-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">m\u00e4\u00e4rit\u00e4 seuraavat<\/a> asetukset gulpfile.js-tiedostossa:<\/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>Suorita <a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-06-gulp-watch-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sitten teht\u00e4v\u00e4<\/a> :<\/p>\n<p>T\u00e4st\u00e4 eteenp\u00e4in aina, kun tallennat Sass-tiedoston, JavaScript-tiedoston tai teet muutoksia kuvaan, teht\u00e4v\u00e4 k\u00e4ynnistyy automaattisesti suorittamalla m\u00e4\u00e4ritetyn teht\u00e4v\u00e4n ty\u00f6n. Huomaa, ett\u00e4 t\u00e4m\u00e4 toimii jatkuvasti sen s\u00e4ikeess\u00e4, joten sinun on avattava uusi p\u00e4\u00e4tev\u00e4lilehti tai -ikkuna, jos sinun on teht\u00e4v\u00e4 lis\u00e4t\u00f6it\u00e4.<\/p>\n<h2>Huomautus versioista<\/h2>\n<p>Gulpin aiemmissa versioissa toinen argumentti kellotoiminnolle hyv\u00e4ksyisi taulukon; uusin versio vaatii kuitenkin varsinaisen funktion (jonka n\u00e4et yll\u00e4, kun olen ilmoittanut <strong>sarjaksi<\/strong> ).<\/p>\n<p>Lyhyesti sanottuna Gulp 4 mahdollistaa per\u00e4kk\u00e4isen suorituksen, joka suoritetaan <strong>sarjan<\/strong> kautta, ja rinnakkaissuorituksen (jossa voidaan k\u00e4ytt\u00e4\u00e4 <strong>rinnakkaistoimintoa<\/strong> ). Ne eiv\u00e4t kuulu t\u00e4m\u00e4n viestin soveltamisalaan, koska t\u00e4m\u00e4 on puhtaasti tarkoitettu auttamaan p\u00e4\u00e4sem\u00e4\u00e4n alkuun.<\/p>\n<p>Kun olet valmis, rakennusprosessissasi pit\u00e4isi olla paljon enemm\u00e4n automaatiota.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gulpin aloituspakettien k\u00e4yt\u00f6n aloittaminen on jatkoa edelliselle viestille, jonka tarkoituksena on auttaa automatisoimaan k\u00e4ytt\u00e4mi\u00e4mme yleisi\u00e4 teht\u00e4vi\u00e4.<\/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":[750,719,917,843,864],"tags":[1166],"class_list":["post-230171","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-avoin-laehdekoodi","category-kehittaejae","category-muut","category-opetusohjelmia","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/230171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=230171"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/230171\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/165162"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=230171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=230171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=230171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}