在gulp 4上设置gulp sass

在对package.json文件中的依赖项进行了一些升级之后，我最近将Gulp更新到了版本4。我在设置新的gulp.series/gulp.parallel时遇到了问题，因此无法像升级之前那样工作

这就是我的

Gulpfile.js

目前的样子：

const gulp = require('gulp'),
      sass = require('gulp-sass'),
      autoprefixer = require('gulp-autoprefixer'),
      cleanCSS = require('gulp-clean-css'),
      browserSync = require('browser-sync').create();

gulp.task('styles', gulp.series(function() {
    gulp.src('sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false,
            grid: "no-autoplace"
        }))
        .pipe(gulp.dest('./css/'))
        .pipe(browserSync.stream());
}));

//Watch task
gulp.task('default', gulp.parallel('styles',function() {
    gulp.watch('sass/**/*.scss',gulp.parallel('styles'));
    gulp.watch("*.html").on('change', browserSync.reload);
}));

gulp.task("sync", gulp.parallel("default",function(){
    browserSync.init({
        server: "./",
        notify: false
    });
}));

这就是我升级到版本4之前的样子，当时它的工作方式与我所希望的一样：

const gulp = require('gulp'),
      sass = require('gulp-sass'),
      autoprefixer = require('gulp-autoprefixer'),
      cleanCSS = require('gulp-clean-css'),
      browserSync = require('browser-sync').create();

gulp.task('styles', function() {
    gulp.src('sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('./css/'))
        .pipe(browserSync.stream());
});

//Watch task
gulp.task('default',function() {
    gulp.watch('sass/**/*.scss',['styles']);
    gulp.watch("*.html").on('change', browserSync.reload);
});

gulp.task("sync", ["default"], function(){
    browserSync.init({
        server: "./",
        notify: false
    });
})

我希望它的行为方式显然是在保存时将SCSS文件编译为CSS。这在一定程度上起了作用。编辑

main.scss

文件时（位于

sass/main.scss

中，CSS会像我想要的那样立即生成，每次保存时都会生成新的CSS。但是，如果我编辑位于

sass/partials/_file.scss

中的部分文件，它只在启动Gulp后的第一次保存时起作用。如果我尝试第二次保存，更改不会作为CSS和终端日志未更新为新的时间戳

我猜我的gulp.series/gulp.parallel设置错误。我怀疑我必须以某种方式将其应用于

管道

方法，但我不知道如何更改。

需要更改两件事：

gulp.task('styles', gulp.series(function() {
   gulp.src('sass/**/*.scss')

改为

gulp.task('styles', function() {
    return gulp.src('sass/**/*.scss')
    …
});

这里不需要gulp.series并添加return语句。另外，我建议最终使用完整的函数路径，而不是使用gulp.task

---

如果有帮助，请告诉我们。

谢谢！我会尽快尝试并回复您！