7
respostas

gravar imagem minificada no mesmo diretorio src

Boa tarde,

No curso eu vi que para minificar imagens pode-se utilizar o gulp-imagemin. Eu tenho a seguinte estrutura de pastas img logo home ourteam

E fiz a task conforme abaixo.

gulp.task('build-img', function() {

  return gulp.src('dist/app/assets/**/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/app/assets/imgs'));
});

Eu queria parametrizar o gulp para que ele salve a imagem no mesmo diretório (só que na pasta dist) que o src. Exemplo: dist/app/assets/ourteam/image1.jpg Efetua a compressão e salva em dist/app/assets/ourteam/image1.jpg.

Isso é possível?

7 respostas

É, mas o que houve de erro?

O código conforme mandei acima grava todas as imagens do no diretorio "dist/app/assets/imgs". Só que o diretorio source delas era diferente. Veja abaixo meu exemplo.

Tenho a seguinte estrutura de pastas

dist/app/assets/imgs
    home
        img1.jpg
        img2.jpg
    logo
        img3.jpg
    ourteam
        img4.jpg

A minha task depois de processar as imagens grava no seguinte diretório.

    dist/app/assets/imgs
        img1.jpg
        img2.jpg
        img3.jpg
        img4.jpg

Só que os componentes imgs dos meus htmls procuram as imagens cada qual dentro da sua pasta conforme a primeira estrutura que eu enviei. Esse é o erro, eu gostaria que a minha task lesse de 'dist/app/assets/*/' mas que gravasse cada imagem na sua respectiva pasta de origem (ou seja sobrescrevesse a que ele leu com a nova minificada) visto que ele está fazendo já direto na pasta dist que é uma cópia da minha src.

Pode me ajudar?

Entendi. Olha, nesse caso parece que você terá que indicar cada arquivo, individualmente que deseja copiar para o destino que deseja. O chato dessa abordagem é que você terá que usar um array e colocar cada arquivo individualmente. Mas tipo, esse é um preço que se paga por não seguir a convenção que é seguir a mesma estrutura das pastas.

No entanto, se não me falha a memória, é possível conseguir o que você deseja (acho), fazendo dessa forma:

gulp.task('build-img', function() {

  return gulp.src('dist/app/assets/**/*',  { base: "dist/app/assets/imgs" })
    .pipe(imagemin())
    .pipe(gulp.dest('dist/app/assets/imgs'));
});

Acho que vale a pena tentar.

Obrigado pelo retorno. Vou fazer um teste com a solução que vc mandou. Se não funcionar irei alterar o fonte para pegar sempre da pasta imgs e não usar várias pastas la dentro. Porque colocar cada imagem no gulp vai ser bem mais custoso. rsrsrsr

Vlew Flavio.

Eu vi essa solução aqui, que nunca tinha visto. Ele usa um módulo extra:

https://stackoverflow.com/questions/37049827/gulp-copy-files-from-multiple-folders-into-one

Estou um pouquinho enrolado aqui para testar agora, mas parece ser promissora. Mas acho que brincar com o base que lhe falei funcionará.

Olá Flavio, com o {base} funcionou. Muito obrigado.

Estou com outro problema, vou mandar aqui. Se vc achar que devo abrir outra discussão eu abro sem problemas. Mas é a mesma situação mas com plugin diferente..rsrsrsr

Eu tenho htmls em várias pastas, conforme abaixo.

app/views/home/home.view.html
app/view/ourteam/ourteam.view.html
app/view/login/login.view.html
index.html (na raiz)

Estou usando o htmlmin para minificar os htmls, só que tem que passar um diretório para ele onde deve salvar os arquivos minificados. Eu queria que ele salvasse na mesma situação das imagens (sobrescrevendo o arquivo de origem). Abaixo a maneira que está a minha task.

gulp.task('htmlmin', function(){
    return gulp.src(
            'dist/app/**/*.html', { base: "dist/app/" }
        )
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('dist/app'));
});

Mas dessa forma os arquivos não chegam minificados. Agora se eu faço como abaixo por exemplo, os arquivos são gravados na pasta view certinhos já minificados. Mas não é a estrutura que o sistema está preparado.

gulp.task('htmlmin', function(){
    return gulp.src(
            'dist/app/**/*.html',
        )
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('dist/view'));
});

Consegue me ajudar?

Hum.. eu iria sugerir a mesma solução que antes. Não funcionou né? Então terá que passar o tal array que falei. Todavia, não minificar o HTML não lhe causará problemas.

Já tentou aquele plugin que sugeri como resolução?

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software