在Gulp 4上设置Gulp sass

Question

在对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设置错了。我怀疑我必须以某种方式将其应用于pipe方法，但我不知道如何应用。

Answer 1

需要改变的两件事：

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

更改为

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

这里不需要gulp.series，并添加返回语句。此外，我建议最终使用完整的功能路线，而不是使用gulp.task。

如果有帮助，请让我们知道。