带有迭代器的 Gulp 任务仅运行第一次迭代，然后继续执行下一个任务答案

【问题标题】：Gulp task with iterator only runs first iteration and then moves on to next task带有迭代器的 Gulp 任务仅运行第一次迭代，然后继续执行下一个任务
【发布时间】：2020-02-03 18:49:31
【问题描述】：

我的“样式”任务仅运行第一次迭代“编辑器”，不会运行后续迭代。我认为这是由于最近更新到 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());
    }
});

【问题讨论】：

请看答案，不要忘记upvote 和validate ;)

标签： css sass gulp

【解决方案1】：

@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;
});

【讨论】：

【解决方案2】：

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

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

【讨论】：