Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

Versionamento - Alterações na folha de estilo

Olá,

Ao utilizar o plugin de versionamento do grunt, quando altero alguma figura que é chamada pela folha de estilo, esta deixa de ser importada, pois o plugin de versionamento renomeia a imagem.

Como posso resolver esse problema? Tem alguma forma de renomear as chamadas da imagem da folha de estilo pelo grunt?

8 respostas

Bernardo, deixa eu ver se compreendi corretamente sua dúvida. Primeiro deixa eu confirmar o fluxo normal: você tem o HTML original uma imagem que aponta para o arquivo original no disco, sem ser renomeada. Quando você roda a task do grunt o arquivo é renomeado para um hash e seu HTML é trocado para apontar para este arquivo. Porém, o HTML que é trocado e a imagem que é modificada é de uma cópia do seu projeto, para evitar de alterar os arquivos originais. Beleza?

Agora vamos ao seu problema, se eu entendi, você quer alterar o arquivo original no disco, por exemplo, de A.png para B.png e deseja que o HTML original automaticamente aponte para esse arquivo. É isso? Se isso acontecesse, o processo de versionamento encontraria o arquivo e realizaria a troca.

Será que viagem, ou é isso mesmo? Aguardo seu feedback para poder ajudá-lo.

Olá Flávio,

Na verdade o meu problema são com os nomes da folha de estilo. Eu tenho um arquivo css que chama uma figura para background. Por exemplo: fundoDoSite.png

Quando altero essa figura a ferramenta de versionamento muda o seu nome - 123456fundoDoSite.png - isso ocorre quando faço a copia do projeto para a pasta de distribuição.

O problema que estou tendo é que o sistema de versionamento não muda o nome da figura na folha de estilo. Na minha versão de distribuição, a figura desaparece, pois no CSS ele ainda está com o nome original, mas na pasta de imagens essa figura foi renomeada.

Ficou mais claro?

Ficou sim, vamos lá.

O Grunt só realizará o versionamento (mudar o nome) das imagens apontadas no arquivo src das tag's img (ERRATA: ele fará o versionamento das imagens que você apontou no seu gruntfile). No seu caso, parece que algum CSS está apontando para um arquivo que é referenciado por alguma img. É isso?

Só confima para mim antes deu continuar com a solução.

Abraço

Não.

Só utilizo img na logo, praticamente. Botões de interface, quase todas, são inseridas na interface pelo css como background.

Para as tags imgs da página eu não estou tento problema.

Abrs.

solução!

Na sua tag usemin, além da html, adicione a propriedade css e nela indique o caminho dos seus arquivos css.:

usemin: {
       html: 'dist/**/*.html',
       css: 'dist/**/*.css'
     },

Obrigado!

Vi que você marcou minha resposta como solução e que agradeceu. Show, mas para eu ter certeza, a solução resolveu seu problema?

Resolveu sim! Desculpa responder somente agora, não tinha visto.

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