经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
从0搭建Vue3组件库(六):前端流程化控制工具gulp的使用 - 公众号-web前端进阶
来源:cnblogs  作者:公众号-web前端进阶  时间:2023/3/14 8:47:31  对本文有异议

前言

随着前端诸如webpack,rollup,vite的发展,gulp感觉似乎好像被取代了。其实并没有,只不过它从台前退居到了幕后。我们仍然可以在很多项目中看到它的身影,比如elementplus、vant等。现在gulp更多的是做流程化的控制。

比如我们要把一个大象放进冰箱里就需要 打开冰箱门->把大象放进冰箱->关上冰箱门,这就是一个简单的流程,使用gulp就可以规定这些流程,将这个流程自动化。

所以我们可以使用它在项目开发过程中自动执行常见任务。比如打包一个组件库,我们可能要移除文件、copy文件,打包样式、打包组件、执行一些命令还有一键打包多个package等等都可以由gulp进行自定义流程的控制,非常的方便。

本文将主要介绍gulp的一些常用功能

安装gulp

首先全局安装gulp的脚手架

  1. npm install --global gulp-cli

然后我们新建文件夹gulpdemo,然后执行 npm init -y,然后在这个项目下安装本地依赖gulp

  1. npm install gulp -D

此时我们gulp便安装好了,接下来我们在根目录下创建gulpfile.js文件,当gulp执行的时候会自动寻找这个文件。

创建一个任务Task

每个gulp任务(task)都是一个异步的JavaScript函数,此函数是一个可以接收callback作为参数的函数,或者返回一个Promise等异步操作对象,比如创建一个任务可以这样写

  1. exports.default = (cb) => {
  2. console.log("my task");
  3. cb();
  4. };

或者这样写

  1. exports.default = () => {
  2. console.log("my task");
  3. return Promise.resolve();
  4. };

然后终端输入gulp就会执行我们这个任务

串行(series)和并行(parallel)

这两个其实很好理解,串行就是任务一个一个执行,并行就是所有任务一起执行。下面先看串行演示

  1. const { series, parallel } = require("gulp");
  2. const task1 = () => {
  3. console.log("task1");
  4. return new Promise((resolve) => {
  5. setTimeout(() => {
  6. resolve();
  7. }, 5000);
  8. });
  9. };
  10. const task2 = () => {
  11. console.log("task2");
  12. return Promise.resolve();
  13. };
  14. exports.default = series(task1, task2);

控制台输出结果如下

1659025931632.jpg

可以看出执行task1用了5s,然后再执行task2,再看下并行

  1. const { series, parallel } = require("gulp");
  2. const task1 = () => {
  3. console.log("task1");
  4. return new Promise((resolve) => {
  5. setTimeout(() => {
  6. resolve();
  7. }, 5000);
  8. });
  9. };
  10. const task2 = () => {
  11. console.log("task2");
  12. return Promise.resolve();
  13. };
  14. exports.default = parallel(task1, task2);

1659026080863.jpg

可以看出两个任务是同时执行的

src()和dest()

src()和dest()这两个函数在我们实际项目中经常会用到。src()表示创建一个读取文件系统的流,dest()是创建一个写入到文件系统的流。我们直接写一个copy 的示例

复制

在写之前我们先在我们项目根目录下新建一个src目录用于存放我们被复制的文件,在src下随便新建几个文件,如下图

1659026890254.jpg

然后我们在gulpfile.js写下我们的copy任务:将src下的所有文件复制到dist文件夹下

  1. const { src, dest } = require("gulp");
  2. const copy = () => {
  3. return src("src/*").pipe(dest("dist/"));
  4. };
  5. exports.default = copy;

然后执行gulp(默认执行exports.default),我们就会发现根目录下多了个dist文件夹

1659027082559.jpg

处理less文件

下面我们写个处理less文件的任务,首先我们先安装gulp-less

  1. npm i -D gulp-less
  1. 然后我们在src下新建一个style/index.less并写下一段less语法样式
  1. @color: #fff;
  2. .wrap {
  3. color: @color;
  4. }

然后gulpfile.js写下我们的lessTask:将我们style下的less文件解析成css并写入dist/style中

  1. const { src, dest } = require("gulp");
  2. const less = require("gulp-less");
  3. const lessTask = () => {
  4. return src("src/style/*.less").pipe(less()).pipe(dest("dist/style"));
  5. };
  6. exports.default = lessTask;

然后我们执行gulp命令就会发现dist/style/index.css

  1. .wrap {
  2. color: #fff;
  3. }

我们还可以给css加前缀

  1. npm install gulp-autoprefixer -D

将我们的src/style/index.less改为

  1. @color: #fff;
  2. .wrap {
  3. color: @color;
  4. display: flex;
  5. }

然后在gulpfile.js中使用gulp-autoprefixer

  1. const { src, dest } = require("gulp");
  2. const less = require("gulp-less");
  3. const autoprefixer = require("gulp-autoprefixer");
  4. const lessTask = () => {
  5. return src("src/style/*.less")
  6. .pipe(less())
  7. .pipe(
  8. autoprefixer({
  9. overrideBrowserslist: ["> 1%", "last 2 versions"],
  10. cascade: false, // 是否美化属性值
  11. })
  12. )
  13. .pipe(dest("dist/style"));
  14. };
  15. exports.default = lessTask;

处理后的dist/style/index.css就变成了

  1. .wrap {
  2. color: #fff;
  3. display: -webkit-box;
  4. display: -ms-flexbox;
  5. display: flex;
  6. }

监听文件更改browser-sync

browser-sync是一个十分好用的浏览器同步测试工具,它可以搭建静态服务器,监听文件更改,并刷新页面(HMR),下面来看下它的使用

首先肯定要先安装

  1. npm i browser-sync -D

然后我们在根目录下新建index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. hello world
  11. </body>
  12. </html>

然后在gulpfile.js中进行配置

  1. const browserSync = require("browser-sync");
  2. const browserTask = () => {
  3. browserSync.init({
  4. server: {
  5. baseDir: "./",
  6. },
  7. });
  8. };
  9. exports.default = browserTask;

这时候就会启动一个默认3000端口的页面. 下面我们看如何监听页面变化。

首先我们要监听文件的改变,可以使用browserSync的watch,监听到文件改变后再刷新页面

  1. const { watch } = require("browser-sync");
  2. const browserSync = require("browser-sync");
  3. const { series } = require("gulp");
  4. const reloadTask = () => {
  5. browserSync.reload();
  6. };
  7. const browserTask = () => {
  8. browserSync.init({
  9. server: {
  10. baseDir: "./",
  11. },
  12. });
  13. watch("。/*", series(reloadTask));
  14. };
  15. exports.default = browserTask;

此时改动src下的文件浏览器便会刷新。

下面我们将index.html引入dist/style/index.css的样式,然后来模拟一个简单的构建流

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Document</title>
  8. <link rel="stylesheet" href="../dist/style/index.css" />
  9. </head>
  10. <body>
  11. <div class="wrap">hello world</div>
  12. </body>
  13. </html>

此时我们的流程是 编译less文件->将css写入dist/style->触发页面更新

我们gulpfile.js可以这样写

  1. const { src, dest } = require("gulp");
  2. const { watch } = require("browser-sync");
  3. const browserSync = require("browser-sync");
  4. const { series } = require("gulp");
  5. const less = require("gulp-less");
  6. const autoprefixer = require("gulp-autoprefixer");
  7. const lessTask = () => {
  8. return src("src/style/*.less")
  9. .pipe(less())
  10. .pipe(
  11. autoprefixer({
  12. overrideBrowserslist: ["> 1%", "last 2 versions"],
  13. cascade: false, // 是否美化属性值
  14. })
  15. )
  16. .pipe(dest("dist/style"));
  17. };
  18. //页面刷新
  19. const reloadTask = () => {
  20. browserSync.reload();
  21. };
  22. const browserTask = () => {
  23. browserSync.init({
  24. server: {
  25. baseDir: "./",
  26. },
  27. });
  28. watch("./*.html", series(reloadTask));
  29. //监听样式更新触发两个任务
  30. watch("src/style/*", series(lessTask, reloadTask));
  31. };
  32. exports.default = browserTask;

此时无论我们更改的是样式还是html都可以触发页面更新。

最后

后面我会将正在开发的vue3组件库的样式打包部分使用gulp处理,如果你对组件库开发感兴趣的话可以关注我,后续会持续更新本系列内容

创作不易,你的点赞就是我的动力!如果感觉这篇文章对你有帮助的话就请点个赞吧,感谢~

关注公众号 web前端进阶 查看完整教程

原文链接:https://www.cnblogs.com/zdsdididi/p/17212087.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号