Apresente o uso básico do gulp

instalação

Gulp é uma das ferramentas para construção automatizada. Hoje, vamos registrar alguns de seus métodos básicos.

Inicialize o projeto

yarn init - sim

Use o yarn para instalar no modo de desenvolvimento

fio adicionar gulp --dev

Crie um novo arquivo gulpfile.js no diretório do projeto, que é o arquivo de entrada do gulp

Isso pode ser criado manualmente ou por meio

código gulpfile.js (lembre-se de salvar)

Uso básico

Então podemos fazer alguma configuração neste arquivo de configuração gulp

gulpt define tarefas exportando membros de função

exports.foo = done => {
    
    
    console.log('gulp task is working !')
    done()  // 标识任务结束
}

Podemos passar

fio gulp foo

Para realizar esta tarefa

Claro, também podemos definir uma tarefa padrão

exports.default = done=>{
    
    
    console.log("default task!")
    done()
}

Podemos usar este comando quando executamos

gole de fio

Isso pode executar esta tarefa padrão

A seguir, vamos falar sobre a função do parâmetro feito

A diferença entre gulp e grunt é que o gulp processa as tarefas de forma assíncrona por
padrão , enquanto o grunt processa as tarefas de forma síncrona por padrão.
O parâmetro done é uma função. No final da tarefa, execute esta função done () para dizer ao gulp Esta tarefa foi concluída

Outros métodos de declaração de missão

Antes do gulp 4.0 (atualmente 4.0), a tarefa era registrada da seguinte maneira

const gulp = require('gulp')
gulp.task('bar',done =>{
    
    
    console.log("old version register ")
    done()
})

engolir tarefas combinadas

gulp fornece dois apis

1. método de série (contínuo, usado para processar tarefas seriais)
2. método paralelo (o significado de paralelo, usado para processar tarefas paralelas)

por exemplo

// 引入 series 和parallel 
const {
    
    series,parallel} = require('gulp')
const task1 = done=>{
    
    
    setTimeout(()=>{
    
    
        console.log('task1 is working!');
        done()
    },2000)
}
const task2 = done=>{
    
    
    setTimeout(()=>{
    
    
        console.log('task2 is working!');
        done()
    },2000)
}
const task3 = done=>{
    
    
    setTimeout(()=>{
    
    
        console.log('task3 is working!');
        done()
    },2000)
}

exports.bar = series(task1,task2,task3)
exports.baz = parallel(task1,task2,task3)

Usamos os resultados da execução para calcular as seguintes duas maneiras.
Este é o resultado da série. O

processo geral é

• Comece 1
• Produto 1
• Fim 1
• Comece 2
• Produto 2
• Fim 2
• Comece 3
• Produto 3
• Termine 3
  uma tarefa, termine a próxima tarefa

Vejamos os resultados paralelos novamente. O

processo geral é:

• Comece 1
• Comece 2
• Comece 3
• Saída 1 fim 1
• Produto 2 fim 2
• Produto 3 final 3

É uma forma de iniciar todas as tarefas primeiro e, em seguida, gradualmente produzir e terminar.Você pode sentir a diferença entre os dois.

Modo assíncrono de Gulp

A primeira maneira

const callback = done =>{
    
    
    console.log(" gulp async !")
    done()
}

Esta é a forma mais básica, porque o gulp é executado de forma assíncrona por padrão, então a função done é passada como um parâmetro e done é executada como o final da tarefa.

exports.callback_error = done =>{
    
    
    console.log("error callback")
    done(new Error("task failed!"))
}

Claro, esta função de retorno de chamada segue a abordagem de erro primeiro

A segunda maneira: esquema de promessa

const promise = ()=>{
    
    
    console.log('promise task ')
    return Promise.resolve()
}

const promise_error =()=>{
    
    
    console.log("promise is running")
    return Promise.reject(new Error("promise is error"))
}

O callback de erro que retorna a promessa gerará um erro diretamente, impedindo a execução subsequente
. O callback de sucesso que retorna a promessa continuará a ser executado, que é o mesmo que done (), anunciando o fim da execução

A terceira maneira: assíncrona e aguardar

const timeout = time =>{
    
    
    return new Promise( resolve =>{
    
    
        setTimeout( resolve ,time)
    })
}
exports.async = async () =>{
    
    
    await timeout(2000)
    console.log('定时器结束后输出的内容')
}

Uma promessa é encapsulada aqui com uma promessa. Quando a tarefa é declarada abaixo, o tempo é passado como um parâmetro

caminho de fluxo

gulp também suporta a forma de fluxo de arquivo

// 导入node 的fs 模块
const fs = require('fs')
exports.stream = ()=>{
    
    
    const readStream = fs.createReadStream('package.json')
    const writeStream = fs.createWriteStream('temp.txt')

    readStream.pipe(writeStream)
    return readStream
}

Portanto, o gulp também é um módulo npm baseado no nó