Gulp 带迭代器的任务只运行第一次迭代，然后转到下一个任务

Question

我的 "styles" 任务仅运行第一次迭代 "editor" 并且不会运行后续迭代。我认为这是由于最近更新到 Gulp 4.x 如果是这样的话，这个任务的新语法是什么？

此任务用于将['editor.scss'、'login.scss'、'main.scss'、'typography.scss']编译为['editor.css'、'login.css'、'main.css' , 'typography.css' ]

gulp.task('styles', function(){

    for( var i=0, files=[ 'editor', 'login' , 'main' , 'typography' ]; i < files.length; i++ ){

        //Compile Main Styles
        return gulp.src('scss/' + files[i] + '.scss')
            .pipe(plumber())
            .pipe(glob())
            .pipe(sass({ outputStyle: 'compressed' }).on('error' , sass.logError ) )
            .pipe(postcss([ autoprefixer ]))
            .pipe(gulp.dest('css/'))
            .pipe(browserSync.stream());
    }
});

Answer 1

此处的问题来自您的 return 语句，该语句将退出 for 循环。 Gulp直接支持数组：

gulp.task('styles', function(){
  return gulp.src(['/scss/editor.scss', '/scss/login.scss', ...], { base: '.' })
    .pipe(sass())
    .pipe(gulp.dest('.'));
});

Answer 2

@johannchopin 完全正确（我投了赞成票）。但如果您更喜欢保持现有风格，可以使用：

gulp.task('styles', function () {

  let stream;

  for( var i=0, files=[ 'editor', 'login' , 'main' , 'typography' ]; i < files.length; i++ ){

      //Compile Main Styles
      stream = gulp.src('scss/' + files[i] + '.scss')
        .pipe(plumber())
        .pipe(glob())
        .pipe(sass({ outputStyle: 'compressed' }).on('error' , sass.logError ) )
        .pipe(postcss([ autoprefixer ]))
        .pipe(gulp.dest('css/'))
        .pipe(browserSync.stream());
  }

  return stream;
});

Gulp 带迭代器的任务只运行第一次迭代，然后转到下一个任务

Gulp task with iterator only runs first iteration and then moves on to next task

css

sass

gulp