Gulp 3到Gulp 4:如何观看scs和minify/将其编译成css

Question

在Gulp3中，当检测到更改时，使用以下代码会将scs放入css中。它将从旧的.scs文件中制作新的缩小文件，并将它们放入css文件夹中。

//=======gulpfile.js=======
//dependencies
var gulp        = require('gulp');
var sass        = require('gulp-sass');
var minifyCCS   = require('gulp-clean-css');
var uglify      = require('gulp-uglify');
var rename      = require('gulp-rename');
var changed     = require('gulp-changed');
//Roots
var SCSS_SRC    = './public/scss/*.scss';
var SCSS_DEST   = './public/css';
//Compiling
gulp.task('compile_scss', function(){
return gulp.src(SCSS_SRC)
.pipe(sass())
.pipe(minifyCSS())
.pipe(rename({suffix: '.min'}))
.pipe(changed(SCSS_DEST))
.pipe(gulp.dest(SCSS_DEST));
});
//Detect changes in SCSS
gulp.task('watch_scss', function(){
gulp.watch(SCSS_SRC, ['compile_scss']);
});
//Run
gulp.task('default', ['watch_scss']);

然而，Gulp 4完全改变了函数处理，我还没有找到一个简单地观察scs并将其放入缩小css的好例子。我读过关于gull.series和gull.paralrel的书，但我认为这些东西都不是我想要的。上面在Gulp3中使用的代码在Gulp4中不再工作。cmd没有运行gulp watch_css，而是向我抛出了一个错误，如下所示：

assert.js:350投掷失误；^

AssertionError[ERR_ASSERTION]：必须指定任务函数在Gulp.set〔as _setTask〕(D:\say my name RG\say myname node_modules\paunter\lib\set task.js:10:3)在Gulp.task(D:\say my name RG\say myname node_modules\paunter\lib\task.js:13:8)在对象处。(D:\say my name RG\saymyname\gullfile.js:29:6)在模块中_compile(internal/modules/cjs/loader.js:689:30)在对象处。模块_扩展。。js(internal/modules/cjs/loader.js:700:10)在Module.load(internal/modules/cjs/loader.js:599:32)在tryModuleLoad(internal/modules/cjs/loader.js:538:12)在Function。模块_load(internal/modules/cjs/loader.js:530:3)在Module.require(internal/modules/cjs/loader.js:637:17)at required(internal/modules/cjs/helpers.js:22:18)

这一切都在本地主机节点服务器上，使用react。我试过寻找gull.set函数，但没有找到任何类似的函数。有人说回到Gulp 3是最简单的选择，但我有点想使用最新的软件。

同样在cmd中运行gulp compile_scss，所以没有gull.watch，会出现与上面所示相同的错误。

Answer 1

您确实需要使用gull.series：

//Detect changes in SCSS
gulp.task('watch_scss', function(){
gulp.watch(SCSS_SRC, gulp.series('compile_scss'));
});
//Run
gulp.task('default', gulp.series('watch_scss'));

你在第行有一个打字错误：

var minifyCCS   = require('gulp-clean-css');

更改为：

var minifyCSS   = require('gulp-clean-css');

迁移到gull4是一个很好的参考。