{"id":230019,"date":"2022-11-19T18:24:00","date_gmt":"2022-11-19T15:24:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230019"},"modified":"2022-11-19T18:34:29","modified_gmt":"2022-11-19T15:34:29","slug":"premiers-pas-avec-les-packages-de-demarrage-gulp","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/premiers-pas-avec-les-packages-de-demarrage-gulp\/","title":{"rendered":"Premiers pas avec les packages de d\u00e9marrage Gulp"},"content":{"rendered":"\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/fr\/quelle-est-la-difference-entre-codekit-et-composer\/\" title=\"Parler de CodeKit\">Parler de CodeKit<\/a> et des avantages qu&rsquo;il offre aux d\u00e9veloppeurs frontaux est \u00e9galement venu juste apr\u00e8s un article et des avantages qu&rsquo;offre \u00e9galement <a href=\"https:\/\/gulpjs.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Gulp<\/a>.<\/p>\n<p>Un message sur la diff\u00e9rence entre les deux, pourquoi vous voudrez peut-\u00eatre l&rsquo;un plut\u00f4t que l&rsquo;autre, et les avantages ou les inconv\u00e9nients de l&rsquo;un ou l&rsquo;autre peut \u00eatre son message.<\/p>\n<p>Mais pour cela, j&rsquo;aimerais prendre les <a href=\"https:\/\/wordpress.mediadoma.com\/fr\/quelques-forfaits-gulp-pour-les-debutants\/\" title=\"packages de d\u00e9marrage\">packages de d\u00e9marrage<\/a> sur lesquels j&rsquo;ai \u00e9crit concernant Gulp et donner un exemple simple d&rsquo;un fichier Gulp de d\u00e9marrage et comment l&rsquo;utiliser dans vos projets WordPress.<\/p>\n<h2>Premiers pas avec Gulp<\/h2>\n<p>Tout d&rsquo;abord, je suis un fan d&rsquo;Homebrew, donc quand il s&rsquo;agit de g\u00e9rer des packages qui ne font pas partie du Mac App Store, je l&rsquo;utilise. Cela facilite grandement l&rsquo;installation, la mise \u00e0 jour et la d\u00e9sinstallation des packages.<\/p>\n<p>Si vous n&rsquo;avez pas lu <a href=\"https:\/\/wordpress.mediadoma.com\/fr\/homebrew-node-et-gulp-pour-le-developpement-wordpress\/\" title=\"mon guide sur Homebrew\">mon guide sur Homebrew<\/a>, veuillez le faire car le reste de cet article suppose que vous l&rsquo;avez install\u00e9.<\/p>\n<h3>1 Installer Gulp<\/h3>\n<p>Si vous avez install\u00e9 Homebrew, assurez-vous que tout a l&rsquo;air bien et est \u00e0 jour, j&rsquo;ai un guide complet pour configurer Gulp sur votre machine locale.<\/p>\n<\/p>\n<p>Donc, si vous n&rsquo;avez pas encore cette configuration, consultez <a href=\"https:\/\/wordpress.mediadoma.com\/fr\/utiliser-homebrew-pour-installer-node-pour-installer-gulp\/\" title=\"cet article\">cet article<\/a> pour savoir comment proc\u00e9der.<\/p>\n<h3>2 \u00c9crivez votre fichier de configuration Gulp, partie 1<\/h3>\n<p>Pour initialiser un fichier de configuration Gulp, entrez <a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-00-gulpfile-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la commande suivante<\/a> dans le r\u00e9pertoire racine de votre projet dans votre terminal\u00a0:<\/p>\n<p>Facile, n&rsquo;est-ce pas ?<\/p>\n<p>Cela cr\u00e9era un <strong>gulpfile.js<\/strong> vide dans le r\u00e9pertoire racine de votre projet. Ensuite, il est temps de modifier le fichier.<\/p>\n<p>Pour cet article, je vais utiliser quatre packages que j&rsquo;ai pr\u00e9c\u00e9demment d\u00e9crits\u00a0:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">gorg\u00e9e<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-sass\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">avaler-sass<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-imagemin\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">gorg\u00e9e-image<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-uglify\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">engloutir<\/a><\/li>\n<\/ul>\n<p>Chacune de ces t\u00e2ches est responsable de la transpilation de Sass, de l&rsquo;optimisation des images et de la minification de JavaScript.<\/p>\n<blockquote>\n<p>Les t\u00e2ches que vous souhaitez ex\u00e9cuter \u00e0 partir de la ligne de commande ne doivent pas contenir d&rsquo;espaces.<\/p>\n<\/blockquote>\n<p>Pour configurer les <a href=\"https:\/\/github.com\/gulpjs\/gulp\/blob\/master\/docs\/API.md#gulptaskname--deps--fn\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">t\u00e2ches<\/a> de base afin que vous puissiez les ex\u00e9cuter \u00e0 partir de la ligne de commande, vous devrez proc\u00e9der comme suit\u00a0:<\/p>\n<h4><a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-01-gulp-task-sass-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Toupet<\/a><\/h4>\n<pre><code>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<h4><a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-02-gulp-task-js-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Javascript<\/a><\/h4>\n<pre><code>gulp.task('js', function() {\n  return gulp.src('assets\/scripts\/dev\/*.js')\n    .pipe(uglify())\n    .pipe(gulp.dest('assets\/scripts'));\n});<\/code><\/pre>\n<h4><a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-03-gulp-task-images-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Images<\/a><\/h4>\n<pre><code>gulp.task('images', function() {\n  return gulp.src('assets\/images\/*')\n    .pipe(imagemin())\n    .pipe(gulp.dest('assets\/images'))\n});<\/code><\/pre>\n<h4>Les ex\u00e9cuter individuellement<\/h4>\n<p>L&rsquo;ex\u00e9cution de ces t\u00e2ches individuellement n\u00e9cessite que vous saisissiez ce qui suit dans la console chaque fois que vous souhaitez, par exemple, transpiler vos fichiers Sass et minifier vos fichiers JavaScript\u00a0:<\/p>\n<p>Mais cela vieillit vite. De plus, c&rsquo;est moins efficace, surtout lorsque vous pouvez configurer une <a href=\"https:\/\/github.com\/gulpjs\/gulp\/blob\/master\/docs\/API.md#gulpwatchglob--opts-tasks-or-gulpwatchglob--opts-cb\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">montre<\/a> pour ex\u00e9cuter automatiquement vos t\u00e2ches chaque fois que vous enregistrez un fichier.<\/p>\n<h3>2 \u00c9crivez votre fichier de configuration Gulp, partie 2<\/h3>\n<p>Configurer une <a href=\"https:\/\/github.com\/gulpjs\/gulp\/blob\/master\/docs\/API.md#gulpwatchglob--opts-tasks-or-gulpwatchglob--opts-cb\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">montre<\/a> est probablement la meilleure chose que vous puissiez faire pour gagner du temps avec Gulp.<\/p>\n<blockquote>\n<p>Surveillez les fichiers et faites quelque chose lorsqu&rsquo;un fichier change. Cela renvoie toujours un EventEmitter qui \u00e9met des <code>change<\/code>\u00a0\u00e9v\u00e9nements.<\/p>\n<\/blockquote>\n<p>Configurer une montre est facile. C&rsquo;est un peu comme une t\u00e2che (en fait, cela n\u00e9cessite une t\u00e2che) mais il a aussi des arguments sp\u00e9ciaux. Pour ajouter une t\u00e2che de surveillance qui g\u00e9rera Sass, JavaScript et les images, <a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-05-gulp-watch-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">configurez ce qui suit<\/a> dans votre gulpfile.js\u00a0:<\/p>\n<pre><code>gulp.task('watch', function() {\n    gulp.watch('assets\/styles\/scss\/*.scss', gulp.series('sass'));\n    gulp.watch('assets\/scripts\/dev\/*.js', gulp.series('js'));\n    gulp.watch('assets\/images\/*', gulp.series('images'));\n});<\/code><\/pre>\n<p>Ensuite, ex\u00e9cutez simplement <a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-06-gulp-watch-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la t\u00e2che<\/a>\u00a0:<\/p>\n<p>\u00c0 partir de l\u00e0, chaque fois que vous enregistrez un fichier Sass, un fichier JavaScript ou apportez une modification \u00e0 une image, la t\u00e2che se d\u00e9clenchera automatiquement en effectuant le travail de la t\u00e2che d\u00e9finie. Notez que cela s&rsquo;ex\u00e9cutera perp\u00e9tuellement dans son fil, vous devrez donc ouvrir un nouvel onglet ou une nouvelle fen\u00eatre de terminal si vous devez effectuer des travaux suppl\u00e9mentaires.<\/p>\n<h2>Remarque sur les versions<\/h2>\n<p>Dans les versions ant\u00e9rieures de Gulp, le deuxi\u00e8me argument de la fonction watch acceptait un tableau\u00a0; cependant, la derni\u00e8re version n\u00e9cessite une fonction r\u00e9elle (que vous pouvez voir ci-dessus dans la mesure o\u00f9 j&rsquo;ai d\u00e9clar\u00e9 <strong>series<\/strong> ).<\/p>\n<p>En bref, Gulp 4 permet une ex\u00e9cution s\u00e9quentielle, qui se fait via <strong>series<\/strong>, et une ex\u00e9cution parall\u00e8le (qui peut utiliser la fonction <strong>parall\u00e8le<\/strong> ). Ceux-ci sortent du cadre de cet article car cela est uniquement destin\u00e9 \u00e0 vous aider \u00e0 d\u00e9marrer.<\/p>\n<p>Une fois cela fait, vous devriez avoir beaucoup plus d&rsquo;automatisation dans votre processus de construction.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>D\u00e9marrer avec les packages de d\u00e9marrage Gulp fait suite \u00e0 un article pr\u00e9c\u00e9dent visant \u00e0 aider \u00e0 automatiser les t\u00e2ches courantes que nous utilisons.<\/p>\n","protected":false},"author":1,"featured_media":165162,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[915,717,748,841,862],"tags":[1167],"class_list":["post-230019","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-autre","category-developpeur","category-open-source-projektmanagement-2","category-tutoriels","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/230019","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=230019"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/230019\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/165162"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=230019"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=230019"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=230019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}