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       犯错       ^

AssertionError [ERR_ASSERTION]：必须指定任务功能       在Gulp.set [作为_setTask]（D：\ say-my-name-RG \ saymyname \ node_modules \ undertaker \ lib \ set-task.js：10：3）       在Gulp.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）       在Module._compile（内部/模块/cjs/loader.js:689:30）       在Object.Module._extensions..js（内部/模块/cjs/loader.js:700:10）       在Module.load（internal / modules / cjs / loader.js：599：32）       在tryModuleLoad（内部/模块/cjs/loader.js:538:12）       在Function.Module._load（内部/模块/cjs/loader.js:530:3）       在Module.require（internal / modules / cjs / loader.js：637：17）       在要求时（internal / modules / cjs / helpers.js：22：18）

这一切都在本地节点服务器上，使用react。我试图寻找一个gulp.set函数，但没有发现任何东西。有人说回到Gulp 3是最简单的选择，但我有点想使用最新的软件。

也在cmd中运行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');

Migrating to gulp4是一个很好的参考。

Gulp 3至Gulp 4：如何观看scs并将其最小化/编译为CSS？

1 个答案: