在4号峡谷上设置峡谷沙司

在对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 ,它只在开始吞咽后的第一次保存时起作用。如果我再次尝试保存,则更改不会作为CSS生成,并且终端日志不会更新为新的时间戳。

我想我把gulp.series/gulp.parallel设置错了。我怀疑我必须把这个应用到 pipe 方法,但我不知道怎么做。