Quelques forfaits Gulp pour les débutants

Les logiciels comme Gulp et d’autres utilitaires ne sont pas nouveaux. Pour ceux qui ne les ont jamais utilisés auparavant, cela peut être un peu intimidant de commencer (mais cela ne devrait vraiment pas l’être).

En comparaison avec des outils comme CodeKit (que j’aime et recommande toujours, selon le projet), ils ont un peu plus de frais généraux pour les configurer, les configurer et les préparer.

Mais une fois que vous avez tout configuré, cela peut être très utile avec une équipe distribuée quel que soit le système d’exploitation, et cela peut l’aider à rendre votre processus de construction un peu plus robuste.

Ce n’est pourtant pas le but du post. Au lieu de cela, voici une liste de quelques packages pour les débutants.

Pensez-y de cette façon : si vous cherchez des moyens de travailler avec Sass, JavaScript et l’optimisation des images, ce sont de bonnes bibliothèques.

Forfaits Gulp pour les débutants

Avant de sauter dans chacun des packages suivants, je tiens à noter qu’il est important de lire chacune des pages liées. La documentation aide à parcourir les options proposées par les bibliothèques et que le code que j’ai fourni n’affiche pas.

Autrement dit, ne vous contentez pas de copier et coller ce que j’ai fourni. Utilisez-le comme point de départ, mais lisez également la documentation. Vous ne trouverez peut-être rien de nouveau.

Là encore, vous constaterez peut-être qu’il existe des options pour peaufiner votre projet particulier.

1 Sass

Vous pouvez choisir de travailler avec Less (je ne suis ni ici ni là-bas, vraiment) mais j’ai tendance à favoriser Sass. Ainsi, j’utilise une bibliothèque, gulp-sass, spécifiquement pour compiler des fichiers Sass en CSS.

J’ai normalement un  répertoire d’ actifs et dans ce répertoire se trouvent des sous-répertoires pour les images, les styles et les scripts.

Dans le  répertoire styles, j’ai deux sous-répertoires :

1. scss
2. CSS

Je conserve tous mes fichiers SCSS dans le répertoire respectif, puis j’utilise gulp-sass pour sortir les fichiers compilés en CSS.

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

À partir de là, je mets les fichiers CSS en file d’attente à l’aide de la fonction API WordPress nécessaire.

2 Minification JavaScript

À ce stade, les avantages de la minification des fichiers JavaScript ont été prouvés à maintes reprises, je ne vais donc pas m’étendre davantage sur ce point.

J’ai essayé certains packages en ce qui concerne le travail avec la minification JavaScript et gulp-uglify est celui que j’aime le plus utiliser.

Rappelez-vous de la section précédente que j’ai mon  répertoire assets et qu’il contient mon sous-répertoire scripts . Ce répertoire contient un seul sous-répertoire qui lui est propre: dev.

Je prends les fichiers JavaScript qui se trouvent dans dev et je les affiche à la racine du répertoire des scripts.

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

À partir de là, comme je le fais ci-dessus, je les mets en file d’attente en utilisant la même fonction d’API WordPress.

3 Optimisation des images

Enfin, une chose qui peut faire beaucoup pour s’assurer que votre ou vos pages se chargent rapidement est de s’assurer que vos éléments d’image sont optimisés.

Bien sûr, il existe des outils que vous pouvez utiliser manuellement pour ce faire, mais si vous ajoutez, modifiez ou modifiez fréquemment des éléments d’image et que vous souhaitez automatiser le processus de construction d’optimisation, je vous recommande d’utiliser gulp-imagemin.

[image]

Il existe certaines dépendances pour cette bibliothèque particulière, vous devrez donc vous assurer qu’elles sont également incluses. Ceux-ci inclus

• picturein-gifsicle,
• image en jpegtran,
• imagein-optipng,
• image en svgo.

Ceux-ci peuvent être ajoutés manuellement à vos fichiers de configuration, installés via la ligne de commande ou autrement. Quoi qu’il en soit, assurez-vous de les avoir avant d’essayer d’ optimiser vos images.

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

Notez d’après le code ci-dessus (et ce que j’ai mentionné précédemment) que mon  répertoire d’ images se trouve dans assets donc lorsque j’exécute la tâche comme mentionné ci-dessus, il optimisera tous les types d’images pris en charge à cet emplacement.

Fichiers de package, fichiers Gulp et tout ça ?

Si vous débutez avec Gulp, Node ou d’autres systèmes de construction, il y a un peu plus à couvrir concernant l’installation et la configuration de Node et Gulp.

J’ai choisi de sauter cela pour l’instant car il y a beaucoup de documentation à ce sujet, mais je vais peut-être jeter un coup d’œil à ce que nous utilisons chaque fois que nous intégrons cela dans nos projets.