installation
Gulp is one of the tools for automated construction. Today, let’s record some of his basic methods.
Initialize the project
yarn init --yes
Use yarn to install in development mode
yarn add gulp --dev
Create a new gulpfile.js file in the project directory, which is the entry file of gulp
This can be created manually or through
code gulpfile.js (remember to save)
Basic usage
Then we can make some configuration in this gulp configuration file
gulpt defines tasks by exporting function members
exports.foo = done => {
console.log('gulp task is working !')
done() // 标识任务结束
}
We can pass
yarn gulp foo
To perform this task
Of course we can also define a default task
exports.default = done=>{
console.log("default task!")
done()
}
We can use this command when we execute
yarn gulp
This can perform this default task
Next, let's talk about the role of the parameter done
The difference between gulp and grunt is that gulp processes tasks asynchronously by
default , while grunt processes tasks synchronously by default.
The parameter done is a function. At the end of the task, execute this function done() to tell gulp This task is completed
Other mission statement methods
Before gulp 4.0 (currently 4.0), the task was registered in the following way
const gulp = require('gulp')
gulp.task('bar',done =>{
console.log("old version register ")
done()
})
gulp combined tasks
gulp provides two apis
- series method (continuous, used to process serial tasks)
- parallel method (the meaning of parallel, used to process parallel tasks)
for example
// 引入 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)
We use the execution results to calculate the following two ways.
This is the result of the series. The
general process is
- Start 1
- Output 1
- End 1
- Start 2
- Output 2
- End 2
- Start 3
- Output 3
- End 3
one task, finish the next task
Let's look at the parallel results again. The
general process is:
- Start 1
- Start 2
- Start 3
- Output 1 end 1
- Output 2 end 2
- Output 3 end 3
It is a form of starting all tasks first, and then gradually outputting and ending. You can experience the difference between the two.
Gulp's asynchronous mode
The first way
const callback = done =>{
console.log(" gulp async !")
done()
}
This is the most basic form, because gulp is executed asynchronously by default, so pass the function done as a parameter, and execute done as the end of the task sign
exports.callback_error = done =>{
console.log("error callback")
done(new Error("task failed!"))
}
Of course, this callback function follows the error-first approach
The second way: promise scheme
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"))
}
The error callback that returns the promise will directly throw an error, preventing subsequent execution
. The success callback that returns the promise will continue to execute, which is the same as done(), announcing the end of execution
The third way: async and await
const timeout = time =>{
return new Promise( resolve =>{
setTimeout( resolve ,time)
})
}
exports.async = async () =>{
await timeout(2000)
console.log('定时器结束后输出的内容')
}
A promise is encapsulated here with a promise. When the task is declared below, the time is passed in as a parameter
stream way
gulp also supports the form of file stream
// 导入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
}
So gulp is also an npm module based on node