Less.js: Suporte a globbing de arquivos para @imports

Legal .. embora apenas o nó (não o navegador) e não pense que isso ajudará outros
questões. Poderia ser útil, eu acho.. normalmente você teria uma cadeia de dependências
então você não iria querer tudo em ordem alfabética.

Sim, não há como o navegador saber quais arquivos solicitar, então parece um não inicial.

bem, eu não descartaria isso apenas porque se aplicaria apenas ao nó, mas também não o vejo como uma solicitação de recurso particularmente importante.

@agatronic em relação à cadeia de dependências, eu estava conversando com alguém sobre a mesma coisa no encontro do nó ontem. Acho que isso é útil para bibliotecas de componentes/módulos, mixins etc. como no exemplo. E sim nó só era o que eu estava pensando.

Acabei de ler que a caneta permite que você especifique um diretório e, se você fizer isso, procurará um index.sty - eu gosto disso.

quanto à importação de todos os arquivos em um diretório, só é realmente útil se os arquivos contiverem apenas mixins (sem conteúdo).. porque a ordem importa. não tenho certeza que é um cenário da vida real agora?

Eu gosto da ideia do índice. Essa é uma boa maneira de fazer isso.

só é realmente útil se os arquivos contiverem apenas mixins (sem conteúdo).

Usamos muito desenvolvimento baseado em componentes. A maioria dos nossos componentes Less tem dependência zero de outros arquivos. É claro que a ordem importa em CSS e com padrões de design mais tradicionais, então acho que você está certo. A maioria das pessoas provavelmente não usaria isso do jeito que eu usaria - o que significa que eles provavelmente não usariam tudo. Mas a ideia do índice da caneta é uma solução interessante para isso.

Isso não é uma prioridade, mas acabei de ver isso e queria adicioná-lo como referência: https://github.com/chriseppstein/sass-globbing

Eu sou um grande fã do Sass e uso o plug-in de importação glob de Chris Eppstein o tempo todo (colegas de equipe que estavam em máquinas Windows não podiam usá-lo, então tenha isso em mente).

Eu estive procurando um equivalente em LESS, alguém vê algo parecido?

Sim, eu sou um fã deste plugin com certeza. Acho que quem já usou globbing sabe como é bom trabalhar com ele, mas é uma daquelas coisas que parece "bom de se ter" até você realmente usá-lo. Não consigo imaginar tentar fazer builds sem ele agora. Você pode usar assembly-less , ele suporta globbing (eu sou um dos mantenedores dele...)

Btw @josephspens Criei este projeto ontem para converter SASS para LESS. Como prova de conceito, converti os arquivos .scss do bootstrap-sass e da fundação para LESS, ambos os exemplos estão na pasta ./test/ . Fiquei realmente surpreso com o quão perto cheguei de converter todos os arquivos Bootstrap .scss de volta para MENOS. Tente fazer uma diferença entre os arquivos sass convertidos e os arquivos "nativos" sem bootstrap (v2.3.1) - não é um recurso completo, mas economiza muito tempo.

Se você acabar tendo que usar LESS em um projeto, talvez valha a pena conferir. Para alguns recursos de linguagem, não deve ser difícil reverter o processo de conversão de LESS para SASS

@lukeapage , você mencionou aqui https://github.com/cloudhead/less.js/issues/1181#issuecomment -13546979 que isso só seria útil para bibliotecas de mixin, e isso era verdade na época.

No entanto, agora que temos <strong i="8">@import</strong> (reference) , esse recurso será útil para todas as folhas de estilo que podem ser referenciadas.

Além disso, pensei no conceito index.less e criei uma solicitação para ele: https://github.com/cloudhead/less.js/issues/1339. Mas não acho que esses recursos sejam mutuamente exclusivos ou mesmo necessariamente relacionados. O globbing permite padrões de inclusão e exclusão, portanto, você tem muito controle dos padrões de globbing na própria instrução de importação.

Eu acho que o recurso index.less resolveria um desafio totalmente diferente, que é mais como definir dependências - realmente útil para módulos, componentes, temas etc.

@jonschlinkert eu concordo

@lukeapage você pode me dar uma dica sobre quais lugares no código precisam ser modificados (além de tree/import/.js?), ou sugestões para o que preciso considerar, por exemplo, isso deve ser específico para o nó, etc. ? Eu poderia dar um tiro.

Este seria um ótimo recurso. Atualmente, tenho uma grande e longa lista de folhas de estilo no meu arquivo bundle.less :

<strong i="7">@import</strong> 'pages/home';
<strong i="8">@import</strong> 'pages/login';
<strong i="9">@import</strong> 'pages/404';
//etc

Seria útil condensar isso em:

<strong i="13">@import</strong> 'pages/*';

ou similar.

Stylus permite que você faça isso -- <strong i="5">@import</strong> 'partials/*.styl -- e eu estava usando isso _todo_ o tempo. Estaria muito interessado em ter isso em Less também, para me aliviar da tediosa tarefa de contabilizar manualmente as importações.

Isso + importação explícita + não duplicados seria realmente útil:

// Import specific file
<strong i="6">@import</strong> "extras/specific.less"
// Import all others, specific file is skipped in this glob
<strong i="7">@import</strong> "extras/*.less"

@lukeapage Eu gostaria de fazer um plugin para isso, você pode me dar algumas dicas sobre por onde começar? THX

Desculpe Jon por ter perdido seu primeiro pedido de ajuda, não foi intencional.
Acho que seria melhor colocá-lo no núcleo (porque um plugin gostaria de
substituir o acesso padrão ao arquivo do nó - e você pode herdar e implementar
mas isso impede que outro plugin seja construído em cima dele, a menos que eles sejam
muito cuidado), de qualquer forma eu pelo menos adicionaria suporte ao núcleo para importar
vários arquivos de uma importação. É possível hoje, o novo plugin bower
faz isso, mas é um pouco hacky. Estará em contato.

Ha, eu não sabia que já tinha comentado, então isso faz de nós dois lol. não se preocupe em tudo eu sei como é.

pode ser melhor colocá-lo no núcleo

Parece bom. Eu ficaria feliz em ajudar com isso também. Não se preocupe de qualquer maneira.

Ok, estive pensando e é assim que eu faria isso.

1. Adicione um expandToFilelist ao gerenciador de arquivos abstratos. Por padrão deve
   retorna um array contendo o nome do arquivo que é dado. Não tenho certeza se deveria
   ser síncrono ou assíncrono - provavelmente não importa - torná-lo assíncrono?
2. No gerenciador de importação, chame essa função quando tiver um gerenciador de arquivos. Então
   percorrer todos os arquivos e fazer em cada um o que você estava fazendo em 1.
3. Eu faria o gerenciador de importação esperar até que tivesse os resultados de todos os arquivos
   antes de ligar de volta para o retorno de chamada (que está no visitante de importação) dessa maneira
   podemos manter uma ordenação consistente. A chamada de volta agora levaria um
   array contendo todos os argumentos (por exemplo, o nome completo do arquivo deve ser recebido uma vez
   por arquivo).
4. Pode haver complicações no visitante de importação em torno do contexto - não
   certo
5. Uma importação irá agora ter um array de raízes (ou talvez um array de raízes
   e nomes de arquivos). Ele precisará avaliar todas as raízes em sua função eval e
   retornar uma raiz combinada .. ou talvez criar um novo conjunto de regras usando uma matriz de
   as raízes evald, se isso funcionar
6. Compile e teste - tudo deve funcionar
7. Altere o gerenciador de arquivos do nó para implementar expandToFilelist se o nome do arquivo
   contém *
8. Adicione testes e adicione testes às exclusões na seção Jasmine do
   gruntfile, já que não podemos implementar para navegador
   Voilá!

Só queria comentar, como solução alternativa, você pode usar gulp com gulp-concat se estiver usando o gulp como sua ferramenta de compilação.

gulp.src([
    'src/styles/main.less'
    ,'src/controls/**/*.less`
])
.pipe(concat('bundle.less')
.pipe(less())
...

Esta é efetivamente minha estrutura de diretórios... (embora minha estrutura seja um pouco diferente). Eu esperava que esse fosse um recurso interno, pois mesmo que apenas o nó fosse muito útil.

Apenas pensei em marcar +1 aqui... é um padrão bastante comum. Há também várias soluções fáceis para evitar o problema do pedido.

+1

Eu não disse isso, mas apreciaria a opção (mesmo que apenas no lado do servidor) ...

oh, a ironia aqui (biblioteca primária tornou-se js porque a mesma biblioteca poderia ser usada servidor e cliente, apenas para adicionar um recurso somente servidor).

O mecanismo de análise pode manter a paridade. Isso ainda é uma grande vantagem que não tem nada a ver com o que estamos discutindo.

+1

Como se já não houvesse o suficiente: +1

+1 sério

+1

:+1:

+1

+1

+1

+1

:+1: por favor!

+1 jesus ficaria feliz com o suporte a curingas.

Ei pessoal, o feedback é ótimo, mas +1 s não vão fazer esse recurso acontecer mais rápido. Ele está marcado como pronto para ser implementado e, quando alguém o implementa, ele será implementado.

+1 jesus ficaria feliz com o suporte a curingas.

Acho que é seguro dizer que se Jesus escolhesse um pré-processador, seria Menos.

Como não posso mais esperar a resolução desse problema, escrevo o plugin que faz isso e o uso para meus projetos. https://github.com/just-boris/less-plugin-glob
Menos permite criar carregadores de arquivos personalizados para @imports . Eu criei este que resolve importações com globs no caminho de importação. Todos os comentários serão apreciados.

@just-boris Oi, eu queria saber como eu poderia instalar isso além do NPM,

Estou recebendo os seguintes erros ao usar o NPM:

npm ERR! 404 'less-glob-plugin' não está no registro npm.
npm ERR! 404 Você deve bugar o autor para publicá-lo
npm ERR! 404
npm ERR! 404 Observe que você também pode instalar a partir de um
npm ERR! 404 tarball, pasta ou url http ou git url.

Obrigado antecipadamente, isso pouparia uma grande dor de cabeça.

@tonyflp , desculpe, houve um erro de digitação, você deve instalar less-plugin-glob .
Menos aceita apenas plugins nomeados na notação less-plugin-*

@just-boris Isso funcionou muito bem, obrigado por isso.

Nenhuma atualização para este recurso?

just-boris eu uso grunt-contrib-less eles têm um exemplo de como carregar plugins assim:

plug-ins: [
new (require('less-plugin-autoprefix'))({navegadores: ["últimas 2 versões"]}),
new (require('less-plugin-clean-css'))(cleanCssOptions)
],

Como eu carregaria seu plugin maravilhoso aqui para que ele funcione com menos grunt-contrib?

Grande :+1: para o recurso

@vospascal respondeu no meu repositório

;) thnx @just-boris eu vi :-) :+1:

Ainda esperando por este recurso :+1: . Obrigado, @just-boris.

@just-boris obrigado! quero dizer obrigado :-)

Esse seria um recurso muito útil para mim, pois prefiro agrupar todos os meus componentes em um único local, em vez de ter todos os arquivos Less em um único local. Isso leva a menos arquivos existentes em todo o lugar, o que seria um pesadelo para manter uma lista manual de importações.

Para quem usa Gulp para construir seus arquivos Less, tive sucesso usando o plugin gulp-inject para criar automaticamente as instruções @import no meu arquivo Less principal. Eu fiz um pequeno artigo sobre isso aqui: http://www.michaelbromley.co.uk/blog/425/automatic-import-of-lesssass-files-with-gulp

Para globbing em menos, você pode simplesmente executar isso em seu projeto,

npm install less-plugin-glob --save-dev

em seguida, adicione isso ao seu Gruntfile no grupo de opções da sua tarefa menos

plugins: [require('less-plugin-glob')]

O resultado é algo assim:

···
options: {
    compress: true,
    yuicompress: true,
    optimization: 2,
    cleancss: true,
    sourceMap: false,
    sourceMapFilename: 'css/maps/style.css.map',
    plugins: [require('less-plugin-glob')]
},
···

Agora em seu arquivo .less você pode escrever isto:

···
<strong i="15">@import</strong> "commons/**/*";
<strong i="16">@import</strong> "basic/**/*";
···

Vim aqui me perguntando se as importações glob eram suportadas, mas como estou usando alguns scripts de shell de uma linha em vez de grunt/gulp para meu processo de compilação. Acabei usando apenas find & cat e minha fonte fica mais limpa do que qualquer uma das alternativas. Menos continua a ser incrível.

# src/index.less + src/foo/bar.less + ... = dist/index.css
find -X src -type f -name '*.less' | xargs cat | lessc - | cleancss --s0 >dist/index.css

+1

Realmente surpreso que isso não tenha acontecido até agora. O Gulp tem suporte para esse recurso, pelo menos.

@davidcalhoun Leia o primeiro post deste tópico.

Mesmo, até onde eu sei, a maioria das pessoas está compilando seus arquivos LESS em CSS, eu não conheço muitos sites que estão fazendo com que o navegador interprete o LESS diretamente? Para aqueles que desejam depurar, podem usar mapas de origem

@just-boris Não consigo fazer seu plugin funcionar... Suponho que estou fazendo algo errado.

Alguém mais conseguiu fazer funcionar?

Não recebendo nenhum erro... apenas nenhuma saída quando tento usar globbing.

gulp.task( 'styles', () => {
  return gulp.src( [ 'app/styles/main.less' ] )
    .pipe( $.less( {
      plugins: [ require( 'less-plugin-glob' ) ],
    } ) )
    .pipe( gulp.dest( 'dist/styles' ) );
} );

// main.less
// Each line below is tried on it's own of course.
<strong i="10">@import</strong> "app/module/waffle.less"; // Works
<strong i="11">@import</strong> "app/module/**"; // Does not work.
<strong i="12">@import</strong> "app/module/**/*"; // Does not work.
<strong i="13">@import</strong> "app/module/**/*.less"; // Does not work.

@SpencerCarstens É melhor levantar o problema no próprio repositório do plugin.

@seven-phases-max :+1:

Eu esperava alcançar um público maior, mas você está certo.

@seven-phases-max Você não pode integrar o glob-plugin dentro do less?

Ele se integra bem, mas não parece fazer nada.

Se eu comentar o plugin, meus erros menos corretos na importação
globagem.

Quando eu coloco de volta, o erro para.

Então, eu suponho que está fazendo alguma coisa.

Na quarta-feira, 5 de agosto de 2015, Mattia Astorino [email protected]
escrevi:

@SpencerCarstens https://github.com/SpencerCarstens Você não pode integrar
o glob-plugin dentro de menos?

—
Responda a este e-mail diretamente ou visualize-o no GitHub
https://github.com/less/less.js/issues/1181#issuecomment -128262749.

Cordialmente,

Spencer Carstens

@equiusocio

Você não pode integrar o glob-plugin dentro do less?

Se você quer dizer "por que não colocar isso no núcleo" ... Então, bem, a abordagem Less atual (menos ou mais configurada em várias discussões em vários tópicos aqui) é aproximadamente: "nunca coloque um recurso no núcleo, _antes_ torna-se absoluta e totalmente evidente que o recurso pertence lá e não há outras maneiras". Ou seja, se algo pode ser implementado como um plug-in, _deve_ ser implementado como um plug-in (é por isso que, por exemplo, mesmo a instalação clean-css de vida longa no núcleo foi movida do núcleo para o plug-in correspondente) .

@seven-phases-max ok, obrigado. Eu gosto deste.

Fechando conforme implementado no plugin @just-boris .

+1

+1

Fale sobre ressuscitar tópicos antigos

O que esses +1s devem indicar? O plugin não funciona?

O +1 indica que você também quer ou apoia

Apoiar o quê? É isso que eu estou dizendo. Isso foi resolvido e o assunto está encerrado. Então eu estou perguntando o que está sendo +1?

Recebo esses e-mails há mais de 2 anos, qual é o problema aqui ..