Bower Components out of web > Gulp! Refreshment for Your Frontend Assets | SymfonyCasts

Grandes notícias! Minificamos e combinamos todos os nossos CSS em apenas um arquivo. Oh,excepto para o CSS Bootstrap! Nós temos duas boas opções. Primeiro, podemos apontar o link para um Bootstrap CDN público. Ou podíamos colocar o bootstrapstyling direto em main.css. Vamos fazer isso – é muito mais interessante.

Bower!

Bootstrap é instalado graças ao Bowser. Hum, quero dizer, o Bower. Boweris the Composer é o Compositor para os activos front-end, como Bootstrap ou jQuery. É uma alternativa para baixar os arquivos e submetê-los ao seu repo.

Bower lê de, surpresa!, a bower.json file:

20 linhas bower.json

{

“name”: “knpu-gulp”,

… linhas 3 – 15

“dependências”: {

“bootstrap”: “~3.3.2”

}

E quando criei o projecto, também adicionei um ficheiro .bowerrc. Este tellbower para baixar coisas neste web/vendor diretório:

4 linhas .bowerrc

{

“diretório”: “web/vendor”

}

Isso tornou-os acessíveis ao público.

Mas agora que temos o músculo do Gulp, quero complicar as coisas. Changeth is to be vendor/bower_components:

> 4 linhas .bowerrc

{

“diretório”: “vendor/bower_components”

}

Isso vai colocar esses arquivos fora do diretório público, o que a princípio, vai causar alguns problemas. Apague esse material antigo:

rm -rf web/vendor

Cabeça do terminal e ctrl+c do gulp. Agora, execute bower install:

bower install

Se você não tiver o comando bower, basta checar os documentos deles. Está instaladoglobalmente via npm, exatamente como gulp.

Done! Agora, no meu diretório vendor/ tenho um lindo bower_componentsfolder.

Adicionando arquivos CSS ao nosso Gulp Styles Stream

Mas mesmo que eu quisesse ter 2 tags de link separadas no meu layout, eu não posso:Bootstrap não chama mais o diretório web/ home. Então, livre-se da tag itslink.

Em gulpfile.js, vamos tentar consertar as coisas! Vou começar por adicionar uma nova variável de configuração chamada bowerDir, porque vai ser muito comum referir-se a coisas nesse diretório. Defina para vendor/bower_components:

41 linhas gulpfile.js

… linhas 1 – 3

var config = {

… linhas 5 – 8

bowerDir: ‘vendor/bower_components’

};

… linhas 11 – 41

Se você abrir esse diretório, você pode ver onde o bootstrap.css filelives. Repare, não é um ficheiro Sass – apenas um CSS antigo normal. Na verdade existe uma versão Sass do Bootstrap, e você pode usá-la totalmente se quiser controlar suas variáveis Bootstrap.

Mas a questão é, podemos empurrar arquivos CSS simples através da nossa função de processamento de SassaddStyle? Claro! Vamos adicionar config.bowerDir depois /bootstrap/dist/css/bootstrap.css:

41 linhas gulpfile.js

… linhas 1 – 23

gulp.task(‘sass’, function() {

app.addStyle(, ‘main.css’);

… linhas 30 – 33

});

… linhas 35 – 41

E nem precisamos de nos preocupar em obter o ficheiro min, porque já estamos a tratar disso. Este ficheiro vai passar pelo filtro sass, mas tudo bem! Vai parecer o ficheiro Sass mais chato de sempre.

Cabeça de volta e corra gulp:

gulp

E agora, main.css começa com o glorioso código Bootstrap. E seria minificado se eu tivesse passado o --production flag.

O nosso site ainda deve ficar ótimo. Por isso, actualiza-te. Sim, é exatamente como antes, mas com um arquivo CSS a menos para baixar.

Renomeando a tarefa para estilos

E antes de continuarmos, acho que podemos fazer outra melhoria. A nossa tarefa chama-se sass. Vamos mudar isso para styles, porque seu trabalho é realmente processar estilos, sejam eles arquivos CSS ou Sass.

41 linhas gulpfile.js

… linhas 1 – 23

gulp.task(‘estilos’, function() {

… linhas 25 – 33

});

… linhas 35 – 41

Tambem precisamos mudar esse nome na default task. Ooops, e antes de iniciar o Gulp, também mudar o nome na watch task para styles:

41 linhas gulpfile.js

… linhas 1 – 35

gulp.task(‘watch’, function() {

gulp.watch(config.assetsDir+’/’+config.sassPattern, )

});

… linha 39

gulp.task(‘default’, );

Ok, agora podemos tentar coisas. ctrl+c para parar o Gulp, e reiniciá-lo:

gulp

Yes, sem erros! E o site ainda parece Tri-tástico! Veja o que eu fiz lá?

Free Press