Introdução
Antigamente, em projetos utilizando a plataforma Lumis Portal (antigo nome do produto Lumis XP) era comum a equipe designada para criação e manutenção dos arquivos estáticos submeterem as alterações diretamente no diretório tema.
O diretório tema é, de fato, o local correto para conter os arquivos estáticos do projeto. Esta pasta também contém os layout files dos projetos, que são os arquivos que contém marcações que serão utilizadas para montagens de interfaces via portal studio.
Entretanto, em um certo momento foi visto a necessidade de uma ferramenta chamada Gulp para o desenvolvimento da parte estática do projeto. Com isso, os "frontenders" passaram a não realizar mais alterações na pasta tema, e sim em um diretório que foi denominado frontend. Este formato se tornou um padrão nos projetos da Lumis.
O Gulp
O Gulp é uma ferramenta para automatizar tarefas como minificação, otimização e compilação de arquivos, que exige Node e seu gerenciador de pacotes, o npm. Por exemplo, os desenvolvedores podem trabalhar em arquivos javascripts com visualizações e indentações que os convêm, mas após a conclusão do trabalho será realizado um build que irá realizar tarefas conforme estiverem configuradas no arquivo gulpfile, sendo a minificação uma possível configuração.
A minificação de arquivos é extremamente importante para a performance da solução, visto que arquivos que passaram por este processo podem possuir um tamanho consideravelmente menor. Por exemplo, vamos comparar o tamanho da versão 3.6.0 do Jquery com relação a forma normal e a forma minificada. Você pode visualizar nos links abaixos:
https://code.jquery.com/
https://code.jquery.com/
Note que o primeiro, a versão não minificada possui 281 Kb, já a segunda tem 87,4 Kb. Pode-se notar uma redução considerável do arquivo minificado em relação ao arquivo original. Neste processo de minificação ocorre uma série de otimizações, mas que não mudam o objetivo do código escrito (talvez o código possa ser re-escrito de uma outra forma, mas sempre mantendo a lógica inicial)
É importante falar que a versão minificada não traz um problema para debug, o Chrome por exemplo possui uma opção para recuperar a visualização para um código legível. Basta utilizar F12 no site desejado, ir na aba Sources e selecionar o arquivo javascript que consta minifcado. Nesta tela basta usar a opção como abaixo:
O resultado será:
Com o Gulp você também pode otimizar o tamanho das imagens que constam no diretório estático e utilizar pré-processadores de css (scss). Esta segunda alternativa implica em você não desenvolver mais as folhas de estilo em arquivos css, mas sim em arquivos com extensão scss que serão buidados para css conforme imagem abaixo:
Os pré-processadores de css fornecem uma alta camada de reuso de componentes e contém todos os recursos de CSS, além de alguns recursos avançados, como a utilização de loops, funções, importações, variáveis e operações matemáticas, tornando a escrita CSS mais poderosa.
Mais informações em https://gulpjs.com/docs/en/
Locais dos arquivos em cada etapa
Como dito anteriormente, a pasta frontend irá conter todos os arquivos estáticos dos projetos. O build deve estar configurado para gerar todos os arquivos de saída dentro da pasta do tema, tal configuração está declarada no arquivo de configuração gulpfile.js e na task que você irá utilizar.
Se houver dúvidas sobre a task que deve ser utilizada entre em contato com o responsável do projeto ou com os responsáveis por manter o diretório estático. Por fim, para de fato executar o build, por linha de comando basta estar no diretório que contém o arquivo gulpfile.js e executar: gulp <NOME_TASK>
Este procedimento irá gerar os arquivos no diretório tema. Contudo, este procedimento ainda não é suficiente para a equipe de desenvolvimento utilizar tais recursos. É necessário que os arquivos estejam no diretório lumis-theme, que não é um diretório de um módulo específico. Se você estiver com um diretório estático configurado e estiver utilizando, por exemplo, o web server Apache, então o diretório lumis-theme estará presente no diretório raiz do Apache. Caso contrário, esse diretório irá existir no diretório raiz do application server, por exemplo, Tomcat. O processo de deploy do LumisXP é responsável por copiar os arquivos do tema do projeto para o diretório lumis-theme correspondente.
Em resumo, o desenvolvimento do projeto estático deve ocorrer na pasta frontend que irá buildar para a pasta tema (o gitignore do projeto deve estar configurado para ignorar essa pasta). Após isso, é necessário um deploy através das configurações do LumisXP para que os arquivos sejam copiados para o diretório lumis-theme. A ilustração abaixo retrata este processo:
Autor: Rodrigo Santana