本文详解如何在 gulp 4+ 中正确定义、导出并执行 sass 编译任务，解决常见报错“task never defined: sass”，涵盖依赖配置、任务注册、自动监听及最佳实践。
本文详解如何在 gulp 4+ 中正确定义、导出并执行 sass 编译任务，解决常见报错“task never defined: sass”，涵盖依赖配置、任务注册、自动监听及最佳实践。
在现代前端工作流中，Gulp 仍是轻量级自动化构建的可靠选择。但自 Gulp 4 起，任务注册方式发生重大变更：不再支持 gulp.task() 的字符串命名方式（已废弃），必须显式导出函数或使用 exports 对象进行任务声明。你遇到的 "Task never defined: sass" 错误，根本原因正是 build_styles 函数虽已定义，却未被 Gulp 识别为可执行任务。
✅ 正确的任务定义与导出（Gulp 4+ 推荐写法）
请将你的 gulpfile.js 改写为以下结构（注意：无需 gulp.task()，直接导出函数）：
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/css')); // 建议明确输出子目录，避免文件混杂
}
// ✅ 方式一：导出为默认任务（可选）
exports.default = build_styles;
// ✅ 方式二：导出为具名任务（推荐，语义清晰）
exports.build_styles = build_styles;
// ✅ 方式三：添加 watch 任务实现自动更新
function watch() {
gulp.watch('./app/sass/**/*.scss', build_styles);
}
exports.watch = watch;? 提示：
exports.build_styles是关键——它让 Gulp CLI 能通过gulp build_styles命令识别并调用该函数。若仅保留function build_styles() { ... }而不导出，则 Gulp 完全“看不见”该任务。
? 运行与验证
确保已安装必要依赖：
npm install --save-dev gulp gulp-sass sass
然后执行：
# 运行单次编译 gulp build_styles # 启动监听，保存 .scss 文件后自动重新编译 gulp watch
⚠️ 注意事项与常见陷阱
-
删除冗余反引号：原始代码中的
```是 Markdown 语法，在 JS 文件中必须移除，否则导致语法错误； -
路径规范：
gulp.src()和gulp.dest()的路径需真实存在，建议先手动创建./app/sass/和./dist/css/目录； -
错误处理不可省略：
.on('error', sass.logError)可捕获 Sass 编译异常（如语法错误），避免管道中断； -
Gulp 版本检查：运行
gulp -v确认本地为 Gulp 4.x（CLI version和Local version均应 ≥ 4.0.0）；若为旧版，请升级：npm install --global gulp-cli && npm install --save-dev gulp@latest； -
默认任务优化：可将
build_styles设为默认任务，执行gulp即触发编译：exports.default = build_styles;
? 总结
Gulp 4+ 的核心原则是「函数即任务，导出即可用」。只要确保函数被正确赋值给 exports.xxx，即可通过命令行无缝调用。结合 gulp.watch()，你就能获得开箱即用的 Sass 实时编译能力——无需 Webpack 或 Vite 的复杂配置，简洁、可控、稳定。
