{"id":229973,"date":"2022-11-15T12:56:00","date_gmt":"2022-11-15T09:56:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229973"},"modified":"2022-11-09T19:32:03","modified_gmt":"2022-11-09T16:32:03","slug":"alguns-pacotes-gulp-para-iniciantes","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/alguns-pacotes-gulp-para-iniciantes\/","title":{"rendered":"Alguns pacotes Gulp para iniciantes"},"content":{"rendered":"\n

Softwares como Gulp<\/a> e outros utilit\u00e1rios n\u00e3o s\u00e3o novos. Para aqueles que n\u00e3o os usaram antes, pode ser um pouco assustador come\u00e7ar (mas realmente n\u00e3o deveria ser).<\/p>\n

Em compara\u00e7\u00e3o com ferramentas como o CodeKit<\/a> (que ainda gosto e recomendo<\/a>, dependendo do projeto), elas t\u00eam um pouco mais de sobrecarga em rela\u00e7\u00e3o \u00e0 configura\u00e7\u00e3o, configura\u00e7\u00e3o e uso.<\/p>\n

Mas uma vez que voc\u00ea tenha tudo configurado, pode ser realmente \u00fatil com uma equipe distribu\u00edda, independentemente do sistema operacional, e pode ajudar a tornar seu processo de compila\u00e7\u00e3o um pouco mais robusto.<\/p>\n

Mas n\u00e3o \u00e9 esse o objetivo do post. Em vez disso, aqui est\u00e1 uma lista de alguns pacotes para iniciantes.<\/p>\n

Pense nelas desta forma: se voc\u00ea est\u00e1 procurando maneiras de trabalhar com Sass<\/a>, JavaScript e otimiza\u00e7\u00e3o de imagens, estas s\u00e3o boas bibliotecas.<\/p>\n

Pacotes Gulp para Iniciantes<\/h2>\n

Antes de entrar em cada um dos pacotes a seguir, quero observar que \u00e9 importante ler cada uma das p\u00e1ginas vinculadas. A documenta\u00e7\u00e3o ajuda a percorrer as op\u00e7\u00f5es que as bibliotecas oferecem que o c\u00f3digo que forneci n\u00e3o mostra.<\/p>\n

Ou seja, n\u00e3o basta copiar e colar o que forneci. Use-o como ponto de partida, mas leia a documenta\u00e7\u00e3o tamb\u00e9m. Voc\u00ea pode n\u00e3o encontrar nada de novo.<\/p>\n

Ent\u00e3o, novamente, voc\u00ea pode descobrir que existem op\u00e7\u00f5es para ajustar seu projeto espec\u00edfico.<\/p>\n

1 Sass<\/h3>\n

Voc\u00ea pode optar por trabalhar com Less<\/a> (n\u00e3o estou aqui nem l\u00e1, na verdade), mas tendo a favorecer Sass. Assim, eu uso uma biblioteca, gulp-sass<\/a>, especificamente para compilar arquivos Sass em CSS.<\/p>\n

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

Eu normalmente tenho um\u00a0 diret\u00f3rio de ativos<\/strong> e dentro desse diret\u00f3rio h\u00e1 alguns subdiret\u00f3rios para imagens<\/strong>, estilos<\/strong> e scripts<\/strong>.<\/p>\n

Dentro do\u00a0 diret\u00f3rio de estilos<\/strong>, tenho dois subdiret\u00f3rios:<\/p>\n

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

    Eu mantenho todos os meus arquivos SCSS no respectivo diret\u00f3rio e, em seguida, uso gulp-sass para gerar os arquivos compilados em 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
    A partir da\u00ed, enfileiro os arquivos CSS usando a fun\u00e7\u00e3o necess\u00e1ria da API do WordPress<\/a>.<\/p>\n
    2 Minifica\u00e7\u00e3o de JavaScript<\/h3>\n
    Neste ponto, os benef\u00edcios de minificar arquivos JavaScript foram comprovados repetidamente, ent\u00e3o n\u00e3o vou me alongar mais nesse ponto.<\/p>\n
    Existem alguns pacotes que eu tentei no que se refere ao trabalho com minifica\u00e7\u00e3o JavaScript e gulp-uglify<\/a> \u00e9 o que eu acho que mais gosto de usar.<\/p>\n
    \"Alguns<\/a><\/p>\n
    Lembre-se da se\u00e7\u00e3o anterior que tenho meu\u00a0 diret\u00f3rio de ativos<\/strong> e dentro dele tenho meu subdiret\u00f3rio de scripts .<\/strong> Esse diret\u00f3rio cont\u00e9m um \u00fanico subdiret\u00f3rio pr\u00f3prio: dev.<\/strong><\/p>\n
    Eu pego os arquivos JavaScript que est\u00e3o localizados em dev<\/strong> e os coloco<\/a> na raiz do\u00a0 diret\u00f3rio de 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
    A partir da\u00ed, como fiz acima, enfileiro-os usando a mesma fun\u00e7\u00e3o da API do WordPress<\/a>.<\/p>\n
    3 Otimiza\u00e7\u00e3o de Imagem<\/h3>\n
    Finalmente, uma coisa que pode ajudar muito a garantir que suas p\u00e1ginas sejam carregadas rapidamente \u00e9 garantir que seus ativos de imagem sejam otimizados.<\/p>\n
    Claro, existem algumas ferramentas que voc\u00ea pode usar manualmente para fazer isso, mas se voc\u00ea estiver adicionando, alterando ou modificando ativos de imagem com frequ\u00eancia e deseja automatizar o processo de otimiza\u00e7\u00e3o de compila\u00e7\u00e3o, recomendo usar gulp-imagemin<\/a>.<\/p>\n
    [imagem]<\/p>\n
    Existem algumas depend\u00eancias para essa biblioteca espec\u00edfica, portanto, voc\u00ea tamb\u00e9m precisar\u00e1 garantir que elas sejam inclu\u00eddas. Esses incluem<\/p>\n