{"id":230124,"date":"2022-11-19T18:56:00","date_gmt":"2022-11-19T15:56:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230124"},"modified":"2022-11-19T18:56:05","modified_gmt":"2022-11-19T15:56:05","slug":"introducao-aos-pacotes-gulp-starter","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/introducao-aos-pacotes-gulp-starter\/","title":{"rendered":"Introdu\u00e7\u00e3o aos pacotes Gulp Starter"},"content":{"rendered":"\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/qual-e-a-diferenca-no-codekit-e-no-composer\/\" title=\"Falar sobre o CodeKit\">Falar sobre o CodeKit<\/a> e os benef\u00edcios que ele oferece para desenvolvedores front-end tamb\u00e9m veio logo ap\u00f3s um post e os benef\u00edcios que <a href=\"https:\/\/gulpjs.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">algo como o Gulp<\/a> oferece tamb\u00e9m.<\/p>\n<p>Um post sobre a diferen\u00e7a entre os dois, por que voc\u00ea pode querer um sobre o outro, e as vantagens ou desvantagens de cada um pode ser o seu post.<\/p>\n<p>Mas para isso, gostaria de pegar os <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/alguns-pacotes-gulp-para-iniciantes\/\" title=\"pacotes iniciais\">pacotes iniciais<\/a> sobre os quais escrevi sobre o Gulp e dar um exemplo simples de um arquivo Gulp inicial e como us\u00e1-lo em seus projetos WordPress.<\/p>\n<h2>Introdu\u00e7\u00e3o ao Gulp<\/h2>\n<p>Primeiro, sou f\u00e3 do Homebrew, ent\u00e3o quando se trata de gerenciar pacotes que n\u00e3o fazem parte da Mac App Store, eu o uso. Isso torna muito mais f\u00e1cil instalar pacotes, atualiz\u00e1-los e desinstal\u00e1-los.<\/p>\n<p>Se voc\u00ea n\u00e3o leu <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/homebrew-node-e-gulp-para-desenvolvimento-wordpress\/\" title=\"meu guia sobre Homebrew\">meu guia sobre Homebrew<\/a>, fa\u00e7a-o, pois o restante deste post pressup\u00f5e que voc\u00ea o tenha instalado.<\/p>\n<h3>1 Instale o Gulp<\/h3>\n<p>Se voc\u00ea tiver o Homebrew instalado, certifique-se de que tudo est\u00e1 bem e atualizado, eu tenho um guia completo para configurar o Gulp em sua m\u00e1quina local.<\/p>\n<\/p>\n<p>Ent\u00e3o, se voc\u00ea ainda n\u00e3o tem essa configura\u00e7\u00e3o, confira <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/usando-o-homebrew-para-instalar-o-no-para-instalar-o-gulp\/\" title=\"este post\">este post<\/a> para saber como faz\u00ea-lo.<\/p>\n<h3>2 Escreva seu arquivo de configura\u00e7\u00e3o do Gulp, Parte 1<\/h3>\n<p>Para inicializar um arquivo de configura\u00e7\u00e3o do Gulp, digite <a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-00-gulpfile-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">o seguinte comando<\/a> no diret\u00f3rio raiz do seu projeto em seu terminal:<\/p>\n<p>F\u00e1cil, n\u00e3o \u00e9?<\/p>\n<p>Isso criar\u00e1 um <strong>gulpfile.js<\/strong> em branco no diret\u00f3rio raiz do seu projeto. Em seguida, \u00e9 hora de editar o arquivo.<\/p>\n<p>Para este post, vou usar quatro pacotes que descrevi anteriormente:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">gole<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-sass\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">gulp-sass<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-imagemin\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">gulp-imagemin<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/gulp-uglify\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">engolir-feia<\/a><\/li>\n<\/ul>\n<p>Cada uma dessas tarefas \u00e9 respons\u00e1vel por transpilar Sass, otimizar imagens e minificar JavaScript.<\/p>\n<blockquote>\n<p>As tarefas que voc\u00ea deseja executar na linha de comando n\u00e3o devem ter espa\u00e7os.<\/p>\n<\/blockquote>\n<p>Para configurar as <a href=\"https:\/\/github.com\/gulpjs\/gulp\/blob\/master\/docs\/API.md#gulptaskname--deps--fn\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">tarefas<\/a> b\u00e1sicas para que voc\u00ea possa execut\u00e1-las na linha de comando, voc\u00ea precisar\u00e1 fazer o seguinte:<\/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\">Sass<\/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\">Imagens<\/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>Executando-os individualmente<\/h4>\n<p>Executar essas tarefas individualmente requer que voc\u00ea digite o seguinte no console toda vez que quiser, digamos, transpilar seus arquivos Sass e reduzir seus arquivos JavaScript:<\/p>\n<p>Mas isso envelhece r\u00e1pido. Al\u00e9m disso, \u00e9 menos eficiente, especialmente quando voc\u00ea pode configurar um <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\">rel\u00f3gio<\/a> para executar automaticamente suas tarefas sempre que salvar um arquivo.<\/p>\n<h3>2 Escreva seu arquivo de configura\u00e7\u00e3o do Gulp, Parte 2<\/h3>\n<p>Configurar um <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\">rel\u00f3gio<\/a> \u00e9 provavelmente a melhor coisa que voc\u00ea pode fazer quando se trata de economizar tempo com o Gulp.<\/p>\n<blockquote>\n<p>Observe os arquivos e fa\u00e7a algo quando um arquivo for alterado. Isso sempre retorna um EventEmitter que emite <code>change<\/code>\u00a0eventos.<\/p>\n<\/blockquote>\n<p>Configurar um rel\u00f3gio \u00e9 f\u00e1cil. \u00c9 muito parecido com uma tarefa (na verdade, requer uma tarefa), mas tamb\u00e9m possui argumentos especiais. Para adicionar uma tarefa de observa\u00e7\u00e3o que lidar\u00e1 com Sass, JavaScript e imagens, <a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-05-gulp-watch-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">configure o seguinte<\/a> em seu gulpfile.js:<\/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>Depois \u00e9 s\u00f3 executar <a href=\"https:\/\/gist.github.com\/tommcfarlin\/3d930006082bedb567bf6f9344204ec7#file-06-gulp-watch-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">a tarefa<\/a> :<\/p>\n<p>A partir daqui, toda vez que voc\u00ea salvar um arquivo Sass, um arquivo JavaScript ou fizer uma altera\u00e7\u00e3o em uma imagem, a tarefa ser\u00e1 acionada automaticamente fazendo o trabalho da tarefa definida. Observe que isso ser\u00e1 executado perpetuamente em seu encadeamento, portanto, voc\u00ea precisar\u00e1 abrir uma nova guia ou janela do terminal se precisar fazer algum trabalho adicional.<\/p>\n<h2>Uma Nota Sobre Vers\u00f5es<\/h2>\n<p>Em vers\u00f5es anteriores do Gulp, o segundo argumento para a fun\u00e7\u00e3o watch aceitaria uma matriz; no entanto, a vers\u00e3o mais recente requer uma fun\u00e7\u00e3o real (que voc\u00ea pode ver acima em que declarei <strong>series<\/strong> ).<\/p>\n<p>O resumo disso \u00e9 que o Gulp 4 permite a execu\u00e7\u00e3o sequencial, que \u00e9 feita via <strong>series<\/strong>, e a execu\u00e7\u00e3o paralela (que pode usar a fun\u00e7\u00e3o <strong>paralela<\/strong> ). Esses est\u00e3o al\u00e9m do escopo deste post, pois isso \u00e9 puramente para ajudar voc\u00ea a come\u00e7ar.<\/p>\n<p>Uma vez feito, voc\u00ea deve ter muito mais automa\u00e7\u00e3o em seu processo de constru\u00e7\u00e3o.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Come\u00e7ar com os pacotes iniciais do Gulp \u00e9 uma continua\u00e7\u00e3o de uma postagem anterior com o objetivo de ajudar a automatizar tarefas comuns que usamos.<\/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":[753,722,920,846,867],"tags":[1170],"class_list":["post-230124","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-aberto","category-desenvolvedor","category-outro","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/230124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=230124"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/230124\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/165162"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=230124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=230124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=230124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}