{"id":229865,"date":"2022-11-15T13:11:00","date_gmt":"2022-11-15T10:11:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229865"},"modified":"2022-11-09T16:43:40","modified_gmt":"2022-11-09T13:43:40","slug":"quelques-forfaits-gulp-pour-les-debutants","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/quelques-forfaits-gulp-pour-les-debutants\/","title":{"rendered":"Quelques forfaits Gulp pour les d\u00e9butants"},"content":{"rendered":"\n

Les logiciels comme Gulp<\/a> et d’autres utilitaires ne sont pas nouveaux. Pour ceux qui ne les ont jamais utilis\u00e9s auparavant, cela peut \u00eatre un peu intimidant de commencer (mais cela ne devrait vraiment pas l’\u00eatre).<\/p>\n

En comparaison avec des outils comme CodeKit<\/a> (que j’aime et recommande toujours<\/a>, selon le projet), ils ont un peu plus de frais g\u00e9n\u00e9raux pour les configurer, les configurer et les pr\u00e9parer.<\/p>\n

Mais une fois que vous avez tout configur\u00e9, cela peut \u00eatre tr\u00e8s utile avec une \u00e9quipe distribu\u00e9e quel que soit le syst\u00e8me d’exploitation, et cela peut l’aider \u00e0 rendre votre processus de construction un peu plus robuste.<\/p>\n

Ce n’est pourtant pas le but du post. Au lieu de cela, voici une liste de quelques packages pour les d\u00e9butants.<\/p>\n

Pensez-y de cette fa\u00e7on\u00a0: si vous cherchez des moyens de travailler avec Sass<\/a>, JavaScript et l’optimisation des images, ce sont de bonnes biblioth\u00e8ques.<\/p>\n

Forfaits Gulp pour les d\u00e9butants<\/h2>\n

Avant de sauter dans chacun des packages suivants, je tiens \u00e0 noter qu’il est important de lire chacune des pages li\u00e9es. La documentation aide \u00e0 parcourir les options propos\u00e9es par les biblioth\u00e8ques et que le code que j’ai fourni n’affiche pas.<\/p>\n

Autrement dit, ne vous contentez pas de copier et coller ce que j’ai fourni. Utilisez-le comme point de d\u00e9part, mais lisez \u00e9galement la documentation. Vous ne trouverez peut-\u00eatre rien de nouveau.<\/p>\n

L\u00e0 encore, vous constaterez peut-\u00eatre qu’il existe des options pour peaufiner votre projet particulier.<\/p>\n

1 Sass<\/h3>\n

Vous pouvez choisir de travailler avec Less<\/a> (je ne suis ni ici ni l\u00e0-bas, vraiment) mais j’ai tendance \u00e0 favoriser Sass. Ainsi, j’utilise une biblioth\u00e8que, gulp-sass<\/a>, sp\u00e9cifiquement pour compiler des fichiers Sass en CSS.<\/p>\n

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

J’ai normalement un\u00a0 r\u00e9pertoire d’ actifs<\/strong> et dans ce r\u00e9pertoire se trouvent des sous-r\u00e9pertoires pour les images<\/strong>, les styles<\/strong> et les scripts<\/strong>.<\/p>\n

Dans le\u00a0 r\u00e9pertoire styles<\/strong>, j’ai deux sous-r\u00e9pertoires\u00a0:<\/p>\n

    \n
  1. scss<\/strong><\/li>\n
  2. CSS<\/strong><\/li>\n<\/ol>\n

    Je conserve tous mes fichiers SCSS dans le r\u00e9pertoire respectif, puis j’utilise gulp-sass pour sortir les fichiers compil\u00e9s en 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
    \u00c0 partir de l\u00e0, je mets les fichiers CSS en file d’attente \u00e0 l’aide de la fonction API WordPress n\u00e9cessaire<\/a>.<\/p>\n
    2 Minification JavaScript<\/h3>\n
    \u00c0 ce stade, les avantages de la minification des fichiers JavaScript ont \u00e9t\u00e9 prouv\u00e9s \u00e0 maintes reprises, je ne vais donc pas m’\u00e9tendre davantage sur ce point.<\/p>\n
    J’ai essay\u00e9 certains packages en ce qui concerne le travail avec la minification JavaScript et gulp-uglify<\/a> est celui que j’aime le plus utiliser.<\/p>\n
    \"Quelques<\/a><\/p>\n
    Rappelez-vous de la section pr\u00e9c\u00e9dente que j’ai mon\u00a0 r\u00e9pertoire assets<\/strong> et qu’il contient mon sous-r\u00e9pertoire scripts .<\/strong> Ce r\u00e9pertoire contient un seul sous-r\u00e9pertoire qui lui est propre: dev.<\/strong><\/p>\n
    Je prends les fichiers JavaScript qui se trouvent dans dev<\/strong> et je les affiche<\/a> \u00e0 la racine du r\u00e9pertoire des scripts<\/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
    \u00c0 partir de l\u00e0, comme je le fais ci-dessus, je les mets en file d’attente en utilisant la m\u00eame fonction d’API WordPress<\/a>.<\/p>\n
    3 Optimisation des images<\/h3>\n
    Enfin, une chose qui peut faire beaucoup pour s’assurer que votre ou vos pages se chargent rapidement est de s’assurer que vos \u00e9l\u00e9ments d’image sont optimis\u00e9s.<\/p>\n
    Bien s\u00fbr, il existe des outils que vous pouvez utiliser manuellement pour ce faire, mais si vous ajoutez, modifiez ou modifiez fr\u00e9quemment des \u00e9l\u00e9ments d’image et que vous souhaitez automatiser le processus de construction d’optimisation, je vous recommande d’utiliser gulp-imagemin<\/a>.<\/p>\n
    [image]<\/p>\n
    Il existe certaines d\u00e9pendances pour cette biblioth\u00e8que particuli\u00e8re, vous devrez donc vous assurer qu’elles sont \u00e9galement incluses. Ceux-ci inclus<\/p>\n