With the development of front-ends such as webpack, rollup, and vite, gulp seems to be replaced. In fact, it didn't, it's just that it retreated from the front of the stage to the background. We can still see it in many projects, such as elementplus, vant, etc. Now gulp is more about process control.
For example, if we want to put an elephant in the refrigerator, we need to open the refrigerator door -> put the elephant in the refrigerator -> close the refrigerator door. This is a simple process. Using gulp can stipulate these processes and automate this process.
So we can use it to automate common tasks during project development. For example, to package a component library, we may need to remove files, copy files, package styles, package components, execute some commands, and package multiple packages with one click, etc. All of which can be controlled by gulp, which is very convenient.
This article will mainly introduce some common functions of gulp
install gulp
First install gulp's scaffolding globally
npm install --global gulp-cli
Then we create a new folder gulpdemo, then execute npm init -y, and then install the local dependency gulp under this project
npm install gulp -D
At this point, our gulp is installed. Next, we create a gulpfile.js file in the root directory. When gulp is executed, it will automatically find this file.
Create a task Task
Each gulp task (task) is an asynchronous JavaScript function. This function is a function that can receive a callback as a parameter, or return an asynchronous operation object such as a Promise. For example, creating a task can be written like this
exports.default = (cb) => {
console.log("my task");
cb();
};
or write like this
exports.default = () => {
console.log("my task");
return Promise.resolve();
};
Then enter gulp in the terminal to execute our task
Serial (series) and parallel (parallel)
These two are actually easy to understand. Serial means that tasks are executed one by one, and parallel means that all tasks are executed together. Let's look at the serial demo first
const {
series, parallel } = require("gulp");
const task1 = () => {
console.log("task1");
return new Promise((resolve) => {
setTimeout(() => {
resolve();
}, 5000);
});
};
const task2 = () => {
console.log("task2");
return Promise.resolve();
};
exports.default = series(task1, task2);
It can be seen that it took 5s to execute task1, then execute task2, and then look at parallelism
const {
series, parallel } = require("gulp");
const task1 = () => {
console.log("task1");
return new Promise((resolve) => {
setTimeout(() => {
resolve();
}, 5000);
});
};
const task2 = () => {
console.log("task2");
return Promise.resolve();
};
exports.default = parallel(task1, task2);
It can be seen that the two tasks are executed simultaneously
src() and dest()
The two functions src() and dest() are often used in our actual projects. src() means to create a stream to read the file system, and dest() is to create a stream to write to the file system. Let's write an example of copy directly
copy
Before writing, we first create a new src directory in the root directory of our project to store our copied files, and create a few files under src, as shown in the figure below. Then
we write our copy task in gulpfile.js : put src Copy all the files under the dist folder
const {
src, dest } = require("gulp");
const copy = () => {
return src("src/*").pipe(dest("dist/"));
};
exports.default = copy;
Then execute gulp (exports.default is executed by default), and we will find that there is an additional dist folder in the root directory
在这里插入代码片Process less files
Next, we write a task to process less files. First, we install gulp-less first.
npm i -D gulp-less
然后我们在src下新建一个style/index.less并写下一段less语法样式
@color: #fff;
.wrap {
color: @color;
}
Then gulpfile.js writes our lessTask: parse the less file under our style into css and write it into dist/style
const {
src, dest } = require("gulp");
const less = require("gulp-less");
const lessTask = () => {
return src("src/style/*.less").pipe(less()).pipe(dest("dist/style"));
};
exports.default = lessTask;
Then we execute the gulp command and we will find dist/style/index.css
.wrap {
color: #fff;
}
We can also prefix css with
npm install gulp-autoprefixer -D
Change our src/style/index.less to
@color: #fff;
.wrap {
color: @color;
display: flex;
}
Then use gulp-autoprefixer in gulpfile.js
const {
src, dest } = require("gulp");
const less = require("gulp-less");
const autoprefixer = require("gulp-autoprefixer");
const lessTask = () => {
return src("src/style/*.less")
.pipe(less())
.pipe(
autoprefixer({
overrideBrowserslist: ["> 1%", "last 2 versions"],
cascade: false, // 是否美化属性值
})
)
.pipe(dest("dist/style"));
};
exports.default = lessTask;
The processed dist/style/index.css becomes
.wrap {
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
Listen for file changes browser-sync
browser-sync is a very useful browser synchronization testing tool. It can build a static server, monitor file changes, and refresh the page (HMR). Let's take a look at its use
Must be installed first
npm i browser-sync -D
Then we create a new index.html in the root directory
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
hello world
</body>
</html>
Then configure in gulpfile.js
const browserSync = require("browser-sync");
const browserTask = () => {
browserSync.init({
server: {
baseDir: "./",
},
});
};
exports.default = browserTask;
At this time, a page with a default port of 3000 will be started. Let's see how to monitor page changes.
First of all, we need to monitor the file changes. We can use browserSync watch to monitor the file changes and then refresh the page.
const {
watch } = require("browser-sync");
const browserSync = require("browser-sync");
const {
series } = require("gulp");
const reloadTask = () => {
browserSync.reload();
};
const browserTask = () => {
browserSync.init({
server: {
baseDir: "./",
},
});
watch("./*", series(reloadTask));
};
exports.default = browserTask;
At this time, the file browser under the src will be refreshed.
Next, we introduce index.html into the style of dist/style/index.css, and then simulate a simple construction flow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="../dist/style/index.css" />
</head>
<body>
<div class="wrap">hello world</div>
</body>
</html>
At this point our process is to compile the less file -> write css to dist/style -> trigger page update
Our gulpfile.js can be written like this
const {
src, dest } = require("gulp");
const {
watch } = require("browser-sync");
const browserSync = require("browser-sync");
const {
series } = require("gulp");
const less = require("gulp-less");
const autoprefixer = require("gulp-autoprefixer");
const lessTask = () => {
return src("src/style/*.less")
.pipe(less())
.pipe(
autoprefixer({
overrideBrowserslist: ["> 1%", "last 2 versions"],
cascade: false, // 是否美化属性值
})
)
.pipe(dest("dist/style"));
};
//页面刷新
const reloadTask = () => {
browserSync.reload();
};
const browserTask = () => {
browserSync.init({
server: {
baseDir: "./",
},
});
watch("./*.html", series(reloadTask));
//监听样式更新触发两个任务
watch("src/style/*", series(lessTask, reloadTask));
};
exports.default = browserTask;
At this point, whether we change the style or html, we can trigger the page update.
at last
Later, I will use gulp to process the style packaging part of the vue3 component library under development