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。但是，如果我编辑了部分文件，则位于{{1 }}，它仅在启动Gulp之后才在第一次保存时起作用。如果我尝试第二次保存，则更改不会作为CSS生成，并且终端日志也不会更新为新的时间戳。

我猜我gulp.series / gulp.parallel设置错误。而且我怀疑我必须以某种方式将此方法应用于sass/partials/_file.scss方法，但是我不知道如何。

Answer 1

要更改的两件事：

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

更改为

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

那里不需要gulp.series并添加return语句。我也建议最终使用完整功能的路由，而不要使用gulp.task。

让我们知道是否有帮助。

在Gulp 4上设置gulp-sass

1 个答案: