This is the 14th day of my participation in Gwen Challenge

preface

Prior to this, I have written a series of articles (for beginners) on webpack5, which is the most popular front-end build tool available today. It has a complete ecosystem, with various plugins and loaders to implement various functions.

But are there other build tools available besides WebPack?

Of course, gulp is one of them.

Different from WebPack’s dependency management, Gulp is a stream-linear management resource that focuses on controlling the entire packaged build process and uses streams to handle the entire build process. Gulp is easier to understand and use than Webpack.

Unfortunately, gulP is just a flow factory and cannot handle modularity on its own. Although it can delegate modularity tasks to Webpack-Stream (which is webpack, integrated with GULP), using both flow management resources and modularity management resources, This kind of nondescribable development style is really weird (more on that later).

So if you are sure that your project needs to use modularity, then I do not recommend using gulp, webPack is a better choice. Of course, if you are sure that your modularity relies on the browser’s native ESM, regardless of browser compatibility, using gulp can work, but I still don’t recommend it.

This series of articles will introduce gulP usage one by one. This series is intended for beginners who have never used gulp or know a thing or two about it. It is not intended for those who want to go deeper into gulp.

The installation

If you have not installed Node, install node first.

Create a new project, gulp-demo, go to the project directory, and initialize it.

npm init
Copy the code

Install gulp globally using cli, and then install gulp locally.

npm install gulp-cli -g
npm install gulp -D
Copy the code

To create gulpfile.js, run the following command from your local project root (you can also create a new file yourself)

npx -p touch nodetouch gulpfile.js
Copy the code

Gulpfile. js is the gulp configuration file, which requires native JS to write the configuration. When the gulp command is run, the gulp configuration file is automatically loaded.

In fact, the official documentation also mentions that configuration files can be written in typescript, Babel, and other translatable languages with gulpfile.ts and gulpfile.babel.js names. However, I would recommend using the pure JS version.

task

In the gulpfile.js configuration file, we need to configure tasks to manage resources, including private tasks, public tasks and combined tasks.

Public task

We’ll write a function in gulpfile.js.

// Public task
function publicTask(cb) {
  console.log('Public task')
  cb()
}

exports.publicTask = publicTask
Copy the code

To export a publicTask, run the gulp publicTask command.

run

gulp publicTask
Copy the code

The publicTask function is a publicTask because it is exposed and can be invoked at the terminal using the command gulp publicTask.

Exports. aa = publicTask and gulp aa is used to call publicTask.

Note: The cb argument above refers to the callback function. If the task does not return anything, the CB callback must be called to indicate that the task executed successfully, otherwise an error will be reported.

Private task

Let’s add a “private task” function to gulpfile.js.

.// Private tasks
function privateTask(cb) {
  console.log('Private Task')
  cb()
}

...

exports.default =  privateTask
Copy the code

The export default here is a privateTask function that is called by default when running gulp.

Run the command

gulp
Copy the code

We can see the “private task” printed on the terminal.

PrivateTask is a privateTask because it can only be called through gulp, unlike publicTask, which can be called through gulp publicTask.

It may seem that the line between public and private tasks is a little unclear, but in real development, we don’t need to know the line, just how to expose and invoke it.

Combination of task

Combined tasks are divided into serial tasks and parallel tasks.

Serial task

Serial tasks are sequential tasks, and gulp. Series is used to process serial tasks.

We modified the exports.default to use the gulp.series method.

gulpfile.js

const { series } = require('gulp')...// exports.default = privateTask
exports.default = series(privateTask, publicTask)
Copy the code

Run the command

gulp
Copy the code

You can see that “private tasks” are printed first and “public tasks” are printed later. You can see that gulp. Series executes tasks from left to right or from top to bottom.

Parallel tasks

Gulp. Parallel is used to process parallel tasks.

gulpfile.js

// exports.default = gulp.series(privateTask, publicTask)
exports.default = gulp.parallel(privateTask, publicTask)
Copy the code

A comparison of “serial tasks” and “parallel tasks” is posted below. It seems that the “parallel tasks” take less time to execute.

Any combination of serial and parallel tasks

Of course, the use of combined tasks is not as simple as the above. In fact, we can mix serial tasks and parallel tasks, for example:

exports.default = series(privateTask, publicTask, parallel(privateTask, series(publicTask)))
Copy the code

Old version of the mission

In older versions of gulp, we used the Task method to register functions as tasks, for example:

const { series, task } = require('gulp')

task('privateTask'.function(cb) {
    console.log('Private Task')
    cb()
})

task('default', series('privateTask'))
Copy the code

Although the new version of Gulp supports tasks of the old version, most of them are registered by exports. It is recommended to use the new version.

Read files and output files

Gulp has two methods for processing files, SRC and dest, which are used to read and output files, respectively.

Start by creating a SRC directory under the project root and creating an index.html file.

In order to prevent the previous code harassment, we first comment or delete the gulpfile.js code and rewrite the code

Configure in gulpfile.js.

const { series, parallel, src, dest } = require('gulp')

function html() {
  return src('src/**/*.html')
    .pipe(dest('dist'))}exports.build = series(html)
Copy the code

Run the following command

gulp build
Copy the code

You can see that there is an additional dist directory in the directory with an index.html file in it.

SRC is used to read all HTML files in the SRC directory and convert them into streams. Dest is used to convert streams into files and export them to the destination path.

The string in SRC (‘ SRC /**/*.html’) is called a glob string by gulp. The glob string is used to match the file path.

The pipe

The pipe method is also used in the previous section. A pipe is a pipe used to connect to a “transformation stream” or “writable stream”. For example, the pipe in the previous section is a transformation stream connected to Dest (converting a stream to a file).

In summary, you can simply think of a pipe as a carrier for a stream, and we need pipes whenever we need to process the content of a stream or convert a stream to a file.

In later articles, you will use a lot of pipes, and in later code, you will understand the concept of pipes better.

Complete the project

On August 30, 2021, I reorganized the project and put it on Gitee. You can clone it and use it directly. The code submission record sequence is consistent with the sequence of my series of articles.

Gitee Library link: gitee.com/only1zhuo/g…

“The Use of GULP” series

  • Use of GULP (1) : Start (juejin. Cn)
  • Using gulp (2) : HTML (juejin. Cn)
  • Using gulp (3) : processing js (juejin. Cn)
  • Using gulp (4) : Handling CSS (juejin.cn)
  • Use of gulp (5) : processing images (juejin. Cn)
  • Use of Gulp (6) : Using Webpack stream modularization (juejin. Cn)
  • Using gulp (7) : Using Babel to translate JS (juejin.cn)
  • Use of GULP (8) : Separation environment (juejin. Cn)