gulp 4 的浏览器列表和同步完成问题

Question

我正在尝试调试 GULP 文件中的错误。我似乎无法弄清楚我到底应该改变什么。错误如下：

将 Autoprefixer 浏览器选项替换为 Browserslist 配置。使用 package.json 或 .browserslistrc 文件中的 browserslist 键。

使用浏览器选项会导致一些错误。浏览器列表配置可用于 Babel、Autoprefixer、postcss-normalize 等工具。

如果您确实需要使用选项，请将其重命名为 overrideBrowserslist。

了解更多信息： https://github.com/browserslist/browserslist#readme https://twitter.com/browserslist

[12:20:01] 以下任务未完成：默认、compile-scss [12:20:01] 你是不是忘了发出异步完成信号？

var gulp = require('gulp');

// Include plugins
var path = require('path');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var cleanCSS = require('gulp-clean-css');
var folders = require('gulp-folders');
var imagemin = require('gulp-imagemin');

// Config
var inputFolders =  'src'
var outputFolders = 'public'
var scssInput =     'styles';
var scssOutput =    'styles'
var jsInput =       'scripts';
var jsOutput =      'scripts';
var mediaInput =    'images';
var mediaOutput =   'images';
var backupImageFolder = 'backup-image';

// compile scss into css
gulp.task('compile-scss', folders(inputFolders, function (folder) {
  var processors = [
    autoprefixer({browsers: ['last 2 versions', 'IE 10', 'Safari 8']})
  ];
  return gulp.src(inputFolders + '/' + folder + '/' + scssInput  + '/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss(processors))
    .pipe(cleanCSS({compatibility:'*'}))
    .pipe(gulp.dest(outputFolders + '/' + folder + '/' + scssOutput));
}));

// concatenate and minify js
gulp.task('scripts', folders(inputFolders, function(folder) {
  return gulp.src(inputFolders + '/' + folder + '/' + jsInput + '/*.js')
    // .pipe(concat('scripts.js'))
    .pipe(uglify())
    .pipe(gulp.dest(outputFolders + '/' + folder + '/' + jsOutput));
}));

// deploy any media and losslessly optimise if possible
gulp.task('media', folders(inputFolders, function(folder) {
  return gulp.src([inputFolders + '/' + folder + '/' + mediaInput + '/*', inputFolders + '/' + folder + '/' + mediaInput + '/**/*'])
    .pipe(imagemin())
    .pipe(gulp.dest(outputFolders + '/' + folder + '/' + mediaOutput));
}));

// copy across html
gulp.task('html', folders(inputFolders, function(folder) {
  return gulp.src(inputFolders + '/' + folder + '/*.html')
    .pipe(gulp.dest(outputFolders + '/' + folder))
}));

// copy across back-up image for the banner
gulp.task('copy-backup-image', folders(inputFolders, function(folder) {
  return gulp.src(inputFolders + '/' + folder + '/' + backupImageFolder + '/*' )
  .pipe(gulp.dest(outputFolders + '/' + folder + '/' + backupImageFolder))
}));

// Watch files for changes, run affected tasks
gulp.task('watch', function() {
  gulp.watch([inputFolders + '/*/' + scssInput + '/*.scss'], gulp.series('compile-scss'));
  gulp.watch([inputFolders + '/*/' + scssInput + '/**/*.scss'], gulp.series('compile-scss'));
  gulp.watch([inputFolders + '/*/' + jsInput + '/*.js'], gulp.series('scripts'));
  gulp.watch([inputFolders + '/*/' + mediaInput + '/*'], gulp.series('media'));
  gulp.watch([inputFolders + '/*/' + mediaInput + '/**/*'], gulp.series('media'));
  gulp.watch([inputFolders + '/*/*.html'],  gulp.series('html'));
  gulp.watch([inputFolders + '/*/' + backupImageFolder + '/*'],  gulp.series('copy-backup-image'));
});

// Default task
gulp.task('default', 
gulp.series(gulp.parallel('compile-scss', 'scripts', 'media', 'html', 'copy-backup-image'), 'watch'));

Answer 1

在您的工作根目录或工作区目录中创建一个 .browserslistrc，其中包含如下内容：

# Browsers that we support

last 2 versions
IE 10
Safari 8

然后更改此代码：

var processors = [ autoprefixer({browsers: ['last 2 versions', 'IE 10', 'Safari 8']}) ];

简单地说：

var processors = [ autoprefixer() ];

这应该可以消除对 browsers 选项的抱怨。然后运行你的 default 任务看看是否修复了你的 'compile-scss' 未能完成错误消息并报告回来。

现在是异步信号问题。 gulp-folders 插件已经 5 年没有更新了，所以我建议采用不同的方法。

const glob = require('glob');

    // this gets an array of matching folders
const folders = glob.sync(inputFolders');

gulp.task('compile-scss', () => {

  let stream;

  // work on each folder separately
  folders.forEach(function (folder) {

    stream = gulp.src( inputFolders + '/' + folder + '/' + scssInput  + '/*.scss' )

     // do your other stuff

      .pipe(gulp.dest( outputFolders + '/' + folder + '/' + scssOutput ));
  });
  return stream;
});

Answer 2

以下解决方案对我有用，您必须将以下详细信息添加到您的 package.json 文件中。并删除了 autoprefixer.I 中提到的浏览器，希望这会起作用。

 "browserslist": [
      "last 2 versions"
  ],

gulp 4 的浏览器列表和同步完成问题

browserslist and sync completion issues with gulp 4

javascript

gulp

gulp-sass

autoprefixer