Gulp 3至Gulp 4：如何觀看scs並將其最小化/編譯為CSS？

Question

在Gulp 3中，使用以下代碼將在檢測到更改時將scss放入css。 它將使用舊的.scss文件制作新的縮小文件，並將其放入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完全改變了函數處理方式，我還沒有找到一個簡單的例子來說明如何簡單地觀看scss並將其放入最小化的css中。 我已經閱讀了有關gulp.series和gulp.parallel的信息，但我認為這些都不是我想要的。 上面的代碼在Gulp 3中使用，在Gulp 4中不再起作用。該cmd不會運行gulp watch_css ，而是向我拋出如下錯誤：

assert.js：350 throw err; ^

AssertionError [ERR_ASSERTION]：必須在Gulp.set [as _setTask]（D：\\ say-my-name-RG \\ saymyname \\ node_modules \\ undertaker \\ lib \\ set-task.js：10：3​​）中指定任務功能.task（D：\\ say-my-name-RG \\ saymyname \\ node_modules \\ undertaker \\ lib \\ task.js：13：8）。 （D：\\ say-my-name-RG \\ saymyname \\ gulpfile.js：29：6）位於Object.Module._extensions..js的Module._compile（internal / modules / cjs / loader.js：689：30） （internal / modules / cjs / loader.js：700：10）在try.ModuleLoad（internal / modules / cjs / loader.js：538：12）在Module.load（internal / modules / cjs / loader.js：599：32） ）在Function.Module._load（internal / modules / cjs / loader.js：530：3）在Module.require（internal / modules / cjs / loader.js：637：17）在require（internal / modules / cjs / helpers.js：22：18）

使用react，所有這些都在本地主機節點服務器上。 我試圖尋找一個gulp.set函數，但沒有發現任何東西。 有人說回到Gulp 3是最簡單的選擇，但我有點想使用最新的軟件。

同樣在cmd中運行gulp gulp compile_scss ，因此如果沒有gulp.watch，也會出現與上述相同的錯誤。

Answer 1

您確實需要使用gulp.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');

遷移到gulp4是一個很好的參考。