Alcuni pacchetti Gulp per i principianti

Software come Gulp e altri programmi di utilità non sono nuovi. Per coloro che non li hanno mai usati prima, può essere un po’ scoraggiante iniziare (ma in realtà non dovrebbe esserlo).

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

Ma una volta che hai impostato tutto, può essere davvero utile con un team distribuito indipendentemente dal sistema operativo e può aiutarti a rendere il tuo processo di creazione un po’ più robusto.

Questo non è lo scopo del post, però. Invece, ecco un elenco di alcuni pacchetti per i principianti.

Pensali in questo modo: se stai cercando modi per lavorare con Sass, JavaScript e l’ottimizzazione delle immagini, queste sono buone librerie.

Pacchetti Gulp per i principianti

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

Cioè, non copiare e incollare semplicemente ciò che ho fornito. Usalo come punto di partenza, ma leggi anche la documentazione. Potresti non trovare nulla di nuovo.

Poi di nuovo, potresti scoprire che ci sono opzioni per modificare il tuo progetto particolare.

1 Sass

Potresti scegliere di lavorare con Less (non sono né qui né lì, in realtà) ma tendo a favorire Sass. Pertanto, utilizzo una libreria, gulp-sass, specificatamente per compilare file Sass in CSS.

Normalmente ho una  directory asset e all’interno di quella directory ci sono alcune sottodirectory per immagini, stili e script.

All’interno della directory degli stili, ho due sottodirectory:

1. scs
2. css

Conservo tutti i miei file SCSS nella rispettiva directory, quindi utilizzo gulp-sass per generare i file compilati in CSS.

gulp.task('sass', function(){
  return gulp.src('assets/styles/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('assets/styles/css'))
});

Da lì, accodano i file CSS utilizzando la funzione API di WordPress necessaria.

2 Minimizzazione JavaScript

A questo punto, i vantaggi della minimizzazione dei file JavaScript sono stati dimostrati più e più volte, quindi non ho intenzione di approfondire ulteriormente il punto.

Ci sono alcuni pacchetti che ho provato per quanto riguarda il lavoro con la minimizzazione di JavaScript e gulp-uglify è quello che trovo che mi diverta di più a usare.

Ricordiamo dalla sezione precedente che ho la mia  directory delle risorse e al suo interno ho la mia sottodirectory degli script . Quella directory contiene una singola sottodirectory: dev.

Prendo i file JavaScript che si trovano in dev e li emetto nella radice della directory degli script.

gulp.task('minify-js', function() {
  return gulp.src('assets/scripts/dev/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('assets/scripts'));
});

Da lì, come ho fatto sopra, li accodano usando la stessa funzione API di WordPress.

3 Ottimizzazione dell’immagine

Infine, una cosa che può fare molto per assicurarsi che le tue pagine vengano caricate rapidamente è assicurarsi che le tue risorse di immagine siano ottimizzate.

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.

[Immagine]

Ci sono alcune dipendenze per questa particolare libreria, quindi dovrai assicurarti che siano incluse anche loro. Questi includono

• picturein-gifsicle,
• imagein-jpegtran,
• ottimizzazione dell’immagine,
• imagein-svgo.

Questi possono essere aggiunti manualmente ai file di configurazione, installati tramite la riga di comando o in altro modo. In ogni caso, assicurati di averli prima di provare a ottimizzare le tue immagini.

gulp.task('image-optimization', function() {
    return gulp.src('assets/images/*')
      .pipe(imagemin())
      .pipe(gulp.dest('assets/images'))
  }
);

Nota dal codice sopra (e da quello che ho menzionato prima) che la mia  directory delle immagini si trova nelle risorse, quindi quando eseguo l’attività come menzionato sopra, ottimizzerà qualsiasi tipo di immagine supportato in quella posizione.

File di pacchetto, file Gulp e tutto il resto?

Se non conosci Gulp, Node o altri sistemi di build, c’è un po’ di più da coprire per quanto riguarda l’installazione di Node e Gulp e la loro configurazione.

Ho scelto di saltare questo per ora poiché c’è molta documentazione in giro su questo, ma forse darò un’occhiata a ciò che usiamo ogni volta che lo incorporiamo nei nostri progetti.