gulp

O sistema de construção de streaming

O que é Gulp?

• Automação - Gulp é um kit de ferramentas que ajuda a automatizar tarefas dolorosas ou demoradas no seu fluxo de trabalho de desenvolvimento.
• Plataforma -agnóstico - As integrações são incorporadas em todos os principais IDEs e as pessoas estão usando Gulp com PHP, .NET, Node.JS, Java e outras plataformas.
• ECOSYSTEM STROT - Use os módulos NPM para fazer o que você quiser + acima de 3000 plug -ins com curadoria para transmitir transformações de arquivos.
• Simples - fornecendo apenas uma superfície mínima da API, é fácil aprender e simples de usar.

Instalação

Siga nosso guia de início rápido.

Roteiro

Descubra sobre todos os nossos problemas de trabalho em andamento e excelentes em https://github.com/orgs/gulpjs/projects.

Documentação

Confira o Guia de Iniciação e a API Docs em nosso site!

Desculpe nossa poeira! Todos os outros documentos ficarão para trás até que tudo seja atualizado. Por favor, abra um problema se algo não estiver funcionando.

Amostra gulpfile.js

Este arquivo lhe dará uma amostra do que o Gulp faz.

 var gulp = require ( 'gulp' ) ;
var less = require ( 'gulp-less' ) ;
var babel = require ( 'gulp-babel' ) ;
var concat = require ( 'gulp-concat' ) ;
var uglify = require ( 'gulp-uglify' ) ;
var rename = require ( 'gulp-rename' ) ;
var cleanCSS = require ( 'gulp-clean-css' ) ;
var del = require ( 'del' ) ;

var paths = {
  styles : {
    src : 'src/styles/**/*.less' ,
    dest : 'assets/styles/'
  } ,
  scripts : {
    src : 'src/scripts/**/*.js' ,
    dest : 'assets/scripts/'
  }
} ;

/* Not all tasks need to use streams, a gulpfile is just another node program
 * and you can use all packages available on npm, but it must return either a
 * Promise, a Stream or take a callback and call it
 */
function clean ( ) {
  // You can use multiple globbing patterns as you would with `gulp.src`,
  // for example if you are using del 2.0 or above, return its promise
  return del ( [ 'assets' ] ) ;
}

/*
 * Define our tasks using plain functions
 */
function styles ( ) {
  return gulp . src ( paths . styles . src )
    . pipe ( less ( ) )
    . pipe ( cleanCSS ( ) )
    // pass in options to the stream
    . pipe ( rename ( {
      basename : 'main' ,
      suffix : '.min'
    } ) )
    . pipe ( gulp . dest ( paths . styles . dest ) ) ;
}

function scripts ( ) {
  return gulp . src ( paths . scripts . src , { sourcemaps : true } )
    . pipe ( babel ( ) )
    . pipe ( uglify ( ) )
    . pipe ( concat ( 'main.min.js' ) )
    . pipe ( gulp . dest ( paths . scripts . dest ) ) ;
}

function watch ( ) {
  gulp . watch ( paths . scripts . src , scripts ) ;
  gulp . watch ( paths . styles . src , styles ) ;
}

/*
 * Specify if tasks run in series or parallel using `gulp.series` and `gulp.parallel`
 */
var build = gulp . series ( clean , gulp . parallel ( styles , scripts ) ) ;

/*
 * You can use CommonJS `exports` module notation to declare tasks
 */
exports . clean = clean ;
exports . styles = styles ;
exports . scripts = scripts ;
exports . watch = watch ;
exports . build = build ;
/*
 * Define default task that can be called by just running `gulp` from cli
 */
exports . default = build ; 

Use a versão mais recente do JavaScript no seu GulpFile

O Gulp fornece um invólucro que será carregado no seu código ESM, para que você possa nomear seu GulpFile como gulpfile.mjs ou com "type": "module" especificado no seu arquivo package.json .

E aqui está a mesma amostra acima escrita no esnext .

 import { src , dest , watch } from 'gulp' ;
import less from 'gulp-less' ;
import babel from 'gulp-babel' ;
import concat from 'gulp-concat' ;
import uglify from 'gulp-uglify' ;
import rename from 'gulp-rename' ;
import cleanCSS from 'gulp-clean-css' ;
import del from 'del' ;

const paths = {
  styles : {
    src : 'src/styles/**/*.less' ,
    dest : 'assets/styles/'
  } ,
  scripts : {
    src : 'src/scripts/**/*.js' ,
    dest : 'assets/scripts/'
  }
} ;

/*
 * For small tasks you can export arrow functions
 */
export const clean = ( ) => del ( [ 'assets' ] ) ;

/*
 * You can also declare named functions and export them as tasks
 */
export function styles ( ) {
  return src ( paths . styles . src )
    . pipe ( less ( ) )
    . pipe ( cleanCSS ( ) )
    // pass in options to the stream
    . pipe ( rename ( {
      basename : 'main' ,
      suffix : '.min'
    } ) )
    . pipe ( dest ( paths . styles . dest ) ) ;
}

export function scripts ( ) {
  return src ( paths . scripts . src , { sourcemaps : true } )
    . pipe ( babel ( ) )
    . pipe ( uglify ( ) )
    . pipe ( concat ( 'main.min.js' ) )
    . pipe ( dest ( paths . scripts . dest ) ) ;
}

 /*
  * You could even use `export as` to rename exported tasks
  */
function watchFiles ( ) {
  watch ( paths . scripts . src , scripts ) ;
  watch ( paths . styles . src , styles ) ;
}
export { watchFiles as watch } ;

const build = gulp . series ( clean , gulp . parallel ( styles , scripts ) ) ;
/*
 * Export a default task
 */
export default build ; 

Construções incrementais

Você pode filtrar arquivos inalterados entre as execuções de uma tarefa usando as funções gulp.src since a opção e gulp.lastRun :

 const paths = {
  ...
  images : {
    src : 'src/images/**/*.{jpg,jpeg,png}' ,
    dest : 'build/img/'
  }
}

function images ( ) {
  return gulp . src ( paths . images . src , { since : gulp . lastRun ( images ) } )
    . pipe ( imagemin ( ) )
    . pipe ( gulp . dest ( paths . images . dest ) ) ;
}

function watch ( ) {
  gulp . watch ( paths . images . src , images ) ;
}

Os tempos de execução da tarefa são salvos na memória e são perdidos quando as saídas do gole. Ele economizará tempo apenas durante a tarefa watch ao executar a tarefa images pela segunda vez.

Quer contribuir?

Qualquer pessoa pode ajudar a melhorar este projeto - confira nosso guia contribuinte!