Gulp
yuhuo2022-11-26开发库工具库
参考链接
引入
安装
npm install --global gulp-cli
npm install -D gulp
npm install -D get-gulp-args
构建任务
在项目的根目录下创建 gulpfile.js 文件，或者创建 gulpfile.js 目录并在该目录中包含 index.js 文件。
// gulpfile.js
const { series, parallel } = require('gulp');
const args = require('get-gulp-args')();
// 获取参数
console.log(args[0]);
exports.default = function (cb) {
console.log("默认任务");
// 如果任务不返回任何内容，则必须执行 cb() 来指示任务已完成
cb();
};
exports.normal = function (cb) {
console.log("普通任务");
cb();
};
function eat(cb) {
console.log("吃饭");
cb();
}
function work(cb) {
console.log("工作");
cb();
}
function rest(cb) {
console.log("休息");
cb();
}
// 顺序执行的组合任务
exports.series = series(eat, work, rest);
// 并发执行的组合任务
exports.parallel = parallel(eat, work, rest);
// 组合任务可以任意嵌套
exports.build = series(eat, parallel(work, series(eat, rest)));
执行任务
# 执行默认任务
gulp
# 执行多个任务，并传参
gulp normal series --参数1 --参数2
文件流
流操作
const gulp = require("gulp");
exports.default = function () {
return (
gulp
// 创建流
.src("topic/gulp/src/*.js")
// 输出流
.pipe(gulp.dest("topic/gulp/dist/"))
);
};
使用插件
# gulp-babel插件
npm install -D gulp-babel @babel/core @babel/preset-env
# gulp-uglify插件
npm install -D gulp-uglify uglify-js
# rename插件
npm install -D gulp-rename
# 插件加载器
npm install -D gulp-load-plugins
const gulp = require("gulp");
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
// const rename = require('gulp-rename');
const $ = require("gulp-load-plugins")();
exports.default = function () {
return (
gulp
// 创建流
.src("topic/gulp/src/*.js")
// babel编译
.pipe(babel({ presets: ["@babel/preset-env"] }))
// 添加流
.pipe(gulp.src("topic/gulp/vendor/*.js"))
// 输出流
.pipe(gulp.dest("topic/gulp/dist/"))
// uglify-js编译
.pipe(uglify())
// 重命名（通过插件加载器，可以简化插件引入）
.pipe($.rename({ extname: ".min.js" }))
// 输出流
.pipe(gulp.dest("topic/gulp/dist/"))
);
};
条件插件
# gulp-uglify插件
npm install -D gulp-uglify uglify-js
# gulp-if插件
npm install -D gulp-if
const { src, dest } = require("gulp");
const gulpif = require("gulp-if");
const uglify = require("gulp-uglify");
function isJavaScript(file) {
// 判断文件的扩展名是否是 '.js'
return file.extname === ".js";
}
exports.default = function () {
// 在同一个管道（pipeline）上处理 JavaScript 和 CSS 文件
return (
src(["src/*.js", "src/*.css"])
// 只对 JavaScript 文件应用 gulp-uglify 插件
.pipe(gulpif(isJavaScript, uglify()))
.pipe(dest("output/"))
);
};
文件监控
const gulp = require("gulp");
function css(cb) {
cb();
}
function javascript(cb) {
cb();
}
// 关联单个任务
gulp.watch("src/*.css", css);
// 关联任务组合
gulp.watch("src/*.js", gulp.series(css, javascript));
gulp.watch("src/*.js", {
// 监控事件：add，addDir，change，unlink，unlinkDir，ready，error，all（除ready和error外的所有事件，默认）
events: "all",
// 是否忽略初始执行：true（默认），false
ignoreInitial: true,
// 是否使用队列：true（默认），false
// 当文件监控程序关联的任务正在运行时又有文件被修改了，那么所关联任务的这次新的执行将被放到执行队列中等待，直到上一次关联任务执行完之后才能运行
queue: true,
// 文件更改后的延迟执行时间，默认200（单位毫秒）
delay: 200,
}, function (cb) {
cb();
});
Scss监控示例
安装插件
# sass插件（node版本>=14）
npm install -D gulp-sass sass node-sass
# postcss插件
npm install -D gulp-postcss postcss autoprefixer postcss-px-to-viewport
# 压缩css插件
npm install -D gulp-cssmin
编译任务
const gulp = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const pxtoviewport = require("postcss-px-to-viewport");
const cssmin = require("gulp-cssmin");
exports.watchScss = function () {
// 监听的路径
const _path = "topic/gulp/src/scss/**/*.scss";
gulp.watch(_path, () => {
return gulp
// 编译路径及排除路径
.src([_path, "!topic/gulp/src/scss/home/home.scss"])
// scss转css
.pipe(sass().on("error", sass.logError))
// postcss处理
.pipe(postcss([autoprefixer, pxtoviewport({ viewportWidth: 750 })]))
// css压缩
.pipe(cssmin())
// 输出流
.pipe(gulp.dest("topic/gulp/src/style/"));
});
};
源文件
@mixin bg($name) {
background: url("./images/" + $name) no-repeat center / 100%;
}
.page {
.content {
width: 75px;
transform: translate(10px);
@include bg("content.png");
}
}
生成文件
.page .content {
width: 10vw;
-webkit-transform: translate(1.33333vw);
-ms-transform: translate(1.33333vw);
transform: translate(1.33333vw);
background: url("./images/content.png") no-repeat center/100%;
}
Glob 详解
glob 是用于匹配文件路径的字符串。gulp.scr() 接受单个 glob 或 glob 数组作为参数，且必须至少匹配到一个匹配项，否则将报错。
- 分隔符
/：无论操作系统，统一使用/ - 单星号
*：匹配任意数量（包含0）任意字符的单级目录 - 双星号
**：匹配任意数量（包含0）任意字符的多级目录 - 取反
!：必须跟在非取反后面，删除已匹配中符合的部分
// glob数组
gulp.src(["topic/a.css", "topic/b.css"]);
// 单星号，匹配 topic/pc_page.js, topic/page.js
gulp.src("topic/*page.js");
// 双星号，匹配 topic/page.js, topic/pc/page.js, topic/pc/js/page.js
gulp.src("topic/**/page.js");
// 取反
gulp.src(['script/**/*.js', '!scripts/vendor/']);