{"id":230210,"date":"2022-11-15T13:01:00","date_gmt":"2022-11-15T10:01:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230210"},"modified":"2022-11-09T20:36:27","modified_gmt":"2022-11-09T17:36:27","slug":"alcuni-pacchetti-gulp-per-i-principianti","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/alcuni-pacchetti-gulp-per-i-principianti\/","title":{"rendered":"Alcuni pacchetti Gulp per i principianti"},"content":{"rendered":"\n

Software come Gulp<\/a> e altri programmi di utilit\u00e0 non sono nuovi. Per coloro che non li hanno mai usati prima, pu\u00f2 essere un po’ scoraggiante iniziare (ma in realt\u00e0 non dovrebbe esserlo).<\/p>\n

Rispetto a strumenti come CodeKit<\/a> (che mi piace e consiglio ancora<\/a>, a seconda del progetto), hanno un po’ pi\u00f9 di sovraccarico per quanto riguarda la loro configurazione, configurazione e pronta per l’uso.<\/p>\n

Ma una volta che hai impostato tutto, pu\u00f2 essere davvero utile con un team distribuito indipendentemente dal sistema operativo e pu\u00f2 aiutarti a rendere il tuo processo di creazione un po’ pi\u00f9 robusto.<\/p>\n

Questo non \u00e8 lo scopo del post, per\u00f2. Invece, ecco un elenco di alcuni pacchetti per i principianti.<\/p>\n

Pensali in questo modo: se stai cercando modi per lavorare con Sass<\/a>, JavaScript e l’ottimizzazione delle immagini, queste sono buone librerie.<\/p>\n

Pacchetti Gulp per i principianti<\/h2>\n

Prima di saltare in ciascuno dei seguenti pacchetti, voglio notare che \u00e8 importante leggere ciascuna delle pagine collegate. La documentazione aiuta a esaminare le opzioni offerte dalle librerie che il codice che ho fornito non mostra.<\/p>\n

Cio\u00e8, non copiare e incollare semplicemente ci\u00f2 che ho fornito. Usalo come punto di partenza, ma leggi anche la documentazione. Potresti non trovare nulla di nuovo.<\/p>\n

Poi di nuovo, potresti scoprire che ci sono opzioni per modificare il tuo progetto particolare.<\/p>\n

1 Sass<\/h3>\n

Potresti scegliere di lavorare con Less<\/a> (non sono n\u00e9 qui n\u00e9 l\u00ec, in realt\u00e0) ma tendo a favorire Sass. Pertanto, utilizzo una libreria, gulp-sass<\/a>, specificatamente per compilare file Sass in CSS.<\/p>\n

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

Normalmente ho una\u00a0 directory asset<\/strong> e all’interno di quella directory ci sono alcune sottodirectory per immagini<\/strong>, stili<\/strong> e script<\/strong>.<\/p>\n

All’interno della directory degli stili<\/strong>, ho due sottodirectory:<\/p>\n

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

    Conservo tutti i miei file SCSS nella rispettiva directory, quindi utilizzo gulp-sass per generare i file compilati in 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
    Da l\u00ec, accodano i file CSS utilizzando la funzione API di WordPress necessaria<\/a>.<\/p>\n
    2 Minimizzazione JavaScript<\/h3>\n
    A questo punto, i vantaggi della minimizzazione dei file JavaScript sono stati dimostrati pi\u00f9 e pi\u00f9 volte, quindi non ho intenzione di approfondire ulteriormente il punto.<\/p>\n
    Ci sono alcuni pacchetti che ho provato per quanto riguarda il lavoro con la minimizzazione di JavaScript e gulp-uglify<\/a> \u00e8 quello che trovo che mi diverta di pi\u00f9 a usare.<\/p>\n
    \"Alcuni<\/a><\/p>\n
    Ricordiamo dalla sezione precedente che ho la mia\u00a0 directory delle risorse<\/strong> e al suo interno ho la mia sottodirectory degli script .<\/strong> Quella directory contiene una singola sottodirectory: dev.<\/strong><\/p>\n
    Prendo i file JavaScript che si trovano in dev<\/strong> e li<\/a> emetto nella radice della directory degli script<\/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
    Da l\u00ec, come ho fatto sopra, li accodano usando la stessa funzione API di WordPress<\/a>.<\/p>\n
    3 Ottimizzazione dell’immagine<\/h3>\n
    Infine, una cosa che pu\u00f2 fare molto per assicurarsi che le tue pagine vengano caricate rapidamente \u00e8 assicurarsi che le tue risorse di immagine siano ottimizzate.<\/p>\n
    Certo, ci sono alcuni strumenti che puoi utilizzare manualmente per farlo, ma se ti ritrovi ad aggiungere, modificare o modificare frequentemente asset di immagini e desideri automatizzare il processo di ottimizzazione di compilazione, ti consiglio di utilizzare gulp-imagemin<\/a>.<\/p>\n
    [Immagine]<\/p>\n
    Ci sono alcune dipendenze per questa particolare libreria, quindi dovrai assicurarti che siano incluse anche loro. Questi includono<\/p>\n