构建工具Gulp-lesson5
2023-02-18 16:41:22 时间
Gulp 插件列表:https://gulpjs.com/plugins/
这一节我们将从下面这一段代码开始增加内容,来看一下 gulp 的一些产能常用插件和使用的方式。
const { src, dest } = require("gulp");
function build() {
return src("src/*.js").pipe(dest("output"));
}
exports.default = build;
gulp-rename:
可以便捷的在输出编译产物到文件中时对文件命名进行调整,已适应不同的场景。
const rename = require("gulp-rename");
使用固定命名输出:
安装管道:rename('main.js')
;
function build() {
return src("src/*.js")
.pipe(rename('main.js'))
.pipe(dest("output"));
}
增加特定的标识:
为 rename 的参数提供一个函数,在执行到这个函数时会传入一个 path 对象,包含dirname、basename、extname三个属性,我们这里动态修改basename,为其增加一个当前编译的时间。需要注意的是 return 的结果需要包含 path 完整的三个属性,未修改的我们可以使用结构来赋值。
function build() {
const localTime = new Date().toLocaleTimeString();
return src("src/*.js")
.pipe(
rename(function (path) {
return {
...path,
basename: `${path.basename}-${localTime}`,
};
})
)
.pipe(dest("output"));
}
还有一个方式就是我们直接修改传入的 path 的值而不去 return 一个全新的对象。
function build() {
const localTime = new Date().toLocaleTimeString();
return src("src/*.js")
.pipe(
rename(function (path) {
path.basename += `-${localTime}`;
})
)
.pipe(dest("output"));
}
gulp-uglify:
可以在我们构建 JavaScript 代码后进行压缩来减小输出产物的体积。
const uglify = require('gulp-uglify');
function build() {
const localTime = new Date().toLocaleTimeString();
return src("src/*.js")
.pipe(uglify())
.pipe(dest("output"));
}
gulp-sass:
将我们编写的 sass 文件编译为浏览器可以正常识别的 css 文件,我们要同时安装 sass 和 gulp-sass 插件。
const sass = require('gulp-sass')(require('sass'));
下面的代码是 sass 教程的第一块内容,将变量插入到最后编译的结果中。
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
//编译后
nav {
width: 100px;
color: #F90;
}
改变我们的 build 任务函数后执行 gulp 得到的产物与??教程得到了一直的内容:
function build() {
return src("src/*.scss")
.pipe(sass().on("error", sass.logError))
.pipe(dest("output/css"));
}
gulp-open:
支持我们在编译后打开一个文件或 URL,往往在开发过程中使用的 CLI 都提供了这样的一个功能,方便我们在启动项目后就默认给我们打开了首页。
const open = require('gulp-open');
function build() {
return src("src/index.html").pipe(open());
}
我们还可以增加参数来适配不同的操作系统:
const browser =
os.platform() === "linux"
? "google-chrome"
: os.platform() === "darwin"
? "google chrome"
: os.platform() === "win32"
? "chrome"
: "firefox";
function build() {
return src("src/index.html").pipe(open({ app: browser }));
}
上面的案例我们打开了通过 src 执行的输入的文件路径,我们还可以指定 uri 来打开指定的地址:
function build() {
return src("src/*js").pipe(open({ uri: "http://vp.it200.cn" }));
}
结语:
我们这里介绍了几个还比较常见的插件,更多的编译场景可以查找合适的插件来使用,我们也可以编写符合特定场景的插件。明天我们继续学习。
相关文章
- Ulysses for Mac(最好用的Markdown文本编辑写作工具)
- Xilinx MPSoC FSBL中的看门狗的用法总结
- 【FusionCompute】使用VMware Workstaion安装部署VRM(三)
- 【FusionCompute】添加CNA主机到VRM管理节点(四)
- RabbitMQ:安装配置
- RabbitMQ:消息模型
- 【FusionCompute】基于FreeNAS部署并使用虚拟存储(五)
- 【FusionCompute】创建虚拟机失败(六)
- Xshell同步复制粘贴Windows的东西
- 【OpenFiler】使用虚拟机安装openfiler
- 什么是BPM系统?BPM流程管理系统介绍
- Online DDL和Cardinality
- MRR和ICP
- 犀牛鸟中学科学人才培养计划喜报:祝贺北京一零一中学李一昕同学获丘成桐中学科学奖全球总决赛金奖!
- 耗时减半?腾讯云OCR只做了3件事
- 开箱即用区块链是一种什么体验?Lighthouse长安链给你答案
- 活动回顾 | 基于信任基础设施实现数据要素可信流通
- 【openfilier】配置iSCSI存储
- 【VMware vSphere 7】虚拟化概述(一)
- 【VMware vSphere 7】安装配置ESXi 7主机(二)