好吧，我们可能需要一些有关您遇到的错误的更多信息。但是，如果问题只是让 gulpfile.js 正常工作，那么这里应该可以工作。
如果您已经找到了解决方案，那就太好了。但对于遇到此问题的其他人，我会提供一些提示，然后这应该会起作用。
Index
- First: Uninstalling gulp 3 and installing gulp 4
- Second: Testing to see if gulp 4 works
- Third: The final gulpfile version
- 尝试我根据您向我展示的文件提供的第二个版本，以满足您提到的需求。
- Finally: Some notes on Gulp 4 and current gulp 4 build
- 根据显示的 gulpfile，以下是有关 Gulp 4 的一些指示，
- 以及当前 gulp 4 build 0.4.0 的快速修复
第一：卸载 gulp 3 并安装 gulp 4
如果您尚未从系统中删除原始的 gulp，则必须这样做。此外，如果您添加了它，则必须将其作为项目依赖项删除。
npm uninstall -g gulp
cd {your-project-dir}
npm uninstall gulp
接下来，您必须全局安装 gulp 4 并作为依赖项安装在您的项目中。
npm install -g gulpjs/gulp-cli#4.0
在你的项目中：
npm install --save-dev gulpjs/gulp-cli#4.0
重要笔记
就是现在gulpjs/gulp#4.0 (gulp代替gulp-cli)
第二：测试 gulp 4 是否有效
gulpfile 的基本版本：
NOTE:如果要复制和粘贴，请更改 gulp.src(...) 和 .pipe(gulp.dest(...)) 路径。
// =========================================================
// gulpfile.js
// =========================================================
var gulp = require('gulp'),
sass = require('gulp-sass');
// ---------------------------------------------- Gulp Tasks
gulp.task('sass', function(){
return gulp.src("path/to/sass-file.scss")
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest("path/to/css-destination.css"))
});
// --------------------------------------- Default Gulp Task
gulp.task('default', function(){
console.log("It's working!");
});
让我们看看 gulp 4 是否正常工作：
-
在终端中运行默认的 gulp 任务：
gulp
- 如果你看到：
It's working!在你的终端中，你就知道 gulp 4 已正确安装。
- 如果您看到“正在运行！”还有一些错误，那么您将需要解决这些错误，但问题应该出在您的 gulpfile.js 文件上。 （如果自发布以来已经过了一段时间，另请参阅更新的安装/卸载说明和更新的 gulp 4 教程）。
- 如果您只看到错误（并且根本没有出现“它正在工作！”），则可能是 gulp 4 未正确安装，或者 gulp 3 未正确删除，您应该卸载 gulp 3 和 4 并重新安装 gulp 4.NOTE:如果您尝试了来自不同来源的各种安装说明，这种情况尤其可能发生。
-
如果它有效，那么：
- 让我们备份 sass 之前为您创建的 css 文件（如果存在项目），然后删除这些 css 文件，然后
- 接下来尝试在终端中运行 sass 任务：
gulp sass
如果它有效（创建了这些文件），那么一切都正常，并继续下面的其他片段。
第三：最终的gulpfile版本
以下是基于所示 gulpfile.js 的满足您需求的解决方案：
// =========================================================
// gulpfile.js
// =========================================================
// ------------------------------------------------ requires
var gulp = require('gulp'),
sass = require('gulp-sass');
// ------------------------------------------------- configs
var paths = {
sass: {
src: './furniture/sass/**/*.{scss,sass}',
dest: './furniture/css',
opts: {
}
}
};
// ---------------------------------------------- Gulp Tasks
gulp.task('sass', function () {
return gulp.src(paths.sass.src)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(paths.sass.dest))
});
// ------------------------------------ Gulp Testing Message
gulp.task('message', function(){
console.log('It works!!');
});
// ---------------------------------------------- Gulp Watch
gulp.task('watch:styles', function () {
gulp.watch(paths.sass.src, gulp.series('sass'));
});
gulp.task('watch', gulp.series('sass',
gulp.parallel('watch:styles')
));
// -------------------------------------------- Default task
gulp.task('default', gulp.series('sass',
gulp.parallel('message', 'watch')
));
虽然我说这是最终版本，但我留下了可选的messagegulpfile 中的任务，以便显示gulp.series and gulp.parallel在上班。我将在下面的最后一节中简要介绍它们。
这是没有必要的，可以删除。
您可能还注意到我添加了一个监视任务，其中包含：
gulp.series('sass', gulp.parallel('watch:styles'))这样您就可以在将来添加额外的watch:任务。例如watch:scripts.
The gulp.series('sass'...)部分纯粹是一种方便的方法。如果您编写一些代码然后运行 gulp 任务，则需要再次修改它才能反映您的更改。添加'sass'首先，在运行监视任务之前，它将在开始监视更改之前进行转换。
最后：关于 Gulp 4 和当前 gulp 4 构建的一些注释
1. 根据显示的 gulpfile，以下是有关 Gulp 4 的一些指示
Gulp 4 现在使用：
-
gulp.series：控制要运行的顺序。它按顺序运行任务直到完成，例如：
gulp.series('task-name-1', 'task-name-2')
- 'gulp.parallel'：与 gulp 3 之前执行的任务同时运行，例如：
gulp.parallel('task-name-3', 'task-name-4')
-
seires and parallel可以一起使用以更好地控制任务流程，例如：
gulp.task('example',
gulp.series('thisTaskIsRunFirst', 'thisSecond',
gulp.parallel('theseThird-SameTime-1', 'theseThird-SameTime-2')
));
2. 以及当前 gulp 4 版本的快速修复
在这些示例中，您会注意到我使用了gulp.series in the watch:styles task:
// ---------------------------------------------- Gulp Watch
gulp.task('watch:styles', function () {
gulp.watch(paths.sass, gulp.series('sass'));
});
这可能是由于 gulp 4 watch 方法中的错误造成的。我假设是这种情况，因为我无法通过简单地使用来使监视任务正常工作'sass'而不得不使用gulp.series('sass').
我说这大概是一个错误，因为当我自己学习 gulp 4 时，其他人一直在使用传统的监视任务格式及其 gulp 4 示例：
gulp.task('watch', function(){
gulp.watch('path/of/files/to/watch/**/*.scss', 'sass');
});
为了使用 gulp watch，我必须想出这个解决办法。这很好，如果您愿意的话，还可以提供执行其他任务的其他好处。
当我写完之后，我会回来提供一些 Gulp 4 的教程链接。
