Alguns pacotes Gulp para iniciantes

Softwares como Gulp e outros utilitários não são novos. Para aqueles que não os usaram antes, pode ser um pouco assustador começar (mas realmente não deveria ser).

Em comparação com ferramentas como o CodeKit (que ainda gosto e recomendo, dependendo do projeto), elas têm um pouco mais de sobrecarga em relação à configuração, configuração e uso.

Mas uma vez que você tenha tudo configurado, pode ser realmente útil com uma equipe distribuída, independentemente do sistema operacional, e pode ajudar a tornar seu processo de compilação um pouco mais robusto.

Mas não é esse o objetivo do post. Em vez disso, aqui está uma lista de alguns pacotes para iniciantes.

Pense nelas desta forma: se você está procurando maneiras de trabalhar com Sass, JavaScript e otimização de imagens, estas são boas bibliotecas.

Pacotes Gulp para Iniciantes

Antes de entrar em cada um dos pacotes a seguir, quero observar que é importante ler cada uma das páginas vinculadas. A documentação ajuda a percorrer as opções que as bibliotecas oferecem que o código que forneci não mostra.

Ou seja, não basta copiar e colar o que forneci. Use-o como ponto de partida, mas leia a documentação também. Você pode não encontrar nada de novo.

Então, novamente, você pode descobrir que existem opções para ajustar seu projeto específico.

1 Sass

Você pode optar por trabalhar com Less (não estou aqui nem lá, na verdade), mas tendo a favorecer Sass. Assim, eu uso uma biblioteca, gulp-sass, especificamente para compilar arquivos Sass em CSS.

Eu normalmente tenho um  diretório de ativos e dentro desse diretório há alguns subdiretórios para imagens, estilos e scripts.

Dentro do  diretório de estilos, tenho dois subdiretórios:

1. scss
2. css

Eu mantenho todos os meus arquivos SCSS no respectivo diretório e, em seguida, uso gulp-sass para gerar os arquivos compilados em CSS.

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

A partir daí, enfileiro os arquivos CSS usando a função necessária da API do WordPress.

2 Minificação de JavaScript

Neste ponto, os benefícios de minificar arquivos JavaScript foram comprovados repetidamente, então não vou me alongar mais nesse ponto.

Existem alguns pacotes que eu tentei no que se refere ao trabalho com minificação JavaScript e gulp-uglify é o que eu acho que mais gosto de usar.

Lembre-se da seção anterior que tenho meu  diretório de ativos e dentro dele tenho meu subdiretório de scripts . Esse diretório contém um único subdiretório próprio: dev.

Eu pego os arquivos JavaScript que estão localizados em dev e os coloco na raiz do  diretório de scripts.

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

A partir daí, como fiz acima, enfileiro-os usando a mesma função da API do WordPress.

3 Otimização de Imagem

Finalmente, uma coisa que pode ajudar muito a garantir que suas páginas sejam carregadas rapidamente é garantir que seus ativos de imagem sejam otimizados.

Claro, existem algumas ferramentas que você pode usar manualmente para fazer isso, mas se você estiver adicionando, alterando ou modificando ativos de imagem com frequência e deseja automatizar o processo de otimização de compilação, recomendo usar gulp-imagemin.

[imagem]

Existem algumas dependências para essa biblioteca específica, portanto, você também precisará garantir que elas sejam incluídas. Esses incluem

• imagemin-gifsicle,
• imagemin-jpegtran,
• imagemin-optipng,
• imagemin-svgo.

Eles podem ser adicionados manualmente aos seus arquivos de configuração, instalados por meio da linha de comando ou de outra forma. Independentemente disso, certifique-se de tê-los antes de tentar otimizar suas imagens.

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

Observe no código acima (e no que mencionei antes) que meu  diretório de imagens está localizado em ativos, portanto, quando eu executar a tarefa conforme mencionado acima, ele otimizará qualquer um dos tipos de imagem suportados nesse local.

Arquivos de pacote, arquivos Gulp e tudo isso?

Se você é novo no Gulp, Node ou em outros sistemas de compilação, há um pouco mais sobre como instalar o Node e o Gulp e configurá-los.

Eu optei por pular isso por enquanto, já que há muita documentação sobre isso, mas talvez eu dê uma olhada no que usamos sempre que estamos incorporando isso em nossos projetos.