“This is the 28th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Gulp

Gulp is the most popular build system at the front end. Its core feature is high efficiency and easy to use. The process of using Gulp is very simple: first install a Gulp installation dependency, and then add gulpfile in the root directory of the project

Install dependencies

Let’s initialize our project by running the following code

npm init or yarn init 
Copy the code

Next we need to install our gulp dependencies

npm add gulp or yarn add gulp
Copy the code

When gulp is installed it installs a gulp-CLI module

creategulpfile.jsfile

We create the gulpfile.js file in the root directory

Then I made some changes to it:

// Gulp entry file

exports.foo = () = > {
  console.log('test')}Copy the code

Simple test

So here we’re running it

npm gulp foo or yarn gulp foo
Copy the code

This command indicates the method we want to perform the export

At this point, my print also appears in our console, but there is an error message, the error message roughly meaning:

  • The following task is not completed: foo
  • Did you forget to signal asynchronous completion?

We need to use the done method to mark the task to indicate that the task is finished

// Gulp entry file

exports.foo = done= > {
  console.log('test')
  
  done() // Indicates that the task is complete
}
Copy the code

After the transformation we run the startup command here:

Perfect, no errors reported

The default task

The functions shown above appear as tasks, so let’s use the default functions to demonstrate this

exports.default = done= > {
  console.log('Test - Default')

  done() // Indicates that the task is complete
}
Copy the code

Go to the command line and run the following command

 yarn gulp 
Copy the code

And what we’re going to find is that if we just run it like this, we’re going to enterdefaultThe task of

Gulp creates a composite task

We can create serial or parallel tasks with series and parallel; When we compile CSS and JS, they do not interfere with each other, so we can improve a lot of efficiency, we can do some tests

Test code:gulpfile.js

const { series, parallel } = require('gulp')
 
const task1 = (done) = > {
  setTimeout(() = > {
    console.log("task1 working");
    done(); // Indicates that the task is complete
  }, 1000);
};
const task2 = (done) = > {
  setTimeout(() = > {
    console.log("task2 working");
    done(); // Indicates that the task is complete
  }, 1000);
};
const task3 = (done) = > {
  setTimeout(() = > {
    console.log("task3 working");
    done(); // Indicates that the task is complete
  }, 1000);
};
Copy the code

series

Add gulpfile. Js

exports.foo = series(task1, task2, task3)
Copy the code

Then perform

yarn gulp foo
Copy the code

We’ll see that the tasks are executed in sequence:

parallel

Add gulpfile. Js

exports.bar = parallel(task1, task2, task3)
Copy the code

Then perform

yarn gulp bar
Copy the code

We will find that the task is started and executed simultaneously:

Gulp asynchronous task

Several ways to do asynchronous tasks

Control through callback

To inform

exports.callback = done= > {
    console.log("task working");
    done(); // Indicates that the task is complete
};
Copy the code

Failure to inform

exports.callback_error = done= > {
    console.log("task working");
    done(new Error('task failed')); // Indicates that the task is complete
};
Copy the code

Promise way

How could a callback be so classic without Promise? Success:

exports.promise = () = > {
    console.log("task promise");
    return Promise.resolve()
};
Copy the code

Failure:

exports.promise = () = > {
    console.log("task promise");
    return Promise.reject(new Error('task failed'))};Copy the code

Es7 async and await

Async and await are syntactic candy of Promise that makes our code easier to understand, but it is limited to our Node environment

const timeout = time= > {
    return new Promise(resolve= > {
        setTimeout(resolve, time)
    })
}
exports.async = async() = > {await timeout(1000)
    console.log("task promise");
};
Copy the code

By the stream

const fs = require('fs') 
exports.stream = () = > {
  // Read the file
  const createReadStream = fs.createReadStream('package.json')
  // Write to the file
  const WriteStream = fs.createWriteStream('temp.txt')
  createReadStream.pipe(WriteStream)
  return createReadStream
}
Copy the code

After running this module, we found that we did not do the “done” action and there is no error. Why is that?

Gulp is notified of an end event in createReadStream and createWriteStream