Modificações no Gerenciador de Tarefas (gulpfile.js)

[ghost]

Oi pessoal, tudo bem? Eu dei uma breve analisada no funcionamento do gulpfile.js e percebi que existem alterações interessantes que posso fazer para agilizar e otimizar as tarefas do Tableless, segue abaixo minhas sugestões:

• Pensei em tornarmos a compilação do SASS mais inteligente alterando a seguinte task. Da qual ela procura por um arquivo .sass na raiz do tema, neste caso o arquivo style.sass.

Mas qual é o problema? Desta maneira teríamos que adicionar manualmente todo arquivo .sass criado no diretório ./wp-content/themes/tableless/assets/css/ no arquivo style.sass, isso faz com que percamos tempo dando imports demasiados no style.sass e prevenimos eventuais bugs, como esquecer de dar o @import no arquivo, por exemplo.

Eu proponho, criarmos um watcher no diretório ./wp-content/themes/tableless/assets/css/, assim, sempre quando criarmos ou alterarmos um arquivo .sass a task será executada e o @import será criado automaticamente (ignora se o arquivo já foi importado), gerando o style.css final já compilado na raiz do tema, isso é feito através do plugin gulp-concat.

• Minificação automática das imagens para diversos formatos, tais como: JPEG, PNG, GIF e SVG. Isso é feito através do plugin gulp-imagemin, de preferência, criar-mos uma rotina para que sempre que uma imagem for modificada ou criada no diretório ./wp-content/themes/tableless/images/, a minificação ocorra apenas para aquela imagem (desta maneira economizamos tempo e memória da máquina, não tendo que re-minificar todas as imagens, sempre que alguma for alterada), isto é feito através do plugin gulp-changed.
• Por mais atencioso que seja o desenvolvedor, eventualmente nós precisamos conferir os arquivos compilados ou as imagens minificadas em tal período do dia, mas como podemos consultar isso? A maneira mais prática, na minha opinião, é criando um log na linha de comando, nos informando quais arquivos foram atualizados naquela requisição, isso é feito através do plugin gulp-print.

Eu ainda não comecei a "codar", pois gostaria de saber a opinião da comunidade a respeito dessas sugestões. Qualquer dúvida ou esclarecimento não exitem em me questionar!

Abraço, João Paulo.

[ghost]

@diegoeis Eu queria saber o que você acha da seguinte estrutura de arquivos no diretório ./wp-content/themes/tableless/assets/css/? Estou aberto a sugestões, apenas queria esclarecer que é preciso reestruturar o diretório para que eu consiga tornar a compilação dos arquivos .sass automática.

tableless/
└── assets/
    ├── css/
    │   ├── base/
    │   ├── layouts/
    │   ├── modules/
    │   ├── pages/
    │   ├── _helpers.sass
    │   └── _mixins.sass
    ├── fonts/
    └── js/

Conceito

Dei uma analisada na estrutura e como você (ou o responsável) nomeou os arquivos seguindo uma arquitetura similar (talvez até sem intenção) ao padrão do SMACSS, imaginei que seria uma boa ideia, estruturarmos dessa maneira visando o estado atual do Tableless.

Acho que dessa forma conseguimos trabalhar da melhor maneira (possível) hoje com o Gulp e o Sass juntos, tornando assim, uma compilação mais dinâmica sem a necessidade de arquivos fantasmas ou repetição de código fonte e uma compreensão maior do que cada arquivo realmente faz.

Repetindo, estou aberto a sugestões e até se a comunidade preferir, poderíamos discutir uma estrutura personalizada para o portal.

[ghost]

@diegoeis Se você quiser dar uma olhada para ver como ficaria o funcionamento (neste caso simples) da compilação e da concatenação dos arquivos .scss dê uma olhada neste repositório que eu criei.

[diegoeis]

Achei meio estranho as folders base/, layouts/ e etc.. Vai ter apenas um arquivo .sass lá dentro? A gente vai ganhar só o esquema de concatenação?

outra coisa, como faz com os arquivos que não são concatenados, como o single? Não tem como fazer sem precisar fazer as pastas?

Adorei a ideia, cara!

[ghost]

A ideia é colocar-mos esses arquivos :point_down: em ordem dentro dos diretórios base/, layouts/, modules/ e pages/.

Imagino que já tenha uma ideia de como funciona o SMACSS, porém vou te passar um resumo das responsabilidades de cada diretório, já citando aonde ficaria cada arquivo.

Base

Vão todos os arquivos básico utilizados pelo Tableless, tais como o _base.sass, _fonts.sass e talvez o _prettify.sass serão colocados aqui.

Layouts

Aqui serão colocados os arquivos _header.sass, _footer.sass e quem sabe posteriormente um _widget.sass e etc... Quase todos os arquivos da Hierarquia de Template do WordPress ficam centralizados nesse diretório, exceto peculiaridades de alguma página que serão tratados na sessão Pages.

Modules

O nome é bem auto-sugestivo, e basicamente, tudo que for considerado um módulo vai nesse diretório como os arquivos _sidebar.sass, _search.sass e _btn.sass.

Módulos são elementos re-utilizáveis dentro de alguma aplicação, algo que se repete constantemente (do qual segue um padrão).

Pages

Aqui vão os CSS das páginas do WordPress como por exemplo single.sass e _home.sass. Vale lembrar que o CSS das Páginas de Template são guardadas nesse diretório. Geralmente aqui, vão as particularidades de uma página algo específico do mesmo.

Muitas vezes uma página não precisa de um CSS (seguindo essa arquitetura), pois normalmente os estilos já foram criados nos Módulos ou Layouts e o desenvolvedor apenas declara a classe no HTML.

Themes

Não vejo necessidade de utilizarmos o diretório Themes, pois o Tableless não trabalha com multíplos estilos, e diferentes "Layouts" dentro do portal, por exemplo:

O header na home é preto com a logo, os links e um botão de busca, já na single.php o menu seria vertical com a logo no centralizada verticalmente, um botão no estilo nav-bars para mobile no topo, e no rodapé um botão de compartilhamento.

State

Não cheguei a me aprofundar no código, porém eventualmente o diretório State pode vir a calhar. Nele ficaria os "estados" de algum elemento HTML, por exemplo:

Um módulo botão fica verde com o texto roxo quando o slide no qual o envolve está ativo, então via JavaScript adicionados a classe is-green-purple ou algo assim, entende?

Os arquivos _helpers.sass e _mixins.sass ficam aonde estão, eu pensei em torná-los facultativos, os importando apenas quando forem necessários.

Pergunta!?

Você comentou que a single.sass não é concatenada no arquivo final style.css, né? Ela é um arquivo separado. Por quê?

Talvez se puder esclarecer isso pra mim, eu posso sugerir alguma outra alternativa para o portal, assim podemos avaliar e filtrar qual é a melhor opção. Obviamente se tiver alguma ideia, estou todo ouvidos :+1: Sei lá, talvez alguma metodologia interessante que você viu em outro site e acha que poderiamos aplicar no Tableless.

Que massa! Fico feliz que gostou da ideia, estou aqui pro que precisar é só dar um grito :facepunch:

[ghost]

Antes que eu me esqueça, nós não só ganharemos na concatenação, mas também na agilidade, durante o desenvolvimento. Ignorando tarefas triviais como dar @import demasiados e sem necessidade, uma flexibilidade maior no código podendo aplicar o DRY mais livremente.

[diegoeis]

@iszwnc o single é separado ele só é útil nas páginas de texto. Não precisamos carregar o código do single na home ou em qualquer página, por exemplo. Sacou?

Ali no seu texto você falou que o _sidebar.sass era um módulo, na verdade ele deveria ficar no layout. Vários módulos montariam a sidebar. Mesma coisa com o search.

Outra coisa: você falou que a gente ganha na agilidade, mas não me parece muito custoso colocar um @import lá quando vier um CSS novo. Acho que nunca vai vir um CSS novamente.

Eu só fico pensando se não estaríamos complicando a estrutura de diretórios só por causa disso. Tipo, tá muito fácil de entender como está hoje e não dá trabalho. Temos apenas um manifesto, que mesmo sendo manual, é só um.

[ghost]

@diegoeis eu pensei nessas alterações a longo prazo, pois na minha opinião seriam mais vantajosas pro portal. Mas se você e toda a comunidade não se incomodam com a atual estrutura e acham que a minha sugestão complicaria mais do que ajudaria, então podemos manter como está, e eu sigo contribuindo em outras Issues ;)