Name: Agence Web Tremplin Numérique
Price range: $$$

eu sabia GruntJSGenericName sem nunca ter usado, mas eu teria que ouvir de um desenvolvedor Symfony me dê a massa para que eu procure esta solução. Primeiro, substitua Assético pela GruntJSGenericName foi para mim uma solução para fazer meus projetos funcionarem Symfony com HHVM. agora o servidor PHP de Facebook funciona perfeitamente com Assético mas encontro cada vez menos motivos para continuar usando Assético. Finalmente, o uso de Grunhido, um plug-in baseado em Nó JS, leva a maioria dos desenvolvedores a usar Caramanchão, outro plugin para gerenciamento de dependências. Nós vamos falar sobre Caramanchão mais baixo. Vamos dar uma olhada rápida nos prós e contras.

Atenção ! Antes de começar a migrar sua aplicação, aconselho você a versionar seu código e fazer alguns testes. A leitura de todo o artigo antes de embarcar nesta missão de longo prazo é altamente recomendável.

resumo

Introdução

Assetic, o amigo incompreendido

De minha parte, considero queAssético é mal interpretado e mal utilizado. Vou explicar meus pensamentos para você. (Além disso, corrigi este artigo após um mal-entendido de minha parte, obrigado a Manuel Klein por seu feedback).

Benefício

O uso deAssético permite que você cancele o cache nos recursos porque o nome dos recursos JS e CSS gerados muda cada vez que você executa o comando “ativo:despejo”. Uma certa vantagem!

desvantagens

Assetic oferece poucas opções para configurar como os recursos são gerados.
É necessário instalar pacotes PHP para gerar recursos exóticos como LESS. O código PHP é instalado no fornecedores enquanto esta tarefa é útil apenas para o cliente. Não para o servidor. Além disso, aumenta o número do seu projeto.
Código PHP é necessário no modelos Galho usando Assético ou quase todos eles. Considerando que com o Grunt, o recurso compilado será chamado pelo nome que você deu.

Realmente use o Assetic em seus modelos

muitas vezes vejo no modelos Galho que me deparo, recursos vinculados às vezes via Assético, às vezes através do ativos de Sinfonia.

# Usando Assetic
@NamespaceMyBundle/Resources/public/css/main.css
# Ativo não utilizado, usando Ativos
/bundles/namespacemy/css/main.css

No primeiro caso, Assético realmente se aplica. No segundo caso, Assético está completamente escondido para não usar o ativos de Symfony. O uso de ativos também é um erro na minha opinião, pelo menos para acesso aos recursos JS e CSS. Fim do parêntese...

Grunt JS o compilador tão flexível!

GruntJSGenericName baseado em Node.js. É uma ferramenta do lado do cliente que usa módulos para executar várias ações, como concatenação de arquivos, minification, compactação de imagem, compilação de LESS, TypeScript… Ao contrário Assético, você terá que definir algumas configurações, mas fique tranquilo, esse investimento inicial será recompensado e no final muito mais rápido do queAssético.

Introdução ao Bower, o composer.json dos recursos

GruntJSGenericName é bom e vem se colocar no mesmo segmento queAssético. Mas desde que você use Node.js, bem como usar Caramanchão ! É um gerenciador de dependências. Simplificando, você define os recursos que precisa, "tal biblioteca em tal versão" e Caramanchão cuida de obter a versão que você deseja. Claro, assim como composer.json para PHP, você pode adicionar intervalos de versão. Se você deseja uma biblioteca na versão 3.3., *Bower obterá a versão mais recente disponível. Uma solução para atualizar facilmente esses recursos. Um problema recorrente em nossos projetos padrão porque temos (tivemos!) uma tendência de baixar uma versão e nunca atualizá-la depois. Não tínhamos as pequenas atualizações que às vezes são tão úteis.

Tecnicamente, Caramanchão usa o arquivo bower.json. Sua sintaxe é muito simples. Exorto você a usá-lo, mesmo que possa continuar sem ele. O arquivo precisará ser versionado ao contrário dos recursos que Caramanchão virá baixar para você. Para começar, darei um exemplo abaixo.

Versionamento de recursos compilados

De minha parte, adquiri o hábito de não criar versões de meus recursos compilados para Assético mas eu decidi fazer o oposto para GruntJSGenericName. Já que fico sem recursos para administrar por Caramanchão (ver Introdução ao Caramanchão), vou compilar meus recursos e gitters. Dessa forma, posso implantar rapidamente meu aplicativo. Nunca tive feedback sobre esta prática, mas me parece respeitável porque duas operações são canceladas no momento da implantação (recuperação de recursos com Caramanchão e compilar com GruntJSGenericName), bem como a necessidade de Node.js na máquina dele.

Remova o Assetic do nosso projeto Symfony

Assético foi escolhido para ser o componente padrão responsável pela compilação dos recursos. Esteja ciente de que, apesar de tudo, é muito fácil de remover.

Excluir blocos Galho digitar javascript et folha de estilo. Eles não são necessários. Deixe de lado os arquivos que você estava usando. No futuro, os arquivos que você gostaria de usar serão definidos no arquivo Gruntfile.js. Veremos isso um pouco mais tarde.

#app/config/config.yml
# Remova a configuração do assetic. Haverá também alguns em config_prod.yml, config_dev.yml e outros arquivos enviados
ativo:
 depurar: “%kernel.debug%”
 use_controller: falso
 Pacotes: []
 filtros:
 CSS reescrever: ~

#app/AppKernel.php
# Pare de carregar o AsseticBundle excluindo a linha do AppKernel
...
novo SymfonyBundleAsseticBundleAsseticBundle()
...

# composer.json
# Remova o pacote de recursos
...
“symfony/assetic-bundle”: “~2.3”
...

Pronto, você desativou Assético globalmente. Desta forma, não espere mais encontrar o comando ativo:despejo et ativo:assistir.

Como o Grunt JS funcionará dentro do nosso projeto?

Teremos que configurar nosso projeto com três arquivos:

package.json que nos permitirá instalar os plugins Node.js (GruntJSGenericName e suas contribuições);
bower.json informar sobre dependências a serem resolvidas para compilar nossos recursos;
Gruntfile.js qual você estará trabalhando mais. Ele conterá todas as ações possíveis e/ou a serem realizadas para compilar parte ou todo o seu projeto.

package.json para instalar o Grunt JS

{
“dependências”: {
"grunhido": “^0.4.5”,
“sem grunhidos”: “~0.11.0”,
“grunhir-contribuir-feio”: “^0.6.0”,
“load-grunt-tasks”: “^0.6.0”
},
“devDependências”: {
"grunhido": “^0.4.5”
}
}

Primeiro, use este conteúdo. Requer a instalação de GruntJSGenericName e contribuições, duas das quais (grunt-contrib-less et grunt-contrib-uglify) permitirá que você compile seus arquivos e arquivos JavaScript menos.

bower.json para resolver minhas dependências (bootstrap, font-awesome, …)

{
"ignorar": [
“**/.*”,
“node_modules”,
“bower_components”,
"Teste",
"testando"
],
“dependências”: {
“bootstrap”: “3.3.*”
}
}

Aqui está um arquivo mínimo. No meu caso, solicitei que a versão mais recente do ramo 3.3 do Bootstrap ser baixado. Por padrão, quando você faz um instalação de caramanchão suas dependências serão instaladas na pasta bower_components. Através do uso de .bowerrc você pode alterar a pasta de destino. Você pode encontrar mais informações no site da Bower.

1 2	# Instalar dependências usando o Bower instalação de $ bower

Gruntfile.js – Onde tudo começa

Todos os comandos e ações que você gostaria de adicionar no arquivo Gruntfile.js. Entre outras coisas, você pode compilar arquivos menos et insolência, concatenar qualquer tipo de arquivo, compilar TypeScript, minificador Arquivos JavaScript, imagens, bem como arquivos HTML. Você também pode redimensionar imagens e copiar arquivos (como fontes).

Hoje vou apenas mostrar como compilar arquivos .menos e minificar arquivos . Js. Ações que realizo todos os dias e que hoje me permitem usar facilmente esta ou aquela parte do inicialização. Em vez de usar todos inicialização quando tudo que você precisa é glifos, pode ser interessante trabalhar em uma biblioteca customizada.

módulo.exportações= função (grunhido) {
requerer('load-grunt-tasks')(grunhido);
grunt.initConfig({
menos: {
dist: {
opções: {
comprimir: verdadeiro,
yuicompress: verdadeiro,
otimização: 2
},
arquivos: {
“web/css/main.css”: [
“bower_components/bootsrap/dist/css/bootstrap.css”,
“src/Namespace/MyBundle/Resources/public/css/main.less”
]
}
}
},
enfear: {
opções: {
mangle: falso,
sourceMap: verdadeiro
},
dist: {
arquivos: {
'web/js/main.js': [
'src/Namespace/MyBundle/Resources/public/js/main.js',
]
}
}
}
});
grunt. registerTask('padrão', ["menos", "enfear"]);
};

Aqui está um arquivo funcionando perfeitamente. Eu também o uso em um projeto com pouco quadro porque é um API. Assético foi no meu caso bastante inútil. Então preferi ficar sem usar uma ferramenta externa ao servidor e entregar os recursos perfeitamente construídos no momento da implantação.

Vamos descrever as ações para Gruntfile.js

No arquivo anterior, configuro as duas contribuições de GruntJSGenericName (_menos _e enfear) que instalei graças ao meu package.json. Você notará que os plugins são facilmente distinguidos uns dos outros. Veja o caso da extensão menos.

Cada contribuição Grunhido que você vai usar deve ser declarado por meio de uma palavra-chave definida para a contribuição. Exemplo, para grunt-contrib-less a palavra chave é menos. Nesta parte, você pode definir metas. Sob o termo alvo Compreendo Subparte. Em um caso concreto, poderíamos definir um alvo inicialização para compilar a biblioteca de mesmo nome da fonte menos. Poderíamos definir outro conjunto dist para compilar os fontes do nosso projeto. O uso de vários subconjuntos não é uma necessidade, mas você terá a oportunidade de usá-los posteriormente quando usar o relógio de contribuição para economizar tempo.

Então a estrutura dos subconjuntos da mesma extensão são ISO. No Contrario, a estrutura de cada contribuição é diferente. As contribuições padrão geralmente são apresentadas com muitos exemplos. Plugins oficiais estão disponíveis no repositório GitHub.

Voltemos ao nosso exemplo e à configuração da compilação dos nossos arquivos .menos. No jogo arquivos adicionamos o nome dos arquivos finais como chave e, como valor, um array de arquivos de entrada para compilar. Acho que não é necessário detalhar mais porque a sintaxe é bastante intuitiva.

A contribuição enfear usado para concatenação, minificação e compactação de arquivos JavaScript, usa a mesma estrutura. Nesse caso, é bastante simples usar suas duas contribuições.

A arte de compilar

E agora compilons nossas fontes. Com Assético, executamos este comando:

1	php app/console assetic:dump

Agora nós removemos AsseticBundle. Não temos mais este pedido. Então, vamos executar nosso plugin de Node .

grunhido

Veja bem, ainda não é muito complicado... Nesse caso, as tarefas que serão executadas serão as indicadas para o perfil padrão. Foi definido na última linha.

1	grunt. registerTask('padrão', ["menos", "enfear"]);

Você teria um perfil muito bem definido javascript quem não teria executado enfear.

1	grunt. registerTask('javascript', ['enfear']);

Caso você pudesse ter executado o comando Grunhido com o nome do perfil depois.

1	grunhir javascript

Você pode definir quantos perfis quiser. No caso do meu perfil javascript, o interesse é menor porque você também poderia ter feito a próxima chamada.

1	grunhir feio

Conclusão

Agora você sabe como compilar seus recursos. Se você ainda não compreendeu todas as sutilezas, deve ser capaz de apreciar rapidamente toda a flexibilidade oferecida por Grunhido em relação aAssético. Além dos recursos típicos como javascript e css, você também pode processar fontes, imagens... Um recurso que rapidamente me conquistou.

A verdadeira vantagem de Grunhido é a sua flexibilidade a sua utilização. Grunhido et Caramanchão entre eles incorpora uma alternativa para Assetic. Sem Caramanchão você ainda pode trabalhar com Grunhido mas a experiência não será total.

Espero que este artigo permita que você entenda facilmente o uso de Grunhido. Seja corajoso, você está quase lá!