{"id":230355,"date":"2022-11-19T18:05:00","date_gmt":"2022-11-19T15:05:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230355"},"modified":"2022-11-19T18:05:56","modified_gmt":"2022-11-19T15:05:56","slug":"guida-introduttiva-ai-pacchetti-gulp-starter","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/guida-introduttiva-ai-pacchetti-gulp-starter\/","title":{"rendered":"Guida introduttiva ai pacchetti Gulp Starter"},"content":{"rendered":"\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/it\/qual-e-la-differenza-tra-codekit-e-composer\/\" title=\"Parlare di CodeKit\">Parlare di CodeKit<\/a> e dei vantaggi che offre agli sviluppatori front-end \u00e8 arrivato anche subito dopo un post e anche i vantaggi offerti da <a href=\"https:\/\/gulpjs.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">qualcosa come Gulp<\/a>.<\/p>\n<p>Un post sulla differenza tra i due, perch\u00e9 potresti volerne uno sull&#8217;altro e i vantaggi o gli svantaggi di entrambi possono essere il suo post.<\/p>\n<p>Ma per questo, vorrei prendere i <a href=\"https:\/\/wordpress.mediadoma.com\/it\/alcuni-pacchetti-gulp-per-i-principianti\/\" title=\"pacchetti iniziali\">pacchetti iniziali<\/a> di cui ho scritto riguardo a Gulp e fornire un semplice esempio di un file Gulp iniziale e come usarlo nei tuoi progetti WordPress.<\/p>\n<h2>Iniziare con Gulp<\/h2>\n<p>Innanzitutto, sono un fan di Homebrew, quindi quando si tratta di gestire pacchetti che non fanno parte del Mac App Store, lo uso. Ci\u00f2 semplifica notevolmente l&#8217;installazione dei pacchetti, l&#8217;aggiornamento e la disinstallazione.<\/p>\n<p>Se non hai letto <a href=\"https:\/\/wordpress.mediadoma.com\/it\/homebrew-node-e-gulp-per-lo-sviluppo-di-wordpress\/\" title=\"la mia guida su Homebrew\">la mia guida su Homebrew<\/a>, fallo poich\u00e9 il resto di questo post presume che tu l&#8217;abbia installato.<\/p>\n<h3>1 Installa Gulp<\/h3>\n<p>Se hai installato Homebrew, assicurati che tutto sia a posto e aggiornato, ho un&#8217;intera guida per configurare Gulp sul tuo computer locale.<\/p>\n<\/p>\n<p>Quindi, se non hai gi\u00e0 quella configurazione, dai un&#8217;occhiata a <a href=\"https:\/\/wordpress.mediadoma.com\/it\/utilizzo-di-homebrew-per-installare-il-nodo-per-installare-gulp\/\" title=\"questo post\">questo post<\/a> per come farlo.<\/p>\n<h3>2 Scrivi il tuo file di configurazione di Gulp, parte 1<\/h3>\n<p>Per inizializzare un file di configurazione di Gulp, inserisci <a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-00-gulpfile-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">il seguente comando<\/a> nella directory principale del tuo progetto nel tuo terminale:<\/p>\n<p>Facile, non \u00e8 vero?<\/p>\n<p>Questo creer\u00e0 un <strong>gulpfile.js<\/strong> vuoto nella directory principale del tuo progetto. Successivamente, \u00e8 il momento di modificare il file.<\/p>\n<p>Per questo post, utilizzer\u00f2 quattro pacchetti che ho descritto in precedenza:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sorso<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-sass\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">gulp-sass<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-imagemin\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">gulp-immagine<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-uglify\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">gulp-brutto<\/a><\/li>\n<\/ul>\n<p>Ognuna di queste \u00e8 attivit\u00e0 responsabile del transpiling di Sass, dell&#8217;ottimizzazione delle immagini e della minimizzazione di JavaScript.<\/p>\n<blockquote>\n<p>Le attivit\u00e0 che si desidera eseguire dalla riga di comando non devono contenere spazi.<\/p>\n<\/blockquote>\n<p>Per impostare le <a href=\"https:\/\/github.com\/gulpjs\/gulp\/blob\/master\/docs\/API.md#gulptaskname--deps--fn\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">attivit\u00e0<\/a> di base in modo da poterle eseguire dalla riga di comando, dovrai effettuare le seguenti operazioni:<\/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\">immagini<\/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>Eseguirli individualmente<\/h4>\n<p>L&#8217;esecuzione di queste attivit\u00e0 individualmente richiede di digitare quanto segue nella console ogni volta che si desidera, ad esempio, transpilare i file Sass e ridurre al minimo i file JavaScript:<\/p>\n<p>Ma questo invecchia velocemente. Inoltre, \u00e8 meno efficiente soprattutto quando puoi configurare un <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\">orologio<\/a> per eseguire automaticamente le tue attivit\u00e0 ogni volta che salvi un file.<\/p>\n<h3>2 Scrivi il tuo file di configurazione di Gulp, parte 2<\/h3>\n<p>Configurare un <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\">orologio<\/a> \u00e8 probabilmente la cosa migliore che puoi fare quando si tratta di risparmiare tempo con Gulp.<\/p>\n<blockquote>\n<p>Guarda i file e fai qualcosa quando un file cambia. Questo restituisce sempre un EventEmitter che emette <code>change<\/code>\u00a0eventi.<\/p>\n<\/blockquote>\n<p>Impostare un orologio \u00e8 facile. \u00c8 molto simile a un&#8217;attivit\u00e0 (in effetti, richiede un&#8217;attivit\u00e0), ma ha anche argomenti speciali. Per aggiungere un&#8217;attivit\u00e0 di controllo che gestir\u00e0 Sass, JavaScript e immagini, <a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-05-gulp-watch-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">imposta quanto segue<\/a> nel tuo 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>Quindi esegui semplicemente <a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-06-gulp-watch-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">l&#8217;attivit\u00e0<\/a> :<\/p>\n<p>Da qui, ogni volta che salvi un file Sass, un file JavaScript o apporti una modifica a un&#8217;immagine, l&#8217;attivit\u00e0 si avvier\u00e0 automaticamente eseguendo il lavoro dell&#8217;attivit\u00e0 definita. Nota che questo verr\u00e0 eseguito perennemente nel suo thread, quindi dovrai aprire una nuova scheda o finestra del terminale se hai bisogno di fare qualsiasi lavoro aggiuntivo.<\/p>\n<h2>Una nota sulle versioni<\/h2>\n<p>Nelle versioni precedenti di Gulp, il secondo argomento per la funzione watch accetterebbe un array; tuttavia, l&#8217;ultima versione richiede una funzione effettiva (che puoi vedere sopra in quanto ho dichiarato <strong>series<\/strong> ).<\/p>\n<p>Il fatto \u00e8 che Gulp 4 consente l&#8217;esecuzione sequenziale, che viene eseguita tramite <strong>series<\/strong>, e l&#8217;esecuzione parallela (che pu\u00f2 utilizzare la funzione <strong>parallela<\/strong> ). Quelli esulano dallo scopo di questo post in quanto questo \u00e8 puramente pensato per aiutarti a iniziare.<\/p>\n<p>Una volta terminato, dovresti avere molta pi\u00f9 automazione nel tuo processo di creazione.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte di registrazione:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Iniziare con i pacchetti di avvio di Gulp \u00e8 il seguito di un post precedente che mira ad automatizzare le attivit\u00e0 comuni che utilizziamo.<\/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":[918,751,720,844,865],"tags":[1168,1168],"class_list":["post-230355","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-altro","category-open-source-projektmanagement-3","category-sviluppatore","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/230355","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=230355"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/230355\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/165162"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=230355"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=230355"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=230355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}