Guida introduttiva ai pacchetti Gulp Starter

Parlare di CodeKit e dei vantaggi che offre agli sviluppatori front-end è arrivato anche subito dopo un post e anche i vantaggi offerti da qualcosa come Gulp.

Un post sulla differenza tra i due, perché potresti volerne uno sull’altro e i vantaggi o gli svantaggi di entrambi possono essere il suo post.

Ma per questo, vorrei prendere i pacchetti iniziali di cui ho scritto riguardo a Gulp e fornire un semplice esempio di un file Gulp iniziale e come usarlo nei tuoi progetti WordPress.

Iniziare con Gulp

Innanzitutto, sono un fan di Homebrew, quindi quando si tratta di gestire pacchetti che non fanno parte del Mac App Store, lo uso. Ciò semplifica notevolmente l’installazione dei pacchetti, l’aggiornamento e la disinstallazione.

Se non hai letto la mia guida su Homebrew, fallo poiché il resto di questo post presume che tu l’abbia installato.

1 Installa Gulp

Se hai installato Homebrew, assicurati che tutto sia a posto e aggiornato, ho un’intera guida per configurare Gulp sul tuo computer locale.

Quindi, se non hai già quella configurazione, dai un’occhiata a questo post per come farlo.

2 Scrivi il tuo file di configurazione di Gulp, parte 1

Per inizializzare un file di configurazione di Gulp, inserisci il seguente comando nella directory principale del tuo progetto nel tuo terminale:

Facile, non è vero?

Questo creerà un gulpfile.js vuoto nella directory principale del tuo progetto. Successivamente, è il momento di modificare il file.

Per questo post, utilizzerò quattro pacchetti che ho descritto in precedenza:

• sorso
• gulp-sass
• gulp-immagine
• gulp-brutto

Ognuna di queste è attività responsabile del transpiling di Sass, dell’ottimizzazione delle immagini e della minimizzazione di JavaScript.

Le attività che si desidera eseguire dalla riga di comando non devono contenere spazi.

Per impostare le attività di base in modo da poterle eseguire dalla riga di comando, dovrai effettuare le seguenti operazioni:

Sass

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

JavaScript

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

immagini

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

Eseguirli individualmente

L’esecuzione di queste attività 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:

Ma questo invecchia velocemente. Inoltre, è meno efficiente soprattutto quando puoi configurare un orologio per eseguire automaticamente le tue attività ogni volta che salvi un file.

2 Scrivi il tuo file di configurazione di Gulp, parte 2

Configurare un orologio è probabilmente la cosa migliore che puoi fare quando si tratta di risparmiare tempo con Gulp.

Guarda i file e fai qualcosa quando un file cambia. Questo restituisce sempre un EventEmitter che emette change eventi.

Impostare un orologio è facile. È molto simile a un’attività (in effetti, richiede un’attività), ma ha anche argomenti speciali. Per aggiungere un’attività di controllo che gestirà Sass, JavaScript e immagini, imposta quanto segue nel tuo gulpfile.js:

gulp.task('watch', function() {
    gulp.watch('assets/styles/scss/*.scss', gulp.series('sass'));
    gulp.watch('assets/scripts/dev/*.js', gulp.series('js'));
    gulp.watch('assets/images/*', gulp.series('images'));
});

Quindi esegui semplicemente l’attività :

Da qui, ogni volta che salvi un file Sass, un file JavaScript o apporti una modifica a un’immagine, l’attività si avvierà automaticamente eseguendo il lavoro dell’attività definita. Nota che questo verrà eseguito perennemente nel suo thread, quindi dovrai aprire una nuova scheda o finestra del terminale se hai bisogno di fare qualsiasi lavoro aggiuntivo.

Una nota sulle versioni

Nelle versioni precedenti di Gulp, il secondo argomento per la funzione watch accetterebbe un array; tuttavia, l’ultima versione richiede una funzione effettiva (che puoi vedere sopra in quanto ho dichiarato series ).

Il fatto è che Gulp 4 consente l’esecuzione sequenziale, che viene eseguita tramite series, e l’esecuzione parallela (che può utilizzare la funzione parallela ). Quelli esulano dallo scopo di questo post in quanto questo è puramente pensato per aiutarti a iniziare.

Una volta terminato, dovresti avere molta più automazione nel tuo processo di creazione.