Recentemente Gole. Ganhando grande popularidade, e é claro por que. É mais rápido, mais bonito e mais fácil do que Grunhido.. Eu tive que trabalhar com ele com frequência, mas sempre levei soluções prontas e não entendi totalmente como ele fez tudo. Neste fim de semana, decidi desmontar e fechar este pequeno problema. Tome isso e fale hoje.
O que é gole?
Gulp é uma ferramenta de montagem frontal. Ele permite que você automatize tarefas de repetição (montagem e minificação de arquivos CSS e JS, iniciar testes, reiniciar navegador e outros). Assim, o Gulp acelera e otimiza o processo de desenvolvimento da web.
Instalando o Gulp.
Instalar Gulp é fácil o suficiente. Se algo não funcionar, escreva nos comentários ou bandesse seu problema. Então, para instalação, você precisa fazer 3 etapas:
- Instale Gulp Global.
- Instale Gulp como Devdeependências (dependências para o desenvolvimento)
- Crie um arquivo gulpfile.js
O primeiro passo é instalar Gulp globalmente. Abra o terminal e escreva:
nPM install --global gole
Depois disso, você precisa instalar Gulp como devdependenceis para o seu projeto. Certifique-se de ter um arquivo de pacote. Se não for, crie-o, escrevendo-o no console Init NPM. Agora você pode instalar gulp como devdeependências:
nPM install --save-dev gulp
Finalmente, você precisa criar Gulpfile.js na raiz do seu projeto, que conterá suas tarefas (tarefas). Como um passo intermediário, instalaremos o plugin Gulp-Util. Para mostrar como os plugins são instalados:
nPM install --save-dev gulp-util
Agora chegou a hora para escrever nossa primeira tarefa. Abra o arquivo gulpfile.js recém-criado e escreva para o seguinte:
/ * Arquivo: gulpfile.js * / // Recolha todos os nossos plugins var gulp \u003d requer ("gulp"), Gutil \u003d requer ("Gulp-util"); // crie uma tarefa que será executada por padrão Gole. Tarefa ("Padrão", Função () (Retorna Gutil. Log ("Gulp está correndo!"))));
E agora temos que lançar gulp no terminal e veremos algo semelhante a ele:
\u003e Gulp [12:32:08] Usando Gulpfile ~ / Projetos / Gulp-Scotch-io / Gulpfile.js [12:32:08] Iniciando "Padrão" ... [12:32:08] Gulp está correndo! [12:32:08] terminou "padrão" após 1 ms
Visão geral
O gole é muito escalas sobre oportunidades. Mas tudo que você precisa ser colocado em plugins separados. Eles juntos com Gulp estão criando milagres.
A API Gulp é muito pequena e contém apenas 4 funções de ordem superior:
- gulp.task.
- gulp.src.
- gulp.dest.
- gulp.watch.
gulp.Task define nossas tarefas. Os argumentos são chamados, dependência (matriz) e a função (ações principais). Dependências podem não ser:
gole. Tarefa ("myTask", função () (// Faça alguma coisa)); Gole. Tarefa ("DependentTask", ["MyTask"], função () () // Faça algo depois de "mytask" será executado });
gulp.src indica os arquivos que queremos usar. Ele usa. Acesso ao tubo a arquivos através dos plugins.
gulp.Dest aponta para a pasta na qual queremos salvar os arquivos modificados.
gulp.src e gulp.dest é usado para uma cópia simples de arquivos:
gole. Tarefa ("copyhtml", função () () // Copie todos os arquivos HTML da fonte / Public / Gole. Src ("fonte / *. HTML"). Tubo (gulp. Dest ("público")); ));
No Gulp, um sistema de resposta de resposta de arquivo é construído (Gulp.watch). Você pode usar essa tarefa para iniciar as outras tarefas necessárias ao alterar arquivos.
Quer discar mais pontos na velocidade da página do Google? Não sabe que tipo de montagem "front-end"? Então você aqui será interessante.
O que é node.js?
Node.js é costume chamado "Northern Javascript". Esta plataforma permite gravar programas usando a sintaxe do JavaScript.
Existem implementações para Windows, Mac OS e Linux.
O kit inclui um gerenciador de pacotes Npm.Com o qual você pode instalar pacotes.
O que é gole?
O GULP é um pacote escrito em Node.js, que ajuda os webmasters a construir projetos no layout de layout.
Para instalar o Gulp, você deve usar a linha de comando.
NPM install gulp.
No final deste artigo, há um arquivo que ajudará a coletar um projeto típico.
Neste exemplo, com Gulp, faremos o seguinte:
- Otimizar automaticamente imagens para a web;
- Colete um mínimo de estilos de precrossores (Sass, SCS);
- Colete um arquivo mínimo com scripts.
Como coletar um front-end usando o Gulp?
Para entender como tudo funciona, examinaremos tudo em passos.
A estrutura pode ser vista na captura de tela.
- Pasta de Ativos - para fontes de imagem, estilos e scripts;
- Pasta pública - o resultado da montagem do projeto será localizado nele;
- gulpfile.js - um arquivo que descreve a lógica do trabalho do trabalhador;
- package.json é um arquivo que contém informações sobre programas e plugins usados \u200b\u200bpara a operação correta do GULP.
package.json.
Conteúdo do arquivo:
("Nome": "GULP_PROJECT", "Versão": "1.0.0", "Descrição": "Exemplo", "Main": "gulpfile.js", "scripts": ("teste": "Echo \\" Erro: Nenhum teste especificado \\ "&& exit 1"), "Autor": "Dmitriy Ilichev", "Licença": "ISC", "Devdeependências": ("Gulp": "^ 3.9.0", "Gulp-Csso ":" ^ 1.0.0 "," Gulp-Concat ":" ^ 2.6.0 "," Gulp-uglify ":" ^ 1.2.0 "," Gulp-Imagemin ":" ^ 2.3.0 "," Gulp -Sass ":" ^ 2.1.1 "))
Este arquivo é claro da seguinte maneira:
- Nome do projeto Gulp_Project, versão e descrição;
- O arquivo principal é gulpfile.js;
- O autor do projeto, a licença - tudo isso não é tão importante e simplesmente esses campos podem estar vazios;
- Um ponto interessante é devdependence. Descreve dependências.
O arquivo pode ser editado no editor de texto usual. Também pode ser criado para o novo projeto pelo comando npm int.
Com base nisso, o Node.js entende que precisaremos trabalhar:
- Gulp versão 3.9.0 e superior para a montagem;
- GULP-CSSO versão 1.0.0 e acima - plugin para ministrar estilos (CSS);
- Gulp-Concat versão 2.6.0 e acima - plugin para colar vários arquivos para um;
- GULP-UGLIFY versão 1.2.0 e acima - plugin para minificar javascript;
- Gulp-Imagemin versão 2.3.0 e acima - plugin para otimizar imagens;
- Gulp-Sass versão 2.1.1 e acima - plugin para obter CSS de Sass (SCSS).
Excelente! Depois disso, você precisa instalar tudo. Isso é feito a partir da linha de comando. Enquanto na pasta do projeto você precisa executar o comando:
NPM Install.
Todas as informações necessárias serão tiradas do pacote.json.
Depois de toda essa magia aparecer pasta de serviço node_modules.
gulpfile.js.
Conteúdo do arquivo:
/ * * * * * Determine as variáveis \u200b\u200b* * / var gulp \u003d requer ("gulp"), // relatou Gulp JS Uglify \u003d requer ("Gulp-uglify"), // minificação JS Concat \u003d requer ("Gulp-Concat") // Arquivo GLUING Imagemin \u003d Requer ("Gulp-Imagemin"), // Minificação do CSSO \u003d requer imagens ("GULP-CSSO"), // minificação CSS Sass \u003d requer ("Gulp-Sass"); // Sass Converting (SCSS) em CSS / * * * Criar tarefas (gostos) * * /// tarefa de sass. Lança o comando gulp sass gulp.task ("sass", função () (gulp.src ("./ ativos / estilos / estilo.scss") // arquivo que processos.pipe (sass (). On ("Erro" , Sass.LogError)) // Converter Sass em CSS .pipe (CSSO ()) // minifixture CSS, obtido na etapa anterior. Tubo (Gulp.Dest ("./ Public / CSS /")); // Result Escrevemos no endereço especificado)); // tarefa "JS". Lança o comando gulp js gulp.task ("js", função () (gulp.src ([["./assets/javascripts/jquery-2.1.4.min.js", "./assets/javascripts/bootstrap. Min .js "", "./assets/javascripts/script.js"]) // arquivos que procedem.pipe (concat ("min.js")) // cola todos os js .pipe (uglify ()) // o resultante "Porto" Minifixture.pipe (Gulp.Dest ("./ Public / JS /") // Resulticamos que escrevemos no endereço especificado)); // Problema "Imagens". Lança as "Imagens Gulp" por Gulp.Task ("Imagens", Função () (Gulp.src (". Ativos / imagens / ** / *") // Realizamos quaisquer arquivos na pasta e suas subpastas. Tubo ( Imagemin ()) // Otimizamos as imagens para a web. Tubo (Gulp.Dest ("./ Public / Images /")) // resultamos no endereço especificado)); // tarefa "assistir". É iniciado pelo comando "Gulp Watch" // Ele monitora as alterações nos arquivos e inicia automaticamente as outras tarefas do Gulp.Task ("Watch", Função () (// ao alterar arquivos * .scss na pasta e subpastas de estilos. Execute a Tarefa do Sass Gulp. Assista (". - Ativos / estilos / ** / *. SCSS", ["sass"]); // ao alterar a pasta de arquivos * .js "javascripts" e subpastas executam o JS Gulp. Tarefa de observação ("./ Ativos / Javascripts / ** / *. JS", ["JS"]); // Quando você altera todos os arquivos na pasta "Imagens" e subpastas, inicie as imagens Gulp.watch Tarefa (" ./ ativos / imagens / ** / * ", [" imagens "]);)););
Chip principal - na tarefa ver.. Depois de executá-lo uma vez, você pode trabalhar com segurança com fontes, e o projeto será automaticamente coletado toda vez que você salvar arquivos editáveis.
Na saída, nos preparamos para publicar o modelo na Internet.
Tarefas podem ser lançadas separadamente. Como resultado, no arquivo no final do artigo, você encontrará o seguinte:
! Nota Para descompactar este arquivo, primeiro de tudo, você precisará executar o comando de instalação do NPM. Esta pasta contém um número bastante grande de arquivos, e toda vez que você copia / colá-los - uma perda de tempo.
Em custódia
Há um enorme conjunto de outros plugins úteis. Por exemplo, um modelo maravilhoso jade, que é às vezes acelerando o código HTML, alguém pode precisar de menos e assim por diante.
O exemplo apresentado é apenas uma plataforma e um modelo da qual é possível começar a usar todos esses lindos fichas sem muito conhecimento.
Ranners de tarefas e sistemas de montagem são altamente acelerados o trabalho, automatizar a compilação, teste e outras tarefas de rotina. Como em qualquer outra área, há forte concorrência neste mercado. Até 2014, a tarefa Ranner Grunt dominou entre eles, mas mais tarde, uma pequena equipe foi separada do projeto, que decidiu fazer uma ferramenta alternativa, gole, montagem de projeto orientada.
Para ajudá-lo a decidir sobre a seleção, no âmbito do artigo considerar os principais gerentes de tarefas:
- grunhido.
e também toque em outros meios e construir métodos.
Olhando um pouco à frente, digamos que usamos Gulp no Waveaccess. Implementar a ferramenta acabou por ser muito fácil: na família dos produtos JetBrains (ideia, Webstorm, Resharper), que temos usado muitos anos têm excelentes plugins para trabalhar com Gulp / Grunt e NPM / Nodejs.
Gerente de Tarefas vs. Sistema de montagem de projeto: Qual é a diferença?
Gerenciador de tarefas - Ferramenta para automatizar tarefas. Na configuração de ranhuras, você pode registrar os nomes dessas tarefas; a função que os executa; Plugins para acelerar as ações padrão, mas as tarefas em si podem ser arbitrárias. Por exemplo:
- Tarefas para implantação (projeto ZIP, download do projeto para servidor remoto e TP)
- Tarefas de montagem de projeto (minificação, otimização, código de verificação para validade e TP)
- Tarefas para migração de dados, etc.
Exemplos de tais ferramentas - grunhem e gole.
Sistema de montagem - Esta é uma ferramenta que resolve apenas uma tarefa típica do conjunto do projeto no script Java, que inclui:
- concatenação,
- código de verificação para validade,
- código de minificação e TD.
Ferramentas semelhantes incluem webpack, brócolis, brunch, navegador e outros.
Todas as tarefas de frontend semelhantes podem ser executadas automaticamente usando outros meios: Por exemplo, usando a execução do NPM, que também falaremos no artigo.
Exemplo
Considere um arquivo gulp para montar o projeto:
Const gulp \u003d requer ('gulp'); Const café \u003d requer ('gulp-café'); Const Concat \u003d requer ('Gulp-Concat'); const uglify \u003d requer ('gulp-uglify'); Const Imagemin \u003d requer ('Gulp-Imagemin'); Const sourcemaps \u003d requer ('gulp-sourcemaps'); const del \u003d requer ('del'); )
Mas a montagem é um caso especial de uma grande tarefa típica. Para Gulp, você pode escrever outra configuração - digamos, para implantar:
Var gulp \u003d requer ("gulp"); var zip \u003d requer ("gulp-zip"); var del \u003d requer ("del"); Var Install \u003d requer ("Gulp-Install"); var runssequence \u003d requer ("sequência de execução"); Var Awslambda \u003d requer ("nó-AWS-LAMBDA"); gulp.task ("limpo", função (CB) (del (["./ dist", "./dist.zip"], CB);); gulp.task ("copy", função () ("index.js") .pipe (gulp.dest ("dist /")));)));); Gulp.task ("nó-mods", função ("./ Package.json") .pipe (gulp.dest ("dist /")) .pipe (instalação ((produção: true))););) // Limpe todos os diretórios da AWS-SDK de Node_Modules. Nós não precisamos carregá-los desde que a instância do lambda já irá // disponibilizá-la globalmente. Gulp.Task ("Clean-AWS-SDK", Função (Delback) (Del (DIST / Node_Modules / ** / AWS-SDK "], retorno de chamada);)); gulp.task (" zip ", função () (retorno gulp.src ([" dist / ** / * ","! Dist / package.json "]) .pipe (zip ("dist.zip")) .pipe (gulp.dest ("./"));)); gulp.task ("upload", função (retorno de chamada) (awslambda.deploy (". / dist .zip ", requer (" ./ lambda-config.js "), retorno);)); gulp.task (" implantar ", função (retorno de chamada) (retorno de retorno ([" limpo "], [" Copy "] , ["Node-Mods"], ["Limpeza-AWS-SDK"], [Zip "], [" Upload "], retorno de chamada);));
A pode ser descrito por novas tarefas como uma combinação de existentes:
Gulp.task ('implantar', gulp.series ('limpo', 'cópia', 'nó-mods', 'limpo-aws-sdk', 'zip', 'upload'));
Esta é a diferença. Agora considere as ferramentas básicas.
gole vs. Grunhido.
Então, na frente de nós são duas tarefas Ranner: Gulp e Grunt. Ambos são usados \u200b\u200bpelo Node.js e NPM, e eles colocam as tarefas usando JavaScript.
À primeira vista, eles são semelhantes, no entanto, Gulp tem algo que torna mais conveniente para montar: a habilidade é paralela às tarefas de processo e uma configuração compacta, a API lacônica. Vamos olhar mais perto do seu princípio do trabalho.
Dados de rosqueamento
Temos um arquivo de concessão que torna o conjunto e o processamento do CSS.
Pode ser visto a partir desse grunhido ao iniciar cada processo:
abre o arquivo;
lança processo;
salva mudanças;
fecha o arquivo processado para evitar o seguinte processo nele;
registra o arquivo para a pasta final.
Ou seja, a cadeia inclui a criação de várias pastas temporais e salvar arquivos intermediários:
Plugins escrevem diferentes autores. Para cada plugin pode funcionar com arquivos, ignorar, os arquivos devem ser enviados como objetos. No Gulp, esta tarefa é realizada pelo sistema de arquivos virtual vynyl-fs. E Gulp imediatamente envia o arquivo para o seguinte processo sem criar arquivos temporários e sem salvar no disco.
A mesma configuração para Gulp já é mais compacta:
Seu mecanismo geral de trabalho - streaming de arquivos sem gravar no disco:
Sequência de execução de tarefas.
Há outra diferença: o gole por padrão realiza coisas de forma assíncrona. Existem vantagens nisso e contras. No mesmo arquivo de configuração, damos o comando para contar os arquivos do diretório dev / * scss e enviá-los para o SASS.
Os fluxos enviam o resultado de v.pipe. Método. O tubo permite que você colete o resultado no buffer em partes e, quando estiver cheio, envie imediatamente informações para o fluxo para leitura, sem acabamento de receber o conteúdo do diretório.
A execução de tarefas sequenciais torna o gole rápido e poderoso, mas ocasionalmente a necessidade de ainda executar tarefas sincronizadas como no grunhido. O problema pode ser resolvido através do retorno de chamada, o retorno do fluxo ou promessa. A tarefa de Habré é desmontada em mais detalhes. Há uma alternativa no site npm.js
Se você usar o grupo, mas é atraído por streaming de dados - o mesmo módulo Vynyl-FS pode ser usado para implementá-lo no grunhido.
A API Gulp Laconic tem apenas 5 métodos:
Tarefa (nome, fn). Registra um recurso nomeado. Você pode especificar dependência de outras tarefas se precisar executá-las primeiro.
Executar (tarefas ...). Realiza tarefas.
Assista (Glob, Fn). Executa uma função se o arquivo no local do GLOW mudar.
Src (glob). Como um parâmetro leva a máscara de arquivo e retorna o segmento representando esses arquivos. Em seguida, o fluxo pode ser transferido para o plugin de entrada.
Dest (pasta). Salva arquivos para a pasta especificada.
Gostaria especialmente de observar a presença de.watch () na API do projeto "nativo", porque o rastreamento das alterações constantes nos arquivos é o componente mais importante da montagem. A breve da API permite se concentrar em sua tarefa principal para montar projetos.
Alternativas gole e grunhir
Apesar da popularidade do Gulp (mais de 130 a downloads por dia) e grunhidos (mais de 86 para downloads por dia de acordo com o NPMJS.com), os desenvolvedores vêem nesses sistemas e suas desvantagens: por exemplo, dependência de plug-ins, Incompleto Documentação, depuração desconfortável. Como alternativa, você pode considerar os sistemas de montagem de projeto (como brócolis e webpack) ou scripts NPM.
Sistemas de montagem do projeto
Considere várias soluções alternativas na plataforma Node.js. Para montar o projeto, eles podem substituir Gulp e Grunt.
Este sistema, como Gulp, surgiu como uma tarefa concorrente - o Grunt precoce, mas os desenvolvedores inicialmente concebiam precisamente como assistente para construir com todas as vantagens e desvantagens. Ele não vai "entender" sem configurações, que * .js é um arquivo com scripts, * .coffee é CoffeeScript; Sua configuração é mais compacta. No entanto, quaisquer ações arbitrárias na fase de montagem ele não poderá cometer.
Aqui está o brunch do arquivo de configuração. Está escrito em Coffescript (você também pode escrever em JS):
Exports.config \u003d Arquivos: JavaScripts: BOOTO: "javascripts / app.js": / ^ app / "javascripts / vendor.js": / ^ (BOWER_COMPONENTES | Vendor) / Stylesheets: Arro: "Stylesheets / app.css" ordem : Após: ["Vendor / Styles / Helters.css"] Modelos: Joejo: "javascripts / app.js"
Aqui eu quero prestar atenção aos operadores daíta e pedidos. No nível de configuração do brunch, parece que você tem que coletar arquivos na ordem desejada. Como resultado, a configuração leva 20-30 linhas.
Brócolis.
Indi-Tool, que está em desenvolvimento. Seus desenvolvedores queriam criar competição já engolir.
Comparado com Gulp, a ferramenta Brócolis usa outros princípios:
Montagem de aceleração. Cada plugin implementa um cache intermediário dos resultados de montagem em vez de rebelamento parcial apenas os arquivos necessários.
Árvores em vez de arquivos. Gulp é melhor transformar um arquivo em uma final. O broccolli padrão usa apenas árvores, não os arquivos, e eles os transformam em outras árvores (degeneradas de um vértice).
No momento, a ferramenta está desenvolvendo ativamente, novos plugins aparecem, mas para projetos sérios, é cedo demais: os plugins não são suficientes.
Webpack é um sistema flexível de montagem modular. Tem sintaxe incomum, mas a si mesma adota qualquer sintaxe do módulo.
Compreender que você tem que competir com esses gigantes como gulp, os criadores decidiram aliviar nossa vida no desenvolvimento de grandes projetos. E adicionado ao utilitário:
A capacidade de construir automaticamente dependências e recursos de madeira.
Ferramentas confortáveis \u200b\u200bpara a implementação do carregamento dinâmico.
Compatibilidade com praticamente quaisquer módulos (AMD, UMD, ES 2015, JS comuns, módulos de terceiros com base neles).
Compatibilidade com pré-processadores (sass, babel, script de café, tipo script, etc.).
Recarregue ao vivo (tecnologia de inicialização assíncrona, na qual o navegador não atualiza as páginas inteiras, mas aplicativos separados).
A capacidade de compartilhar o código e gerar muitos arquivos de pacote, evitando a criação de um bundle.js pesado.
Capacidade de otimizar o código.
Separadamente, você pode anotar uma abordagem flexível para dependências. O módulo pode ser JS, CSS e arquivo HTML e até mesmo JPEG com PNG. Você pode usar exigir ("myjsfile.js") e exigir ("mycssfile.css"), compartilhar e usar partes do artefato novamente.
Leia mais sobre as possibilidades, configurações de ferramentas, os plugins podem ser encontrados no GitHub, na apresentação com Fronttalks: Imersão profunda na webpack.
scripts de NPM.
As tarefas de montagem podem ser resolvidas usando scripts NPM. Muitos assustam essa ideia: Poucas capacidades, scripts não são rápidas o suficiente em comparação com gulp ou webpack. No entanto, essas deficiências são exageradas.
Capacidades de script npm.
Os scripts de NPM resolvem muitas tarefas. Por exemplo, você pode implementar scripts de armadilha:
("Nome": "NPM-Scripts - Exemplo", "Versão": "1.0.0", "Descrição": "Exemplo de scripts npm", "scripts": ("Prebuild": "Echo que eu corro antes do script de compilação" , "Build": "Cross-Env Node_env \u003d Production Webpack" "Postbuild": "Echo eu corro após o script de compilação"))
Os scripts serão carregados em ordem de acordo com os prebixos: Prebuild, por exemplo, inicia antes de construir, porque ele possui prefixo pré. Assim, o PostBuild será carregado por último. A equipe de Construção de Execução do NPM lança-as no pedido desejado.
Você pode ligar para um script do outro para se decompor tarefas complexas. Por exemplo, aqui a tarefa Prebuild chama a tarefa limpa.
("Nome": "NPM-Scripts-exemplo", "Versão": "1.0.0", "Descrição": "Exemplo de scripts npm", "scripts": ("limpo": "rimraf. "," Prebuild ":" NPM Run Clean "," Build ":" Cross-Env Node_env \u003d Webpack de produção "))
Se a tarefa se tornar muito complicada, você sempre pode ligar para um arquivo separado:
("Nome": "NPM-Scripts-exemplo", "Versão": "1.0.0", "Descrição": "Exemplo de scripts npm", "scripts": ("Build": "Nó Build.js")
Devido ao streaming gulp para tarefas de montagem, tornou-se muito mais conveniente do que o grunhido. Mas pode ser implementado através da NPM. No Windows e Unix, o streaming é feito por padrão, sem salvar arquivos intermediários.
Por exemplo, no UNIX, você pode fazer o conteúdo do arquivo Grep e enviá-lo para um novo arquivo:
Grep 'meu nome' bigfile.txt\u003e linesthathatavemyname.txt
Redirecionar (\u003e) Envia as strings desejadas para o arquivo de destino. A tarefa é executada sem salvar arquivos intermediários.
Mas há inconvenientes: você não pode deixar comentários no pacote.json. A saída pode ser a criação de scripts curtos com nomes compreensíveis destinados a alguma pequena tarefa. Com mais detalhes, a questão da substituição de ranhões de tarefas NPM scripts é bem iluminada no artigo de língua inglesa por que deixei Gulp e Grunt para Scripts da NPM.
Resultado
No mercado há uma grande concorrência ferramentas para automatizar tarefas de rotina (por exemplo, Gulp e Grunt), bem como ferramentas para automatizar a montagem do projeto (Webpack, brócolis, Medusa, Browserify, etc.).
Se você olhar para os ranners de tarefas, então engolir comparado ao grunhido é mais simples, compreendido e produzir: vitórias devido a economias em operações de disco. Mas o Grunt tem mais plugins (por exemplo, há um plug-in de teste). Por isso, ele continua sendo muitos fãs.
Se falarmos apenas sobre a assembléia, então Gulp tem todas as vantagens sobre Grunt:
A arquitetura do fluxo para a transferência de arquivos sobre a cadeia fornecida pelo módulo vynyl-fs.
Por padrão - Execução de tarefa assíncrona.
A API lacônica é apenas 5 funções.
Ao mesmo tempo, a construção da webpack é uma ferramenta igualmente interessante. Ele fornece tecnologia de recarga ao vivo que acelera a renovação do navegador. Esta é uma enorme plus: a tecnologia economiza tempo para pressionar o botão Atualizar que os desenvolvedores precisam pressionar constantemente. Gulp também tem recarga ao vivo, mas a webpack é difícil de comparar com Gulp ou Grunt, pois é "afiada" apenas sob a construção e não "sabe como resolver tarefas arbitrárias.
Todas estas decisões são perfeitamente integradas com a família de produtos de JetBrains, no entanto, nós em onda de onda preferia grunhidos para amplas oportunidades para ambos os footgames, e para especialistas de frontend.
Se você tiver alguma dúvida e precisar desenvolver um projeto da Web, escreva para nós [E-mail protegido]
- A parte dianteira
- Grunhido.
- Gole.
- Executores de tarefas.
Neste artigo, analisaremos detalhadamente o processo de montar o projeto do projeto, que se deparou com meu trabalho diário e muito mais fácil para a rotina.
O artigo não afirma ser a verdade na última instância, já que hoje existem um grande número de montantes e abordagens diferentes para a assembléia, e todos escolhem provar. Eu só vou compartilhar meus pensamentos sobre este tópico e mostrar meu fluxo de trabalho.
Vamos usar o Colecionador Gulp. Assim, o nó JS deve ser instalado no sistema. Instalando os nós para uma plataforma específica, não vamos considerar, porque Googles em alguns minutos.
E primeiro responderá a pergunta - por que engolir?
Das alternativas mais ou menos de demolição que temos grunhidos e brunch.
Quando comecei a virar aos colecionadores - já havia grunhido e gole no mercado. O primeiro apareceu anteriormente e sobre isso tem uma comunidade maior e uma variedade de plugins. De acordo com a NPM:
Pacote Grunt - 11171
Pacote Gulp - 4371
Mas o Grunt me pareceu através do chur verbal. E depois de ler vários artigos, comparado - eu preferia gole por sua simplicidade e visibilidade.
O brunch é um projeto relativamente jovem, com todas as vantagens dessas vantagens e diminuições. Eu assisto ele com interesse, mas ainda não usei.
Vamos continuar:
Crie uma pasta para o nosso projeto, por exemplo "HABR". Abri-lo no console e execute o comando
Npm init.
Você pode simplesmente pressionar ENTER para todas as perguntas do instalador, porque Agora não é fundamentalmente.
Como resultado, na pasta do projeto, somos gerados pelo pacote de arquivos.json, aproximadamente um conteúdo.
("Nome": "HABR", "Versão": "1.0.0", "Descrição": "", "principal": "index.js", "scripts": ("teste": "Echo" erro: Nenhum teste especificado "&& Exit 1") ", autor": "", Licença ":" ISC ")
Algumas modificações dele sob nossas necessidades:
("Nome": "HABR", "Versão": "1.0.0", "Descrição": "", "autor": "" "," licença ":" ISC "," Devdeependive ": (" Devdeependive ": (" Gulp ": "^ 3.8.1"))
no bloco Devdeependence, indicamos que precisamos gulp e imediatamente prescreveremos todos os nossos plugins.
Plugins:
Com estilos, faço o mesmo que com JS, mas apenas em vez de Rigger "A - eu uso a importação interna do SCSS.
Nosso principal.scss ficará assim:
/ * * Third Party * / @Import "CSS: ../../ bower_components / normalize.css / normalize.css"; / * * Personalizado * / @Import "parcial / app";
Desta forma, acontece que é fácil controlar a ordem de conexão dos estilos.
Verifique nossa tarefa, em execução
Gole estilo: construir
Nós coletamos fotos
Tarefa em fotos ficará assim:
GULP.TASK ("Image: Build", Função () (GULP.SRC (Path.src.img) // Selecione nossas fotos. Tubo (Imagemin ((((((((((((((// cantando eles progressivos: verdadeiro, svgoplugins: [(RemoveViewbox: False )], Use:, entrelaçado: true))) .pipe (gulp.dest (path.build.img)) // e lançar em construir .pipe (connect.reload ()););););
Eu uso as configurações padrão do ImageMin, com exceção do entrelaçado. Leia mais sobre a API deste plugin que você pode ler.
Agora, se colocarmos alguma foto no SRC / IMG e lançarmos o comando
Gulp Image: Build
assim, veremos nossa imagem otimizada na construção. Além disso, Gulp vai gentilmente escrever no console quanto espaço ele salvou para os usuários do nosso site :)
Fontes.
Com fontes, geralmente não preciso realizar quaisquer manipulações, mas o que quer que você acaricie o paradigma "Trabalhamos em SRC / e colecionamos em Build /" - simplesmente copia arquivos de SRC / Fonts e inserimos em fontes. Aqui tarefa
Gulp.task ("fontes: construir", função () (gulp.src (path.src.fonts) .pipe (gulp.dest (path.build.fonts)))));
Agora vamos definir Taq com o nome "Build", que lançará tudo o que responsabilizamos aqui
Gulp.task ("Build", [HTML: Build "," JS: Build "," Estilo: Build "", Fonts: Build "," Image: Build "]);
Alterações de arquivo
Para não subir o tempo todo no console, vamos pedir ao gole toda vez quando você alterar algum arquivo para executar a tarefa desejada. Para fazer isso, escreva essa tarefa:
Gulp.task (assistir ", função () (assistir (função (evento, cb) (Gulp.start (" HTML: Build ");); assistir (, função (evento, cb) (estilo gulp.start (" : Build ");)); assistir (, função (evento, cb) (Gulp.start (" JS: Build ");); assistir (, função (evento, CB) (Gulp.start (" Imagem: ");)); Assistir (, função (evento, cb) (Gulp.start (" fontes: construir ");)));));)
Nós entendemos que não deve haver problemas. Nós simplesmente passamos por nossos caminhos definidos na variável PATH e na função que é chamada ao alterar o arquivo - por favor, inicie a tarefa necessária.
Tente correr no console
Gulp Watch.
e altere arquivos diferentes.
Bem, não é legal?)
Servidor web.
Para desfrutar de um milagreireload - precisamos criar um servidor da Web local. Para fazer isso, escreva a próxima tarefa:
Gulp.task ("webserver", função () (Connect.Server ((host: server.host.host, porta: server.port, livereload: true));)););)
Não há nada para comentar. Simplesmente iniciaremos o servidor da LIVELOAD no host e na porta que definimos no objeto do servidor.
Limpeza
Se você adicionar alguma foto, execute a imagem: Build Build e remova a imagem - permanecerá na pasta Build. Então seria conveniente - para limpá-lo periodicamente. Crie para esta tarefa simples
Gulp.task ("limpo", função (CB) (Rimraf (path.clean, CB);));
Agora, ao iniciar o comando
Gulp limpo.
basta excluir a pasta de construção.
E finalmente, a pequena misericórdia
Esta tarefa não carrega funcionalidade crítica, mas eu realmente gosto disso :)
Gulp.task ("openBrowser", função () (opn ("http: //" + server.host + ":" + server.port + "/ build"););
Quando precisamos, lançá-lo - e no nosso navegador abrirá automaticamente a guia com nosso projeto.
Frio :)
Acordo final
A última coisa - vamos definir a tarefa padrão, que lançará a montagem inteira.
Gulp.task ("default", ["construir", "webserver", "assistir", "OpenBrowser"]);
Finalmente, seu gulpfile.js vai parecer algo assim.
Agora execute no console
E voila :) A peça de trabalho para o seu projeto está pronta e esperando por você.
Casal palavras em conclusão
Este artigo pensou como uma maneira de atualizar na memória da sutileza para construir projetos de frontend e facilitar a transferência dessa experiência para novos desenvolvedores. Você não precisa usar essa forma de realização em seus projetos. Há yeoman.io onde você encontrará os geradores quase para qualquer necessidade.
Eu escrevi este colecionador por 2 de maio.
- Eu gosto de usar o Rigger no meu código HTML
- Quase em todas as construções que conheci - uma pasta temporária é usada (geralmente.tmp /) para registrar os resultados intermediários da montagem. Eu não gosto dessa abordagem e queria me livrar de pastas temporárias.
- E eu queria tudo isso para mim da caixa :)
Minha versão de trabalho do colecionador você pode baixar no meu github.
Espero que o artigo acabasse por ser útil para você :)
P.S. Todos os erros, deficiências e cardumes - por favor escreva em um pessoal
Conjunto de desenvolvedores de front-end do cavalheiro
Não é segredo que o desenvolvedor moderno do front-end deve ter em seus braços uma das ferramentas de montagem do projeto, como Gole. ou Grunhido.. Até algum tempo o Grunt ocuparam um monopólio nesta matéria, mas o grupo de desenvolvedores separado do Grunt decidiu criar seu próprio gerente de trabalho leve e rápido.
Neste artigo, vamos preparar o pacote inicial para usá-lo em projetos futuros.
O que estamos usando tecnologia?
- Plataforma de software: Node.js.
- Pré-processador CSS: Stylus.
- Gerenciador de tarefas: Gole.
Por que o gerente de tarefas do gerente frontal
Até recentemente, eu mesmo me perguntei por que preciso gastar tempo para configurar a configuração do Gerenciador de Tarefas, se eu lidar com o layout de layout tão bem até que eu comecei a usar os pré-processadores CSS.
Pré-processadores CSS - Realmente convenientes e aceleram estilos de escrita, mas compilando o código escrito em um pré-processador em um CSS regular, não é uma tarefa trivial que é resolvida por um botão. Aqui estamos para o resgate e o gerente de tarefas vem. A conversão de código não ocorre que pressionando o botão, tudo acontece on-line sem sua participação (claro, se você configurar tudo corretamente).
Naturalmente, as tarefas do gerenciador de tarefas vão muito além dos processos associados à conversão de código de transformação em CSS puro. O coletor de projeto também está envolvido em um ministério, concatenação, verificando o código para erros, montando a imagem em sprites, otimizando imagens no Web, etc. Você só cria em seu projeto muitos arquivos separados lógicos, que são coletados convenientemente em um diretório já processado e pronto para funcionar no navegador. Mas é um pouco mais tarde, e agora vamos começar com a preparação.
Nó de instalação.js.
Se você souber como instalar o Node.js ao seu sistema e usá-lo, você pode ir com segurança para o próximo cabeçalho.
Eu gostaria de avisar imediatamente que todas as ações descritas são relevantes para Mac OS X.mas geralmente aplicável para os outros Unix. Sistemas. Desenvolvimento através do gerenciador de tarefas e linha de comando em janelas Um pouco mais difícil e aqui não será descrito. No entanto, se você ainda usar o Windows e não estiver pronto para recusá-lo, posso oferecer uma versão do uso de uma máquina virtual com instalada Ubuntu.Eu uso esta opção no meu sistema de casa, que é geralmente bastante conveniente.
Então, a primeira coisa que temos que baixar e instalar o pacote Node.js para o seu sistema para trabalhar com um nó através do console. Vá para o site oficial node.js e baixe uma versão estável fresca para o seu sistema. Após a instalação, o comando do nó deve estar disponível no seu prompt de comando. Para verificar se o seu nó funciona, insira o comando no prompt de comando
em resposta, a versão do Node.js instalada é estabelecida. Se tudo estiver bem, continue.
Estrutura de diretórios do projeto
Em nossos projetos, usaremos uma versão unificada da estrutura:
Desenvolver - Catálogo de desenvolvimento raiz └─start. - Catálogo de projetos ├─Build. - Bild coletado gerenciador de tarefas ├─Resource. - Todos os arquivos de origem para o desenvolvimento (.PSD, etc.) ├─Src. - Catálogo de desenvolvimento. │├─CSS. - Catálogo de desenvolvimento de estilo ││├─Images. - Todas as imagens estáticas ││├─sPritos. - imagem coletada em sprite ││├─partial. - arquivos personalizados estilos │││├─Mixins.styl. - Mixins personalizados │││└─Styles.styl. - estilos personalizados. ││├─Vendor. - Outras arquivos externos estilos ││└─Styles.styl. - Arquivo de estilo principal │├─fonts. - Catálogo de fontes │├─ImG. - Catálogo imagens dinâmicas │├─Js. - Catálogo de desenvolvimento de JavaScript ││ ├ _ *. JS - arquivos laterais js ││├─_main.js. - Main personalizado js ││└─Main.js.js. - Arquivo principal JS │├─Htaccess. - Config para servidor │├─ * .html. - Arquivos de marcação de página │├─Spages.html. - Arquivo com links para todos os modelos de página │├─Dex.html. - Arquivo de marcação de arquivo de índice │└─Clude. - Catálogo de arquivos de marcação de plug-in │ └─ * .html - Arquivos de marcação de plug-in (cabeçalho.html, etc.) ├─Package.json. - Configuração do NPM Batch Manager ├─Gulpfile.js. - Config Gulp. ├─stylus.template.mustache. - máscara para leitura sprites ├─todo. - Folha de TODO. └─gitignura. - config para git
Instalação
No console usando o comando CD, vá para o diretório raiz do desenvolvimento, crie um catálogo do nosso projeto de início do MKDIR e passe para ele.
Estabeleceremos nossa estrutura para o projeto através do console:
mkdir Build Resource SRC SRC / CSS SRC / CSS / Images SRC / CSS / SRC / CSS / SRC parcial / CSS / Vendor SRC / Model SRC / Model / IMG SRC / Fontes
Crie os arquivos iniciais na estrutura do projeto:
toque gulpfile.js stylus.template.mustache .gitative src / .htaccess src / todo src / css / estilos.styl src / css / parcial / estilos.styl src / css / parcial / mixins.styl src / js / main.js Src / js / _main.js src / modelo / páginas.html src / modelo / index.html src / modelo / include / header.html src / modelo / include / rodaper.html
Criar pacote.json.
todas as perguntas pop-up podem ser aproveitadas por enter, o nó definirá os valores padrão ou preencherá os campos propostos.
.gitignore.
Falando um gita que catáloga ignorar e não preencher o repositório:
/ Node_modules / / Build / Recurso /
O diretório Node_Modules aparecerá mais tarde após a instalação dos plug-ins e conterá todos os plugins do projeto.
src / .htaccess.
Instalando uma compactação gzip adicional e armazenamento em cache para o servidor:
AddoutPutFilterbyType Deflate Texto / Texto HTML / Texto Plano / XML Texto / CSS Text / Javascript Application / Javascript
src / css / estilos.styl
Conecte arquivos de estilo do usuário ao arquivo de estilo principal:
@Import "parcial / estilos"
Observe que, para conectar arquivos, a extensão não é especificada, de acordo com a semântica do código de pré-processador da Stylus. Para conectar estilos em outra extensão, por exemplo.css, a indicação do último é necessária.
PENDÊNCIA.
Esta página contém uma folha de desenvolvimento TODO. Você pode ler mais sobre como trabalhar com este arquivo na página Plaintasks Plaintasks Plugin para texto sublime.
Esta configuração da estrutura é concluída.
Instalando plugins através do gerenciador de lote NPM
Node.js por padrão inclui um gerenciador de lote NPM, em cujos repositórios muitos plugins foram coletados com os quais temos que trabalhar.
Definindo o plugin Gulp
Primeiro, você precisa instalar Gulp globalmente (com a tecla -g) em nosso sistema
nPM install gulp -g
Você precisa uma vez, avançar instalação Global não requerido.
Agora você precisa instalar gulp localmente no catálogo de projetos
nPM install gulp --save-dev
O Key --Save-Dev sugere que as informações sobre o plugin (nome no repositório e sua versão) serão adicionadas à configuração do Package.json e lembre-se a este projeto. Como não armazenamos uma pasta pesada com os plugins Node_Modules, salvas nas informações de configuração sobre plugins instalados permitirão apenas um comando NPM i para implantar todos os plugins necessários no projeto.
Para cada equipe há abreviaturas, então o comando acima podemos escrever em um formato mais curto
No futuro, também usaremos o formato abreviado das equipes.
Plugin Stylus para Gulp
Em nossos projetos, usamos o pré-processador Stylus que funciona bem e compilado no nó.
Instalar:
npm eu gulpo-stylus -d
Plugins de processamento CSS.
Avtoprefikser. - Substitui automaticamente os prefixos -Ms ----- MOZ - WebKit - nas propriedades desejadas:
npm eu galopixer-dixer -d
Css minificação - Plugin minifica o arquivo CSS de saída, eliminando-o de lacunas e guias desnecessárias:
npm eu galo-minify-css -d
Plugins de processamento de imagem
Associação de fotos em sprites - Você não precisa mais gastar as horas de tempo precioso para combinar todas as imagens em sprites e calcular suas coordenadas, tudo isso fará automaticamente este plugin para você:
npm eu gulp.spritesmith -d -d
Adicionar à máscara anteriormente criada stylus.template.mustache para calcular posições em sprites:
((#Items)) $ ((nome)) \u003d ((px.x)) ((px.y)) ((px.offset_x)) ((px.offset_y)) ((px.width)) (( px.Height)) ((px.total_width)) ((px.total_height)) "(((escaped_image))"; (/ Itens))
Adicione misturas especiais em mixins.styl:
SpriteWidth ($ sprite) $ spriteheight ($ sprite) altura $ spriteposition ($ sprite) fundo $ sprite $ spriteimage ($ sprite) fundo-imagem url ($ sprite) sprite ($ sprite) se! Fósforo ("pairar" , Seletor ()) &&! Jogo ("ativo", seletor ()) spriteimage ($ sprite) SpritePosition ($ sprite) Spritewidth ($ sprite) Spriteheight ($ sprite)
Conecte as mixinas e um arquivo gerado com coordenadas ao arquivo principal SRC / CSS / Styes.styl estilo:
@Import "parcial / sprite" @Import "parcial / mixins"
Observe que os sprites devem se conectar aos estilos de usuário @Import "parcial / estilos"
Otimização de imagem para web - O plug-in cortará automaticamente todas as informações desnecessárias de suas imagens e solteiras até o tamanho ideal, que permitirá em alguns casos para reduzir o escopo de imagens até 90%:
npm eu gulpo-imagemin -d
Plugins de processamento de JavaScript
Minificação JS. - O plugin minifica seu código JS reduzindo seu tempo de download:
npm eu galo-uglify -d
Rastreamento de js. - O plug-in verificará seu código JS para identificar todas as inconsistências e trazê-las para o console:
npm i jshint gulp-jshint -d
Plugins de processamento HTML.
Arquivos conectados - O plugin permite que você armazene partes estáticas do site, como cabeçalho, rodapé, de lado, etc., em arquivos separados e conecte-os a qualquer parte de outro arquivo. Não há mais suficiente, no caso de pequenas alterações no cabeçalho, altere dezenas ou mesmo centenas de páginas HTML do modelo:
npm eu gulpo-rigger -d
O plugin também é compatível com JS.
Conecte o usuário JS à construção do software principal do JS SRC / JS / Main.js:
// \u003d _main.js.
Conecte-se ao cabeçalho de arquivos index.html e rodapé.html
// \u003d incluir / header.html // \u003d include / footer.html
Outros plugins.
Livereload. - O plugin elimina você para reiniciar a página no navegador toda vez para ver as alterações, agora isso acontece automaticamente ao salvar o arquivo alterado:
npm eu galoi-conectar -d
Proteja o gole da partida - Às vezes acontece que o Gulp pode voar para fora do modo de observação em caso de erros críticos (principalmente devido a JS). Este plugin, se possível, tenta deixar processos gulp trabalháveis:
npm eu galo-gole -d
Renomear arquivos - O trabalho mais comum com nomes de arquivos. O plugin permite-lhe renomear completamente os arquivos, alterar a extensão, adicionar prefixos e postfix, por exemplo, para trazer o estilo do estilo.Styl.min.css:
npm eu galo-renomeio -d -d
Cleener. - Às vezes há a necessidade de concluir o catálogo do diretório de compilação, há um plugin ao resgate:
Sourcemap. - Para depois da minificação, seus arquivos permaneceram legíveis através da depuração do navegador, você precisa adicionar sourcemap a arquivos minifier:
npm eu galogue-sourcemaps -d
Recursos de relógios estendidos. - O plugin torna o relógio inteligente, agora não sobrescreve todos os arquivos na construção quando você altera o arquivo inteiro, o arquivo modificado específico é sobrescrito, o que economiza tempo e recursos:
npm eu galo-gole -d -d
Verifique o pacote.json.
Depois de tudo plugins instalados, Confira nosso pacote.json. Ele deve ter sobre o seguinte tipo:
("Nome": "Iniciar", "Versão": "1.0.0", "Descrição": "Start Pack for front-end evolução", "Author": "Ivan Ivanov", "MIT": "MIT", "Dependências": (), "DevdePendências": ("Gulp": "Últimas", "Gulp-autoprefixer": "Últimas", "Gulp-Connect": "Últimas", "Últimas", "Últimas", "Jshint": "Últimas", "jshint-stylish": "Últimas", "Gulp-Jshint": "Últimas", "Gulp-Minify-CSS": "Últimas", "Últimas", "Últimas", "Gulp-Renomee": "Últimas", "Gulp-Rigger": "Últimas", "Gulp-Sourcemaps": "Últimas", "Gulp-Stylus": "Últimas", "Últimas", "Gulp-Watch": "Últimas", "Gulp.spritesmith": "Últimas", "Rimraf": "Últimas"))
Em vez de mais recentes, no seu caso, versões específicas de plugins instalados serão soletradas. Porque Formamos nosso pacote inicial que será usado em uma variedade de projetos, também é recomendável substituir os valores das versões a mais recente para estabelecer sempre versões atuais de plug-ins no projeto.
Na pasta do projeto, o diretório Node_Modules também deve aparecer no qual todos os arquivos de plug-in do nó são armazenados. Todos os plugins desejados são instalados, você pode ir para a configuração do Gulp.
Configurando o gulpfile.js.
gulpfile.js. - Este é o principal arquivo de configuração do nosso Gerenciador de Tarefas, é nele que vamos armazenar todas as configurações e comandos.
Todo o trabalho Gulp se resume a tarefa ( inglês uma tarefa). A tarefa é uma função independente separada chamada. Cada tarefa pode ser causada separadamente.
Modo de cortesia com padrões modernos
Primeiro do arquivo, conecte o modo de compatibilidade apenas por padrões modernos:
"Use rigoroso";
Leia mais sobre esta diretiva.
Inicialize o plugin
Plugins são inicializados pela seguinte construção:
var initplugin \u003d requer ("nome do plug-in");
De acordo com este design, você inicializa todos os nossos plugins:
Var Gulp \u003d requer ("gulp"), // plugue principal stylus \u003d requer ("gulp-stylus"), // prefixer pré-processador \u003d requer ("gulp-autoprefixer"), // admissão de cssmin \u003d requer (" Gulp-minify-css "), // minificação css uglify \u003d requer (" gulp-uglify "), // minificação js jshint \u003d requer (" gulp-jshint "), // erros de rastreamento no JS Rigger \u003d requer (" Gulp -Rigger "), // Trabalhe com inclusões no HTML e JS Imagemin \u003d exigem (" Gulp-Imagemin "), // minimizando imagens spritesmith \u003d exigir (" gulp.spritesmith "), // conjunejo de imagens em Rimraf \u003d requer sprites ( "Rimraf"), // Limpeza Sourcemaps \u003d Requer ("Gulp-SourceMaps"), // Sourcemaps Renomear \u003d Requer ("Gulp-Rename"), // Renomear o encanador \u003d requer arquivos ("gulp-encanador"), / / Fusível para parar Galp Watch \u003d Requer ("Gulp-Watch"), // Expandindo os recursos do relógio Connect \u003d Requer ("Gulp-Connect"); // livereload.
Constantes de caminhos
Por conveniência, definimos imediatamente todas as formas e máscaras:
Var Path \u003d (Build: (// Aqui nós apontamos onde desistir pronto após arquivos de montagem HTML: "Build /", JS: "Build / Js /", CSS: "Build / CSS /", IMG: "Build / css / Imagens / ", fontes:" Build / Fonts / ", htaccess:" Build / ", ContentImg:" Build / IMG / ", sprites:" SRC / CSS / imagens / ", spritescss:" SRC / CSS / parcial / parcial / "), SRC: (// maneiras em que tomar HTML de origem:" SRC / Model / *. HTML ", // Syntax Src / Model / *. HTML diz Gole o que queremos levar todos os arquivos com extensão.html JS: "SRC / JS / [^ _] *. JS", // em estilos e scripts, precisaremos apenas de arquivos principais jshint: "src / js / *. JS", CSS: "src / css / estilos.styl", CSSVendor: "SRC / CSS / fornecedor\u003e *", // se quisermos arquivos de biblioteca armazenar separadamente esse Rassenger IMG: "src / css / imagens / ** / ***", // sintaxe img / ** / 2 *. Meios - Leve todos os arquivos de todas as extensões da pasta e das fontes aninhadas catálogos: "SRC / Fonts / Montado", ContentImg: "SRC / IMG / ** / 2 *", Sprites: "SRC / CSS / Sprites / *. Png ", htaccess:" src / .htaccess "), assista: (// Vamos apontar, para mudar KA KIH Arquivos Queremos assistir HTML: "SRC / Model / ** / *. HTML", JS: "SRC / JS / ** / *. JS", CSS: "SRC / CSS / ** / 2 **" , IMG: "SRC / CSS / Images / ** / 7/27, ContentImg:" SRC / IMG / ** / *, fonts: "SRC / Fonts / ** / 2 *", htaccess: "SRC / .htaccess ", Sprites:" src / css / sprites / *. Png "), limpo:" ./build ", // diretório que pode ser limpo OutuDSDIR:" ./build "// Diretório raiz de origem para executar o ministro);
Por favor, note que podemos usar máscaras de nome:
- * .js. - Todos os arquivos com extensão JS
- [^ _] *. JS - Todos os arquivos com a extensão JS, excluindo aqueles que começam a partir do menor sublinhado
- *.* - todos os arquivos com qualquer extensão dentro do alto-falante atual
- / ** / * .html - todos os arquivos com extensão.html dentro do diretório atual e todos os diretórios subsidiários
Tarefa (Tarefas)
Agora que todas as constantes são soletradas, você pode começar a escrever taskov. Todas as tarefas têm o seguinte design:
Gulp.task ("taskname", função () (// algumas funções));
Mini-servidor e Livereload
Primeiro de tudo, vamos configurar a operação do servidor local e do Livereload:
// Servidor local Para o desenvolvimento de GULP.TASK ("Connect", Função () (Connect.Server (((// Misture o diretório raiz do servidor:, // diretório raiz da porta: 9999 Server, // que porta usará o Livereload: True // Inicialize o trabalho livereload)))));
Muito provavelmente você terá que trabalhar de uma só vez em vários projetos. O servidor permite que você execute simultaneamente vários servidores, suficientemente para diferentes projetos para registrar sua porta.
Bild HTML.
// Tarefa para construir HTML GULP.TASK ("HTML: Build", Função () (GULP.SRC (Path.src.html) // Selecione arquivos no caminho desejado. Tubo (Rigger ()) // Tocando via Rigger . Tubo (gulp.dest) // descarregue-os para a pasta de compilação .pipe (connect.reload ()) // e reinicialize nosso servidor para atualizações));Construir JS.
// Verifique o JS em erros e os prenda no console do Gulp.Task ("jshint: build", função () (retorno gulp.src (path.src.jshint) // Selecione arquivos no caminho desejado. Tubo (jshint )) // executar via jshint .pipe (jshint.réporter ("jshint-elegante")); // elegante uma saída de erros no console)); // Bilding Yavascript Gulp.Task ("JS: Build", função () (GULP.SRC (Path.src.js) // Encontre nosso arquivo principal.pipe (Rigger ()) // tocando via Rigger .pipe (Sourcemaps .init ()) // Initialize SourceMap .pipe (Uglify ()) // cantando nossos cartões JS .pipe (sourcemaps.write ()) // propiando cartões. Tubo (Renomear (sufixo: ".min")) / Adicionar suffix.min para o arquivo de saída.pipe (gulp.dest (path.build.js) // descarregar arquivo pronto em construir .pipe (connect.reload ()) // e reinicialize o servidor));Construir sprite
Todas as imagens para combinar em sprites somam-se ao diretório SRC / CSS / Sprites e, após a execução via Gulp, torne-se uma única imagem de spro. Em Sprites, você não deve adicionar logotipos e placas sem tamanhos claros.
// bilda sprites gulp.task ("sprites: build", function () (var spritedata \u003d gulp.src (path.src.sprites) // Selecione de onde tirar imagens para unir em sprites (spriteesmith ((imgname: " Sprite.png ", // O nome da imagem de pulverização CSSNAME:" sprite.styl ", // nome do estilo onde você armazena posições de imagem em imgpath:" imagens / sprite.png ", // Way Wheels Sprite CssFormat:" Stylus "Formato // formato no qual eu procolo a posição CSstemplate:" stylus.template.mustache ", // Função de máscara de arquivo cssvarmap: função (sprite.name \u003d" s- "+ sprite.name // O nome de cada sprite consistirá de Um nome de arquivo e o design "s-" no início do nome)))); spritedata.img.pipe (gulp.dest (path.build.sprites)); // Caminho, onde salvamos a imagem Spritedata. css.pipe (gulp.dest (caminho .build.spritescss)); // o caminho onde salvamos estilos));
Para a saída do sprite, basta usar a mistura. Por exemplo, para o arquivo Lorem.png, a amostra do sprite será assim:
Lorem Sprite ($ S-Lorem)
Agora, o objeto com a classe.lorem terá o tamanho da imagem e a própria imagem como pano de fundo.
Bild imagens estáticas
Imagens estáticas são imagens usadas no modelo de layout.
// buildim imagens estáticas gulp.task ("Image: Build", função () (GULP.SRC (Path.src.img) // Selecione nossas fotos. Tubo (Imagemin (((// cante progressivo: True, // Compression.JPG SVGOPLUGINS: [(removeviewbox: False)], // SVG entrelaçado: True, //svg.gif OptimizationLEVEL: 3 // taxa de compactação de 0 a 7))) .pipe (Gulp.Dest (caminho. Construir. IMG)) // descarregar em construir .pipe (connect.reload ()) // reinicialize o servidor));
Bild Dynamic Images.
Imagens dinâmicas são imagens de conteúdo que serão alteradas no site e no nível de modelo serão conectadas apenas à demonstração. Por exemplo, pode ser imagens para notícias, etc.
// Buildim Dynamic Images Gulp.Task ("ImagesContent: Build", função () (GULP.SRC (Path.src.conentimg) .pipe (Imagemin ((((// cante eles progressivos: verdadeiro, //spage.jpg svgoplugins: [(Removeviewbox: False)], // SVG entrelaçado: True, //spotion.gif OptimizationLEVEL: 3 // taxa de compressão de 0 a 7))) .pipe (gulp.dest (path.build.conentimg)) // descarregar em construir .pipe (connect.reload ()) // reinicialize o servidor));
Bildim css.
// Construindo Costume CSS Gulp.Task ("CSSOwn: Build", função () (GULP.SRC (Path.src.css) // Selecione nosso arquivo de estilo principal. Tubo (sourcemaps.init ()) // Inicialize Soucemap. Tubo (Stylus ((Compress: True, "Inclua CSS": True)) // Compile Stylus .pipe (prefixer (navegador: [Última 3ª versão ","\u003e 1% "," ou seja, 8 ", "]))) // add Vendor Prefixes.pipe (CSSMIN ()) // surminem.pipe (sourcemaps.write ()) // Propyash Sourcemap .Pipe (Renomear (Suffix:" .min ")) / / / add suffix.min para o nome do arquivo de saída Name.pipe (gulp.dest (path.build.css) // bebida no build .pipe (connect.reload ()) // reinicialize o servidor));Tarefa separada para estilos externos:
// Building Vendon CSS GULP.TASK ("CSSVendor: Build", Função () (GULP.SRC (Path.src.cssvendor) // Tomamos o fornecedor .pipe pasta (sourcemaps.init ()) // inicialize Soucemap. Tubo (cssmin ()) // surrem.pipe (sourcemaps.write ()) // Propyash Sourcemap .pipe (gulp.dest (path.build.css) // descarregado em build.pipe (connect.reload ()) // Reinicialize o servidor));
Também adicione tarefa para a BILD GERAL CSS:
// bildim css inteiro gulp.task ("CSS: Build", ["CSSOWN: Build", // "CSSVendor: Build"]);
Se você quiser lidar com estilos externos separadamente em casa e descarregá-los com arquivos individuais, você precisa rargar a linha "CSSVendor: Build"
Construir fontes
// bildim gulp.task fonts ("fontes: construir", função () (gulp.src (path.src.fonts) .pipe (gulp.dest (path.build.fonts)) // descarregar em construção));Construir.htaccess.
// bildim htaccess gulp.task ("htaccess: build", função () (gulp.src (path.src.htaccess) .pipe (gulp.dest (path.build.htaccess) // descarregar em construção));Construir comum
Para que fiquemos comprovados a cada parte separadamente, Propyat Task for General Build:
// Bildim Tudo Gulp.Task ("Build", [HTML: Build "," Jshint: Build "," JS: Build "," Sprites: Build "," CSS: Build "," Fonts: Build "" HTACCESS: Build, "Image: Build" ", ImagensContent: Build"]);
Limpeza de Bilda
Às vezes é necessário limpar completamente o diretório de compilação. Aqui a próxima tarefa virá ao resgate:
// Limpe a pasta Bild Gulp.Task ("limpo", função (CB) (RIMRAF (Path.clean, CB);)););
Assista ou rastreando mudanças em tempo real
Um dos mais importantes e características úteis Gulp é a função de observação que permite rastrear em tempo real todas as alterações com os arquivos produzidos e, dependendo disso, realizam etapas específicas:
// relógio gulp.task ("assistir", função () (// bildim html em caso de mudança de relógio (, função (evento, cb) (Gulp.start ("html: build");); // buildim Sprites em caso de mudança de relógio (, função (evento (evento, cb) (Gulp.start ("sprites: build");)); // Construção de amostragem contextual em caso de mudança de relógio (, função (evento, cb) (Gulp. Iniciar ("ImagesContent: Build");)); // bildim css em caso de mudança de relógio (, função (evento, cb) (Gulp.start ("CSS: Build");); // Verifique o JS em Caso de mudança de relógio (, ["jshint"]); // bildim js em caso de mudança de relógio (, função (evento, cb) (Gulp.start ("JS: Build");); // bildim imagens estáticas Em caso de mudança de relógio (função ("imagem: build");)); // bildim fontes Se você alterar o relógio (, função (evento, cb) (Gulp.start ("fontes: build"); / / Bildim htccess em caso de mudança de relógio (, função (evento, cb) (Gulp.start ("htaccess: build");))););));)
Ações padrão
Ações padrão - Quais tarefas realizarão o Gerenciador de Tarefas ao entrar no comando Gulp no console:
// ações padrão gulp.task ("padrão", ["Build", "assistir", "Connect"]);
No nosso caso, em defesa, seremos trazidos para o nosso projeto, vamos ligar o modo de observação e começar o servidor.
Comandos de linha de comando
Todos os comandos do Galpa para a linha de comando consistem em duas partes. Este é diretamente o comando gulp e o nome da tabela. Aqui está uma lista de comandos aplicáveis \u200b\u200bà nossa configuração:
- gulp - O comando principal, lança o padrão de tarefa
- gulp Build - Bildim Tudo
- gulp Watch - Start Watch
- gulp Clean - Limpeza do Catálogo da Construção
- gulp Connect - Start Server
- gulp HTML: Build - Html Bild
- gulp jshint: build - verifique js por erros
- gulp js: build - construir JS
- gulp Sprites: Construir - Construir Sprite
- gulp Image: Build - Bild imagens estáticas
- gulp Imagecontent: Construir - Bild Dynamic Images
- gulp CSSOWN: Build - CSS Custom Bild
- gulp Cssvendor: Build - Bild CSS externos
- gulp CSS: Construção - Common CSS Bild
- gulp Fonts: Build - Bild Fonts
- gulp Htaccess: Build - Build.htaccess
Nesta fase, o gulpfile.js está concluído.
Copie o pacote inicial no projeto
Para começar, passe pelo console na pasta onde estamos desenvolvendo, como o CD desenvolve / exemplo e copie tudo, desde o diretório de pacote inicial para o nosso projeto CP -A ~ / Desenvolvimento / Start /. ~ / Desenvolver / exemplo /
Este método de cópia é mais conveniente, porque Ele copiará com precisão tudo, incluindo arquivos ocultos .gitignore, etc.
Conclusão
Usando este guia Nós preparamos um pacote inicial para usar o Gulp em seus projetos para desenvolvimento front-end.
Também este pacote está disponível no GitHub
Post Scriptum
Este artigo não é final e será atualizado dependendo das mudanças e melhorias.
