Gulp de description em russo. Instalando e usando o Gulp

Instalar o Gulp é bastante simples. Primeiro, instale o pacote Gulp globalmente:

Npm install -g gulp

Em seguida, instale-o em seu projeto:

Npm install --save-dev gulp

Usando Gulp

Vamos criar uma tarefa Gulp para reduzir um de nossos arquivos JavaScript. Crie um arquivo chamado gulpfile.js. Ele definirá suas tarefas, que são executadas com o comando gulp.

Adicione os seguintes comandos ao arquivo gulpfile.js:

Var gulp = require ("gulp"), uglify = require ("gulp-uglify"); gulp.task ("minify", function () (gulp.src ("js / app.js") .pipe (uglify ()) .pipe (gulp.dest ("build"))));

Instale o gulp-uglify via npm executando npm install --save-dev gulp-uglify e, em seguida, execute a tarefa por meio do gulp minify. Suponha que você tenha um arquivo chamado app.js em sua pasta js, um novo app.js será criado na pasta de construção e conterá uma versão compactada de js / app.js.

O que realmente está acontecendo aqui?

Fazemos algumas coisas em nosso gulpfile.js. Primeiro, carregamos os módulos gulp e gulp-uglify:

Var gulp = require ("gulp"), uglify = require ("gulp-uglify");

Em seguida, definimos uma tarefa chamada minify que, quando executada, chama a função fornecida como seu segundo argumento:

Gulp.task ("minificar", função () ());

No final, e esta é a parte mais difícil, definimos o que nossa tarefa deve fazer:

Gulp.src ("js / app.js") .pipe (uglify ()) .pipe (gulp.dest ("build"))

Se você não estiver familiarizado com threads e a maioria dos desenvolvedores de front-end não estiver familiarizada com eles, o código acima não dirá nada.

Streams

Os fluxos permitem que alguns dados sejam passados ​​por meio de uma série de funções geralmente pequenas que modificam os dados e depois os passam para a próxima função.

No exemplo acima, a função gulp.src () pega uma string que corresponde a um arquivo ou conjunto de arquivos e cria um fluxo de objetos que representam esses arquivos. Eles então fluem (ou transbordam) para a função uglify (), que pega os objetos de arquivo e retorna novos objetos de arquivo com a fonte minimizada. Esse resultado então flui para a função gulp.dest (), que salva os arquivos modificados.

Aqui está o que acontece na forma de um diagrama:

Quando há apenas uma tarefa, a função não faz nada. No entanto, considere o seguinte código:

Gulp.task ("js", function () (return gulp.src ("js / *. Js") .pipe (jshint ()) .pipe (jshint.reporter ("default")) .pipe (uglify () ) .pipe (concat ("app.js")) .pipe (gulp.dest ("build"));));

Para executá-lo sozinho, instale gulp, gulp-jshint, gulp-uglify e gulp-concat.

Esta tarefa pega todos os arquivos correspondentes a js / *. Js (em outras palavras, todos Arquivos JavaScript da pasta js), executa JSHint para eles, imprime um relatório, minimiza cada arquivo e, em seguida, mescla-os, salvando-os em build / app.js. Como um diagrama:

Se você estiver familiarizado com o Grunt, notará que ele é bem diferente de como o Grunt funciona. Grunt não usa streams. Em vez disso, ele pega arquivos, executa uma tarefa para cada arquivo e salva em novos arquivos, repetindo todo o processo para cada tarefa. Como resultado de muitas chamadas ao sistema de arquivos, o Grunt é mais lento que o Gulp.

Para uma melhor compreensão dos fluxos, leia o Manual do Fluxo.

gulp.src ()

A função gulp.src () pega um ou mais arquivos ou um array e retorna um stream que pode ser passado para plugins.

Os outros dois plug-ins são mais claros: a função uglify () minimiza o código e a função concat ("app.js") concatena todos os arquivos em um denominado app.js.

gulp-load-plugin

O módulo que considero bastante útil é chamado gulp-load-plugins, ele carrega automaticamente quaisquer plug-ins Gulp do arquivo package.json e os anexa ao objeto. As principais aplicações são as seguintes:

Var gulpLoadPlugins = require ("gulp-load-plugins"), plugins = gulpLoadPlugins ();

Você pode escrever tudo em uma linha ( var plugins = require ("gulp-load-plugins") ();), mas não sou um grande fã de chamadas requeridas de uma linha.

Depois de executar esse código, o objeto de plug-ins conterá seus plug-ins com nomes no estilo CamelCase (por exemplo, gulp-ruby-sass será carregado como plugins.rubySass). Você pode usá-los da maneira usual. Por exemplo, nossa tarefa js encolherá assim:

Var gulp = require ("gulp"), gulpLoadPlugins = require ("gulp-load-plugins"), plugins = gulpLoadPlugins (); gulp.task ("js", function () (return gulp.src ("js / *. js") .pipe (plugins.jshint ()) .pipe (plugins.jshint.reporter ("default")) .pipe (plugins.uglify ()) .pipe (plugins.concat ("app.js")) .pipe (gulp.dest ("build"));));

Anexado a este está um arquivo package.json que contém algo semelhante:

("devDependencies": ("gulp-concat": "~ 2.2.0", "gulp-uglify": "~ 0.2.1", "gulp-jshint": "~ 1.5.1", "gulp": " ~ 3.5.6 "))

Este exemplo não é muito mais curto. No entanto, para arquivos Gulp grandes e complexos, isso reduzirá o bloqueio de upload de arquivo para uma ou duas linhas.

A versão 0.4.0 do gulp-load-plugins lançada no início de março adicionou o carregamento lento do plug-in, o que melhora o desempenho. Os plug-ins não serão carregados até que sejam chamados, o que significa que você não precisa se preocupar com plug-ins não usados ​​em package.json afetando o desempenho (embora provavelmente devam ser removidos de qualquer maneira). Em outras palavras, se você executar uma tarefa que requer apenas dois plug-ins, ela não carregará todos os plug-ins necessários para outras tarefas.

Rastreamento de arquivo

O Gulp tem a capacidade de observar as alterações do arquivo e executar uma tarefa ou tarefas quando as alterações são detectadas. Esta função é surpreendentemente útil (provavelmente uma das mais úteis no Gulp para mim). Você pode salvar o arquivo Less e Gulp irá transformá-lo em CSS e atualizar o navegador sem qualquer ação de sua parte.

Para observar um arquivo ou arquivos, use a função gulp.watch (), que obtém um padrão de arquivos ou uma matriz (como gulp.src ()), ou uma matriz de tarefas para executar ou executar uma função de retorno de chamada.

Suponha que temos uma tarefa de construção que converte nossos arquivos de modelo em HTML e queremos definir uma tarefa de observação que monitora as alterações do modelo e executa uma tarefa para convertê-los em HTML. Podemos usar a função de relógio assim:

Gulp.task ("watch", function () (gulp.watch ("templates / *. Tmpl.html", ["build"]);));

Agora, ao alterar o arquivo de modelo, uma tarefa de construção será executada, gerando o HTML.

Você também pode especificar uma função de retorno de chamada para observação em vez de uma série de tarefas. Nesse caso, a função recebe um objeto de evento contendo informações sobre o evento que chamou a função:

Gulp.watch ("templates / *. Tmpl.html", function (event) (console.log ("Tipo de evento:" + event.type); // adicionado, alterado ou removido console.log ("Caminho do evento:" + event.path); // caminho para o arquivo));

Outro grande recurso de gulp.watch () é que ele retorna um observador. Use-o para ouvir eventos adicionais ou para adicionar arquivos para assistir. Por exemplo, para executar a lista de tarefas e chamar uma função ao mesmo tempo, você pode adicionar um ouvinte ao evento de mudança quando o inspetor retornar:

Var watcher = gulp.watch ("templates / *. Tmpl.html", ["build"]); watcher.on ("alterar", função (evento) (console.log ("Tipo de evento:" + event.type); // adicionado, alterado ou removido console.log ("Caminho do evento:" + event.path); // o caminho para o arquivo));

Além do evento de mudança, você pode ouvir uma série de outros eventos:

  • fim
    Dispara quando o inspetor termina (o que significa que as tarefas e chamadas de retorno não serão mais chamadas quando os arquivos forem alterados).
  • erro
    Dispara quando ocorre um erro.
  • pronto
    Dispara quando os arquivos são encontrados e estão prontos para serem rastreados.
  • nomatch
    Dispara quando nenhum arquivo corresponde à solicitação.

O objeto observador também contém alguns métodos que podem ser chamados:

  • watcher.end ()
    Interrompe o inspetor (isso evita que tarefas ou retornos de chamada sejam mais chamados).
  • watcher.files ()
    Retorna uma lista de arquivos observados pelo observador.
  • watcher.add (glob)
    Adiciona arquivos ao observador que correspondem ao padrão glob especificado (também aceita uma função de retorno de chamada opcional como seu segundo argumento).
  • watcher.remove (caminho do arquivo)
    Remove um arquivo específico do inspetor.

Olá pessoal. Se você gosta de JS de alguma forma, provavelmente já ouviu falar de um aplicativo como o gulp. Ou talvez até o tenham usado. Por experiência própria, posso dizer que pode ser difícil "entrar" em como trabalhar com isso, embora a chave para a compreensão esteja na superfície. Portanto, publico este material, esperando que seja útil.

Além disso, com base nesse material, foi feito um vídeo, para que você possa escolher de que forma consumir.


Se você comparar o gole com outros sistemas de construção populares, é como comparar um drone "compre e voe" pronto para uso e um conjunto de auto-montagem drone. Sim, você só vai decolar no dia seguinte, mas suas mãos têm mais flexibilidade e controle, principalmente se você tiver uma tarefa fora do padrão.

Na verdade, depois de passar o limiar de entrada, o gole não parece tão complicado e, em alguns momentos, é até claro e lógico. Mas, sem uma preparação adequada, pode ser difícil chegar a esse estado. Vamos mergulhar nisso e ver em que princípios o gulp se baseia.

Vamos de longe. No ecossistema nodejs, existem coisas como riachos ou riachos. Devido à complexidade da tradução, os threads também são chamados de threads de um programa multithread. Em nosso caso, um fluxo é um objeto que representa dados de fluxo e é um conceito completamente diferente.

Então, esses fluxos oferecem interface amigável para trabalhar com dados de forma assíncrona. Todo o processo de leitura / gravação é gerenciado pelo mecanismo do nó, e só temos os retornos de chamada correspondentes quando um novo dado apareceu, quando ocorre um erro, quando o fluxo termina, etc. Assim, a eficiência de E / S é alcançada com custo mínimo para o programador.

Const fs = require ("fs"); const input = fs.createReadStream ("meuarquivo"); input.on ("dados", (pedaço) => (console.log (pedaço);)); input.on ("end", () => (console.log ("arquivo é lido");));
Streams em nodejs podem ser quase tudo, desde arquivos ou strings até sockets. Por exemplo, na conhecida estrutura Express, Solicitação HTTP e a resposta nada mais é do que riachos. Os streams podem ser somente leitura, somente gravação ou ambos.

Os streams têm um função útil: eles podem ser adicionados juntos em uma cadeia chamada de tubo. Assim, podemos combinar vários streams entre si e gerenciá-los como um todo. A saída de um fluxo vai para a entrada do próximo e assim por diante até o final. Como você pode imaginar pela tradução da palavra pipe, ela se parece muito com um pipeline.

Isso permite que você determine o fluxo de dados necessário (novamente, a complexidade da tradução. Aqui, queremos dizer fluxo ou fluxo) aqui e agora, sem esperar que os dados estejam disponíveis.

Por exemplo, é assim que podemos determinar o que queremos dar como resultado, e a própria máquina já está empenhada em “como” dar.

Const fs = require ("fs"); const express = require ("express"); var app = express (); app.get ("/", function (req, res) (fs.createReadStream ("myfile") .pipe (res);)); app.listen (3000);
Observe que o manipulador de solicitação é concluído antes mesmo de o arquivo ser aberto - o mecanismo do nó assume o resto.

O Gulp é baseado em uma abordagem semelhante. Essa é a sua vantagem, mas também a sua desvantagem. A desvantagem, pelo menos, pode ser chamada devido à confusão resultante, já que o gulp usa outros fluxos semelhantes, mas incompatíveis. Gulp trabalha bem com sistema de arquivo, é por isso que ele usa fluxos que representam não tanto um fluxo de dados, mas sim fluxos separados arquivos virtuais, cada um com seu próprio conteúdo.

Se você já ouviu falar em vinil, esta é a implementação de stream que o gulp usa. Se pegarmos uma tarefa padrão para um galp e vermos o que está dentro, descobriremos que para cada chamada do evento de dados, um objeto de arquivo chega até nós, que contém todas as informações necessárias: o nome do arquivo, o caminho para o arquivo , o diretório de trabalho e, claro, seu conteúdo.

Const gulp = require ("gulp"); gulp.task ("default", function () (gulp.src ("./*. js") .on ("dados", função (arquivo) (console.log ("retorno de chamada de dados"); console.log ( file.inspect ()); / * Produz: * retorno de chamada de dados * > * chamada de retorno de dados * > * /)) .pipe (gulp.dest ("dist /")); ));
O conteúdo pode ser apresentado em dois formatos: na forma de um buffer já lido ou na forma de um fluxo de nó nativo. Cada etapa do pipe Galp pega esses arquivos como entrada, faz uma determinada transformação e transfere para a saída para a próxima cadeia. A última cadeia geralmente apenas os salva no disco.

Pipe (gulp.dest ("dist /"));
A consciência do fato de que as correntes no gole são diferentes leva à iluminação e à compreensão, pois isso explica a maioria dos problemas e erros.

Considerar exemplo real... Você deseja usar o browserify para colar seus arquivos JS. Vá e encontre o plugin gulp-browserify. Mas você vê um postscript que diz que o plugin está obsoleto, ou seja, Descontinuada.

Como um programador bem-educado, você rejeita essa opção e sai em busca de uma solução, que não está desatualizada. Encontre as receitas oficiais do gulp e verá que o browserify funciona diretamente com o gulp. Bem, como diretamente, através da camada, que apenas traduz o fluxo nativo do Nod no fluxo do vinil, que gole entende. Sem ele, nada funcionaria, uma vez que são tópicos diferentes.

Se você deseja escrever sua própria transformação, pode usar este modelo.
Como você pode ver, tudo é simples aqui: nosso handler será chamado para cada arquivo, que fará as modificações. Podemos fazer o que quisermos: alterar o conteúdo do arquivo, renomear o arquivo, excluí-lo ou adicionar mais alguns arquivos ao fluxo.

Como lembramos, o conteúdo de um arquivo em um stream de vinil pode ser representado como um buffer ou como um stream de dados. No entanto, não é necessário apoiar ambos. Você sempre pode usar o pacote

Olá pessoal! Neste artigo, iremos criar nosso projeto, inicializar o arquivo de manifesto e instalar Gole localmente.

Em primeiro lugar, deve ser dito que o caminho para a pasta (incluindo o nome de usuário do computador) deve estar em língua Inglesa caso contrário, você pode obter erros ao usar Gole... Eu criei uma pasta Projetos, em que vou criar todos os meus projetos. Por exemplo, vou nomear nosso projeto firstProject.

Então, no último artigo nós instalamos Gole globalmente, agora precisamos instalá-lo localmente. Em primeiro lugar, faremos a inicialização. Escreva o seguinte comando no terminal:

Cd path_to_your_project (cd "user / projects / firstProject")
npm init

Graças a este comando, criaremos um arquivo de manifesto básico para nosso projeto. Em princípio, tudo está claro aí, então não vou explicar. Se você não quiser se preocupar com todas essas configurações, basta pressionar o tempo todo entrar Desde a vamos precisar desse arquivo para outro, configurações iniciais não são tão importantes.

Se você fez tudo corretamente, o arquivo deve aparecer na pasta do seu projeto package.json... Se você abri-lo, verá que todas as informações que você inseriu (ou não inseriu) durante a inicialização estão armazenadas lá. Além disso, o arquivo armazena informações sobre os pacotes usados ​​e é exatamente disso que precisamos. Se você usa constantemente, por exemplo, a biblioteca JQuery, então você pode gravá-lo neste arquivo e ele será baixado automaticamente quando você iniciar um novo projeto.

Agora vamos instalar Gole localmente em nossa pasta.

Npm i gulp --save-dev

Bandeira --save-dev necessário para o pacote Gole e sua versão foi gravada automaticamente no arquivo package.json... Se você abrir este arquivo depois de instalar o pacote com êxito, verá que o seguinte aparece lá:

"devDependencies": (
"gole": "^ 3.9.1"
}

Acho que está claro que o nome do pacote e sua versão estão escritos aqui. Uma seta para cima indica que este pacote pode ser atualizado. Também temos uma pasta node_modules onde agora está armazenado Gole e todas as suas dependências. É aqui que os novos módulos serão instalados.

Então é tudo por hoje. Nós consideramos como instalar gulp localmente para a pasta do projeto e por que você precisa de um manifesto package.json.

Para acelerar o processo de desenvolvimento de front-end, automatizamos algumas tarefas usando o construtor Gulp.
Para isso, precisamos de um gerenciador de pacotes NPM. Mas, para instalar o NPM, primeiro você precisa instalar o Node.js.

Etapa 1. Instalando o Node
Acesse o site oficial https://nodejs.org e baixe a versão recomendada.

Execute o instalador com direitos de administrador.
Após a instalação, 2 ícones aparecerão: Node.js e o prompt de comando Node.js. Eles não serão úteis para nós, uma vez que não usamos Node.js e existem opções mais convenientes para iniciar o console:
1. Use o Console de Comando TotalCommander (Comandos - Abra o Console de Comando).
2. Segure a tecla Shift e clique com o botão direito para abrir menu contextual... Nele aparecerá o item "Abrir janela de comando".
É melhor iniciar a linha de comando enquanto estiver no diretório do projeto de que você precisa, o console exibirá imediatamente o caminho para o diretório necessário, o que eliminará a necessidade de inserir o caminho manualmente.

Para verificar as versões de nó e npm, digite na linha de comando
node -v e pressione Enter
então npm -v

As versões do NPM geralmente são atualizadas com mais frequência do que as versões do nó para obter a versão mais recente:
npm install [email protegido]-g

Comandos Npm que precisamos :
lista npm- lista de todos pacotes instalados
npm -g ls - profundidade = 0- lista de pacotes instalados globalmente
npm desatualizado verifique se os pacotes estão desatualizados
npm update gulp- atualização das versões do plugin
npm init- criar package.json
npm install package_name- instale o pacote (package_name é o nome do pacote necessário)
npm install package_name --save-dev- instale o pacote e escreva sobre ele em package.json na seção devDependencies
desinstalação npm nome do pacote- remoção de pacote
npm install- instale todos os pacotes listados em package.json
Antes de lançar em produção embalagem plástica npm- conserte as versões dos pacotes, agora o npm install irá instalá-los exatamente e você terá a certeza de que tudo funcionará como deveria

Abreviações
-v: --version
-g: --global
-S: --save
-D: --save-dev
-y: --sim
-n: --sim falso

Etapa 2. Instalando o gulp
Primeiro, o gulp precisa ser instalado globalmente.

Iniciamos o console de comando.
Às vezes, em alguns recursos, há um cifrão na frente do comando, por exemplo
$ npm install --global gulp-cli

Não copie o cifrão, cole apenas o comando em si
npm install --global gulp-cli

Dica: colar o texto copiado em linha de comando, abra a linha de comando, pressione ALT + ESPAÇO -> Valores padrão, marque a caixa de seleção Selecionar com o mouse. Agora você pode selecionar o texto com o mouse, copiar, em com. clique com o botão direito na linha - o texto será inserido automaticamente.

Etapa 3. Trabalhar com gole em um projeto específico

3.1 Primeiro, vamos criar um pacote de dependência package.json
O arquivo package.json contém as informações que inseriremos no terminal e uma lista de todos os pacotes que usamos no projeto.

Ao instalar um pacote com a opção --save-dev, o pacote é adicionado automaticamente ao package.json. Para não instalar todos os pacotes manualmente a cada novo projeto, usaremos o package.json pronto com os módulos e dependências de que precisamos, colocando-o na raiz do nosso projeto.

package.json é gerado usando o comando npm init, que irá imprimir algumas perguntas no console para criar o arquivo.
Na cláusula name, por padrão, o nome do diretório do seu projeto é exibido.

Dica:
Você pode gerar este arquivo mais rápido e fácil usando a opção - sim (sim automático para todas as perguntas):
npm init - sim

Bom saber:
Você pode definir os valores padrão que serão usados ​​sempre que executar o npm init, o que economizará seu tempo. Após a instalação, eles são salvos em arquivos .npmrc.
Por exemplo:
npm config set init.author.name "Valentina Vladova"
npm config set init.author.email " [email protegido]"
npm config set init.author.url "http://simpalmarket.com/"
npm set init-license MIT
npm set init-version 0.0.0
Em seguida, execute npm init, todos os valores especificados serão puxados para as variáveis ​​correspondentes.

Quando o npm init perguntar sobre o repositório git, escreva logo user / repo - npm é inteligente o suficiente para expandir a linha em https://github.com/user/repo. O npm também irá gerar os campos de repositório, bugs e homepage no formato correto.

Então, vá para a pasta raiz do projeto, chame o console de comando e digite
npm init - sim

O arquivo Json com algo assim aparecerá na raiz do projeto

3.2 Instale o gole localmente
Na pasta do projeto no console, digite:
npm install --save-dev gulp

ou abreviado
npm i gulp --save-dev

A lista conterá Avisar - ignore.

Para verificar a versão, use o comando
gulp - versão

A pasta node_modules apareceu no diretório raiz do projeto. Todos os módulos e dependências que instalaremos no projeto serão automaticamente carregados nele. Pode haver muitas pastas com dependências, mesmo que não haja tantos pacotes instalados. Isto se deve ao fato de que além dos pacotes principais, são instalados programas necessários ao correto funcionamento do pacote principal. Você não precisa limpar e excluir nada da pasta node_modules.

O arquivo Json irá adicionar uma entrada
"devDependencies": (
"gole": "^ 3.9.1"
}

Agora você pode instalar vários plug-ins para o gulp.
http://gulpjs.com/plugins/
No campo de pesquisa, digite o nome do plugin de seu interesse.

Os plug-ins podem ser instalados um de cada vez, por exemplo:
npm install --save-dev gulp-plumber
e uma lista separada por um espaço, por exemplo:
npm install gulp-sass gulp-encanador gulp-autoprefixer gulp-minify-css --save-dev
Os plug-ins de instalação e de construção são melhor instalados usando comandos separados.

Npm init

Você vai precisar de:

  • Especifique o nome do projeto
  • Versão do projeto
  • Descrição do projeto
  • Ponto de entrada
  • O time
  • Repositório Git
  • Palavras-chave
  • Nome do autor
  • Licença

Npm i –g gulp

  • Nome da tarefa

Teste de gole

A tarefa está funcionando.

Gulp serve

Npm i gulp-sass --save-dev

  1. Compilando sass para css
  2. Adicionando prefixos
  3. Salvando arquivo em src / css

Criando uma tarefa em gole

Conclusão.

https://gulpjs.com/plugins/

Abra o terminal e vá até a pasta com o projeto. A primeira coisa que precisamos fazer é inicializar o npm para isso, executamos o comando:

Npm init

Você vai precisar de:

  • Especifique o nome do projeto
  • Versão do projeto
  • Descrição do projeto
  • Ponto de entrada
  • O time
  • Repositório Git
  • Palavras-chave
  • Nome do autor
  • Licença

Tudo pode ser deixado por padrão (se você não quiser fazer o upload do projeto para acesso geral)

Em seguida, confirmamos as informações inseridas.

Multar. NPM foi inicializado. O arquivo packages.json agora aparece na raiz - o arquivo de configuração do gerenciador de pacotes.

Agora podemos instalar o gulp. Primeiro você precisa instalá-lo globalmente e, em seguida, para o projeto. Para instalar globalmente, execute o seguinte comando:

Npm i –g gulp

Agora vamos instalar o gulp para o projeto:

Npm install --save-dev gulp

Todo o gulp para o projeto está instalado.

Vamos checar. Vamos criar um arquivo gulpfile.js e criar uma tarefa de teste nele, que produzirá “Estou trabalhando” no console.

Var gulp = require ("gulp"); gulp.task ("teste", função () (console.log ("Estou trabalhando");));

Primeiro, incluímos o gulp e, segundo, chamamos a função de tarefa do gulp, que usa dois parâmetros:

Agora, no console, execute o seguinte comando

Teste de gole

A tarefa está funcionando.

Agora vamos instalar e habilitar pacotes que ajudam no layout.

Browsersync, um pacote que permite que você atualize automaticamente a página quando os arquivos mudam

Para instalar no console, execute o seguinte comando:

Npm i browser-sync --save-dev

Agora, vamos criar uma tarefa que executará a sincronização do navegador e rastreará as alterações nos arquivos.

Gulp.task ("serve", ["sass"], function () (browserSync.init ((server: "src /")); gulp.watch ("src / css / *. Css") on ("alterar ", browserSync.reload); gulp.watch (" src / *. html "). on (" alterar ", browserSync.reload);));

A tarefa é chamada de servir. E a sincronização do navegador irá atualizar a página do navegador automaticamente se os arquivos com a extensão css (que estão localizados na pasta src / css) e com a extensão html (que estão localizados na pasta src) foram alterados.

Para executar esta tarefa, execute o comando

Gulp serve

Eu uso atrevimento para layout. Então, eu uso o pacote gulp-sass para compilar de sass para css.

Instalando e configurando o gulp-sass

Para instalar o gulp-sass no console, execute o comando:

Npm i gulp-sass --save-dev

Agora vamos criar uma tarefa sass que compilará o sass para css. E vamos mudar a tarefa de serviço para que a sincronização do navegador rastreie em vez de arquivo css atrevimento.

Var gulp = require ("gulp"); var browserSync = require ("browser-sync"). create (); var sass = requer ("gulp-sass"); gulp.task ("serve", ["sass"], function () (browserSync.init ((servidor: "src /")); gulp.watch ("src / sass / *. sass", ["sass" ]); gulp.watch ("src / *. html"). on ("alterar", browserSync.reload);)); gulp.task ("sass", function () (return gulp.src ("src / sass / *. sass") .pipe (sass (). on ("erro", sass.logError)) .pipe (gulp. dest ("src / css")) .pipe (browserSync.stream ());));

Agora, quando você executar a tarefa de saque, a tarefa sass será executada.

Instalação e configuração do gulp-autoprefixer

Para instalar o gulp-autoprefixer, execute o comando:

Npm i gulp-autoprefixer --save-dev

E adicione um prefixo à tarefa sass.

Var gulp = require ("gulp"); var browserSync = require ("browser-sync"). create (); var sass = requer ("gulp-sass"); var autoprefixer = require ("gulp-autoprefixer"); gulp.task ("serve", ["sass"], function () (browserSync.init ((servidor: "src /")); gulp.watch ("src / sass / *. sass", ["sass" ]); gulp.watch ("src / *. html"). on ("alterar", browserSync.reload);)); gulp.task ("sass", function () (return gulp.src ("src / sass / *. sass") .pipe (sass (). on ("erro", sass.logError)) .pipe (autoprefixer ( (navegadores: ["últimas 2 versões"], cascata: false))) .pipe (gulp.dest ("src / css")) .pipe (browserSync.stream ());));

Agora, quando você executa uma tarefa sass, c terá:

  1. Compilando sass para css
  2. Adicionando prefixos
  3. Salvando arquivo em src / css

O pacote a seguir combina todos os arquivos css em um.

Instalando e configurando contactCss

Para instalar contactCss, use o seguinte comando:

Npm i gulp-concat-css --save-dev

E adicione a execução deste pacote à tarefa sass. (Vamos combinar todos os arquivos css em style.css)

Var gulp = require ("gulp"); var browserSync = require ("browser-sync"). create (); var sass = requer ("gulp-sass"); var autoprefixer = require ("gulp-autoprefixer"); var concatCss = require ("gulp-concat-css"); gulp.task ("serve", ["sass"], function () (browserSync.init ((servidor: "src /")); gulp.watch ("src / sass / *. sass", ["sass" ]); gulp.watch ("src / *. html"). on ("alterar", browserSync.reload);)); gulp.task ("sass", function () (return gulp.src ("src / sass / *. sass") .pipe (sass (). on ("erro", sass.logError)) .pipe (autoprefixer ( (navegadores: ["últimas 2 versões"], cascata: falso))) .pipe (concatCss ("style.css")) .pipe (gulp.dest ("src / css")) .pipe (browserSync.stream ( ));));

Multar. Agora vamos adicionar um pacote que renomeie os arquivos. (Vamos precisar quando reduzirmos os arquivos css e js)

Instalando e configurando gulp-rename

Para instalar o gulp-rename, execute o seguinte comando:

Npm i gulp-rename --save-dev

Por enquanto, não adicionaremos este pacote a nenhuma tarefa.

Instalando e configurando o pacote para minimizar arquivos CSS - clean-css

Para instalar clean-css, execute o seguinte comando:

Npm i gulp-clean-css --save-dev

Agora vamos criar uma tarefa mincss que irá adicionar o sufixo ".min" ao nome do arquivo, minificar o arquivo css e salvá-lo em app / css

Var gulp = require ("gulp"); var browserSync = require ("browser-sync"). create (); var sass = requer ("gulp-sass"); var autoprefixer = require ("gulp-autoprefixer"); var concatCss = require ("gulp-concat-css"); var cleanCSS = require ("gulp-clean-css"); var rename = require ("gulp-rename"); gulp.task ("serve", ["sass"], function () (browserSync.init ((servidor: "src /")); gulp.watch ("src / sass / *. sass", ["sass" ]); gulp.watch ("src / *. html"). on ("alterar", browserSync.reload);)); gulp.task ("sass", function () (return gulp.src ("src / sass / *. sass") .pipe (sass (). on ("erro", sass.logError)) .pipe (autoprefixer ( (navegadores: ["últimas 2 versões"], cascata: falso))) .pipe (concatCss ("style.css")) .pipe (gulp.dest ("src / css")) .pipe (browserSync.stream ( ));)); gulp.task ("mincss", function () (return gulp.src ("src / css / *. css") .pipe (renomear ((sufixo: ".min"))) .pipe (cleanCSS ()). tubo (gulp.dest ("app / css"));))

Ótimo, vamos instalar o pacote gulp que irá minimizar os arquivos js.

Instalando e configurando o pacote gulp para minimizar arquivos js —gulp-uglify

Para instalar o gulp-uglify, execute o seguinte comando:

Npm i gulp-uglify --save-dev

Agora vamos criar uma tarefa que irá adicionar o sufixo ".min" ao arquivo, minificar o arquivo js e salvá-lo em app / js

Var gulp = require ("gulp"); var browserSync = require ("browser-sync"). create (); var sass = requer ("gulp-sass"); var autoprefixer = require ("gulp-autoprefixer"); var concatCss = require ("gulp-concat-css"); var cleanCSS = require ("gulp-clean-css"); var rename = require ("gulp-rename"); var uglify = require ("gulp-uglify"); gulp.task ("serve", ["sass"], function () (browserSync.init ((servidor: "src /")); gulp.watch ("src / sass / *. sass", ["sass" ]); gulp.watch ("src / *. html"). on ("alterar", browserSync.reload);)); gulp.task ("sass", function () (return gulp.src ("src / sass / *. sass") .pipe (sass (). on ("erro", sass.logError)) .pipe (autoprefixer ( (navegadores: ["últimas 2 versões"], cascata: falso))) .pipe (concatCss ("style.css")) .pipe (gulp.dest ("src / css")) .pipe (browserSync.stream ( ));)); gulp.task ("mincss", function () (return gulp.src ("src / css / *. css") .pipe (renomear ((sufixo: ".min"))) .pipe (cleanCSS ()). pipe (gulp.dest ("app / css"));)) gulp.task ("minjs", function () (return gulp.src ("src / js / *. js") .pipe (renomear ((sufixo : ".min"))) .pipe (uglify ()) .pipe (gulp.dest ("app / js"));))

Criamos tarefas básicas. Mas os dois últimos devem ser feitos ao colocar o projeto em produção. E eles devem ser realizados juntos. Vamos criar uma tarefa que irá executar a tarefa mincss e depois minjs

Criando uma tarefa em gole

Vamos criar uma tarefa mínima que irá executar tarefas mincss e minjs

Var gulp = require ("gulp"); var browserSync = require ("browser-sync"). create (); var sass = requer ("gulp-sass"); var autoprefixer = require ("gulp-autoprefixer"); var concatCss = require ("gulp-concat-css"); var cleanCSS = require ("gulp-clean-css"); var rename = require ("gulp-rename"); var uglify = require ("gulp-uglify"); gulp.task ("serve", ["sass"], function () (browserSync.init ((servidor: "src /")); gulp.watch ("src / sass / *. sass", ["sass" ]); gulp.watch ("src / *. html"). on ("alterar", browserSync.reload);)); gulp.task ("sass", function () (return gulp.src ("src / sass / *. sass") .pipe (sass (). on ("erro", sass.logError)) .pipe (autoprefixer ( (navegadores: ["últimas 2 versões"], cascata: falso))) .pipe (concatCss ("style.css")) .pipe (gulp.dest ("src / css")) .pipe (browserSync.stream ( ));)); gulp.task ("mincss", function () (return gulp.src ("src / css / *. css") .pipe (renomear ((sufixo: ".min"))) .pipe (cleanCSS ()). pipe (gulp.dest ("app / css"));)) gulp.task ("minjs", function () (return gulp.src ("src / js / *. js") .pipe (renomear ((sufixo : ".min"))) .pipe (uglify ()) .pipe (gulp.dest ("app / js"));)) gulp.task ("min", ["mincss", "minjs"]) ;

Tudo. Vamos definir a tarefa padrão também.

Configurando a tarefa gulp padrão

gulp.task ("default", ["servir"]);

Conclusão.

Examinamos para que serve o gole, como instalá-lo. Estabeleceu pacotes adicionais que são necessários para o layout e tarefas definidas.

Você mesmo pode encontrar os pacotes necessários em https://gulpjs.com/plugins/ e instalá-los. Em seguida, crie tarefas para otimizar o processo de desenvolvimento.

ARTIGOS SEMELHANTES