本文详解如何在 gulp 4+ 环境中正确定义、导出并运行 sass 编译任务，解决常见的 “task never defined” 错误，并实现文件监听与自动重建。
本文详解如何在 gulp 4+ 环境中正确定义、导出并运行 sass 编译任务，解决常见的 “task never defined” 错误，并实现文件监听与自动重建。
在现代前端工作流中，Gulp 仍是轻量级构建任务的可靠选择。但自 Gulp 4 起，任务注册方式发生重大变更：不再支持 gulp.task('name', fn) 的旧式注册语法（该语法在 Gulp 4 中已被弃用），而必须使用 exports 显式导出任务函数，或通过 gulp.series() / gulp.parallel() 组合任务。
你遇到的 "Task never defined: sass" 报错，根本原因并非缺少依赖，而是 Gulp 无法识别 build_styles 函数为一个可执行任务——它未被正确导出或注册。
✅ 正确做法（Gulp 4+ 推荐写法）：
'use strict';
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
function build_styles() {
return gulp.src('./app/sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./dist'));
}
// ✅ 关键：使用 exports 导出任务（函数名即任务名）
exports.build_styles = build_styles;
// ✅ 可选：添加默认任务，便于直接运行 `gulp`
exports.default = build_styles;
// ✅ 进阶：启用自动监听（实时编译）
function watch() {
gulp.watch('./app/sass/**/*.scss', build_styles);
}
exports.watch = watch;
? 注意事项：
- 删除代码中多余的反引号（如你原代码末尾的
```），它们会导致语法错误； - 确保已安装必要依赖：
npm install --save-dev gulp gulp-sass sass
⚠️
gulp-sass@5+要求显式传入sass（Dart Sass），不可再使用node-sass（已废弃）； - 运行命令示例：
-
npx gulp build_styles—— 手动执行一次编译； -
npx gulp watch—— 启动监听，保存.scss文件后自动重新编译； -
npx gulp—— 执行默认任务（即build_styles）。
-
? 小贴士：若需 CSS 压缩、Source Map 或自动刷新浏览器，可依次集成 gulp-clean-css、gulp-sourcemaps 和 browser-sync，进一步完善开发体验。
掌握任务导出机制是 Gulp 4+ 使用的基础门槛。只要确保函数被 exports 正确暴露，配合规范的依赖与路径配置，SASS 编译与热更新即可稳定运行。
