Gulp autoprefixer执行"gulp styles"后未生成文件求助

嘿，刚接触Autoprefixer就碰到这个无输出的坑确实闹心，我帮你一步步排查下可能的问题：

1. 先确认源文件路径没出错 #

你的styles任务里指定的源文件是css/styles.css，先去项目根目录下看看这个文件真的存在吗？有没有拼写错误（比如把css写成Css？Linux/macOS可是区分大小写的）。如果源文件找不到，Gulp不会报错，但自然也不会生成任何输出文件。

2. 检查Autoprefixer的配置语法（版本兼容是重灾区） #

你用的browsers配置项在新版的Autoprefixer里已经被废弃啦！现在得换成overrideBrowserslist。如果你的gulp-autoprefixer版本比较新，旧配置会直接导致插件罢工，没输出就很正常了。修改后的配置应该是这样：

.pipe(autoprefixer({
  overrideBrowserslist: ['last 2 versions'],
  cascade: false
}))

3. 给任务加个错误捕获，看看是不是藏着报错 #

Gulp默认会吞掉很多错误，你根本看不到问题出在哪。给任务加个错误监听，就能在终端看到具体报错了：

gulp.task('styles', () => gulp.src('css/styles.css')
  .pipe(autoprefixer({
    overrideBrowserslist: ['last 2 versions'],
    cascade: false
  }))
  .on('error', function(err) {
    console.error('Autoprefixer出问题啦:', err.message);
    this.emit('end'); // 保证任务不会因为报错卡住
  })
  .pipe(gulp.dest('build'))
);

再跑一遍gulp styles，看看终端有没有提示，比如CSS语法错了、依赖没装全之类的。

4. 确认Gulp版本的兼容性 #

如果你的Gulp是4.x版本，虽然旧的gulp.task写法还能用，但有时候异步任务的处理会有问题。试试换成Gulp 4.x推荐的任务定义方式：

function styles() {
  return gulp.src('css/styles.css')
    .pipe(autoprefixer({
      overrideBrowserslist: ['last 2 versions'],
      cascade: false
    }))
    .pipe(gulp.dest('build'));
}

exports.styles = styles;

然后执行gulp styles试试效果。

5. 检查输出目录的权限 #

看看项目根目录下有没有build文件夹？如果没有，Gulp会自动创建，但如果当前用户没有创建目录的权限，就会默默失败。可以手动先建个build文件夹，再跑任务试试。

对了，你没写完的watch任务，如果是Gulp 4.x的话，正确写法应该是这样：

function watch() {
  gulp.watch('css/styles.css', styles);
}

exports.watch = watch;

先按上面的步骤排查，应该能很快找到问题所在～

内容的提问来源于stack exchange，提问作者The Ace