gulp setup

A configuração perfeita de gole

Este projeto tem como objetivo criar uma configuração de gole modular e configurável. Obtenha a automação do projeto em funcionamento com o mínimo de envolvimento. Gulp-setup é escrito e mantido por @alexgrozav.

 npm install gulp-cli -g
npm install gulp gulp-load-plugins gulp-setup --save-dev

Amostra gulpfile.js

A criação de gole usando a utensília de gole é mais simples do que nunca.

 const packages = require ( 'gulp-setup/package.json' ) ;
const gulp = require ( 'gulp' ) ;
const $ = require ( 'gulp-load-plugins' ) ( { config : packages } ) ;
const setup = require ( 'gulp-setup' ) ( $ , gulp ) ; 

Tarefas padrão

Por padrão, o Gulp-setup vem com uma variedade de tarefas pré-fabricadas.

 gulp
gulp build
gulp clean
gulp watch
gulp lint
gulp html
gulp html-lint
gulp css
gulp css-lint
gulp sass
gulp sass-lint
gulp stylus
gulp stylus-lint
gulp javascript
gulp javascript-lint
gulp coffeescript
gulp coffeescript-lint
gulp typescript
gulp typescript-lint
gulp fonts
gulp images
gulp browser-sync

gole

A tarefa default executará uma sequência de build , browser-sync e watch , como você normalmente faria no Gulp.

Gulp Build

Por padrão, a tarefa de compilação executará a tarefa clean , após a qual executa todas as outras tarefas que fornecem um parâmetro pattern .

Gulpido limpo

Esta tarefa removerá as pastas de construção e distantes existentes.

relógio gole

A tarefa watch deve observar alterações e reconstruir qualquer tarefa que forneça um parâmetro pattern . Além disso, gulp-setup cria um partials graph , que reconstruirá qualquer arquivo que dependa daquele que foi alterado.

Gulp fiapos

Esta tarefa executará qualquer tarefa que termine com -lint .

Gulpi html

Cópias .html Arquivos para a pasta de compilação, depois os miniva e os produz no Dist.

Gulp CSS

Os arquivos .css e o produzem automaticamente na pasta Build, depois os miniva e os produz no Dist.

Gulp Sass

Compila e automaticamente os arquivos .sass e .scss e os produz na pasta Build, depois os miniva e os produz no Dist.

_{Essa tarefa utiliza o partials graph , o que significa que quaisquer alterações em um parcial desencadearão uma reconstrução nos arquivos pai.}

Gulp Stylus

Compila e automatiza os arquivos .styl e os produz na pasta Build, depois os miniva e os produz no Dist. A instância do Stylus também fornece a funcionalidade rucksack-css .

_{Essa tarefa utiliza o partials graph , o que significa que quaisquer alterações em um parcial desencadearão uma reconstrução nos arquivos pai.}

JavaScript Gulp

Compila os arquivos ES6 .js e os produz na pasta Build, depois os miniva e os produz no Dist. A tarefa javascript pode usar webpack ou browserify para processar e agrupar os arquivos, especificado usando o parâmetro options.bundler (como visto no exemplo de configuração abaixo).

_{Essa tarefa utiliza o partials graph , o que significa que quaisquer alterações em um parcial desencadearão uma reconstrução nos arquivos pai.}

Gulp CoffeeScript

Compila arquivos .coffee e os produz na pasta Build, depois os miniva e os produz no Dist. Assim como na tarefa javascript , você pode usar o webpack ou browserify para agrupar os arquivos.

_{Essa tarefa utiliza o partials graph , o que significa que quaisquer alterações em um parcial desencadearão uma reconstrução nos arquivos pai.}

Gulp typathript

Compila os arquivos .ts e produz -os para a pasta Build, depois os miniva e os produz no Dist. Assim como na tarefa javascript , você pode usar o webpack ou browserify para agrupar os arquivos.

_{Essa tarefa utiliza o partials graph , o que significa que quaisquer alterações em um parcial desencadearão uma reconstrução nos arquivos pai.}

imagens de gole

Otimiza os arquivos .svg , .jpg , .png e .gif e os produz para as pastas de compilação e distas.

fontes gole

Cópias .eot , .svg , .ttf , .woff e .woff2 arquivos nas pastas de construção e dist.

Configuração

Aqui está uma configuração de amostra para o conjunto de gole que define as opções para a tarefa javascript padrão existente e cria uma nova tarefa de gulp chamada javascript-ext , estendendo o javascript base. Você pode substituir qualquer um dos parâmetros de tarefa padrão ao estender uma tarefa.

A chave do objeto tasks define o nome da tarefa Gulp.

 const packages = require ( 'gulp-setup/package.json' ) ;
const gulp = require ( 'gulp' ) ;
const $ = require ( 'gulp-load-plugins' ) ( { config : packages } ) ;
const setup = require ( 'gulp-setup' ) ( $ , gulp , {
  paths : {
    src : 'path/to/src' ,
    build : 'path/to/build' ,
    dist : 'path/to/dist'
  } ,
  cache : true ,
  debug : true ,
  tasks : {
    'javascript' : {
      options : {
        bundler : 'webpack'
      }
    } ,
    'javascript-ext' : {
      extends : 'javascript' ,
      paths : {
        src : 'path/to/custom-src'
      }
    }
  }
} ) ; 

Escrevendo uma tarefa

As tarefas presentes no Gulp-setup são feitas de dois componentes: process e base . Todos os outros parâmetros, como pattern , são disponibilizados nesses componentes.

 const setup = require ( 'gulp-setup' ) ( $ , gulp , {
  tasks : {
    'mytask' : {
      base : './bases/base' ,
      process : './tasks/mytask' ,
      pattern : '**/*.css' ,
      paths : {
        src : 'path/to/custom-src' ,
        build : 'path/to/custom-build' ,
        dist : 'path/to/custom-dist'
      }
    }
  }
} ) ;

Tarefas básicas

A tarefa base serve como um modelo para outras tarefas. Ele disponibiliza quatro ganchos de pipeline: init , build , dist e end para integrar um processo nele. Se a tarefa base estiver faltando, o process será considerado uma tarefa independente e não usará um modelo.

 // bases/base.js

module . exports = ( $ , gulp , config , task ) => ( ) =>
  gulp . src ( $ . path . join ( config . task . src || config . paths . src , task . pattern ) )
    . pipe ( task . process . init ( ) )     // Initialization hook
    . pipe ( $ . debug ( ) )
    . pipe ( task . process . build ( ) )    // Building hook
    . pipe ( gulp . dest ( config . task . build || config . paths . build ) )
    . pipe ( task . process . dist ( ) )     // Distribution hook
    . pipe ( gulp . dest ( config . task . dist || config . paths . dist ) )
    . pipe ( task . process . end ( ) ) ;     // Ending hook

O pacote Gulp-setup fornece as seguintes bases pré-fabricadas: gulp-setup/bases/base , gulp-setup/bases/compile e gulp-setup/bases/lint . Você pode usar essas bases para suas tarefas de processo personalizadas.

Tarefas de processo

A tarefa do processo é o principal processamento com o qual a tarefa se preocupa. As tarefas de processo normalmente usam um modelo , uma tarefa base com a qual eles se integram, fornecendo ganchos init , build , dist ou end . Como alternativa, você pode escrever o processo como uma tarefa independente de gole.

Modelo

 // tasks/mytask.js

module . exports = ( $ , gulp , config , task ) => ( {
  build : $ . lazypipe ( )
    . pipe ( $ . autoprefixer ) ,
  dist : $ . lazypipe ( )
    . pipe ( $ . cssmin )
} ) ;

Independente

 // tasks/myclean.js

module . exports = ( $ , gulp , config , task ) => {
  return ( ) => gulp . src ( [ config . paths . build , config . paths . dist ] )
    . pipe ( $ . clean ( ) ) ;
} 

Contribuições, bugs e solicitações de recursos

Tem um bug ou uma solicitação de recurso? Por favor, leia as diretrizes de edição e procure problemas existentes e fechados. Se o seu problema ou ideia ainda não for resolvido, abra um novo problema.