Gulp 4下gulp-autoprefixer不生效、watch任务挂起问题

问题描述 #

使用Gulp 4做前端构建时遇到两个异常：

• 执行gulp styles任务时，源文件仅通过pipe直接传输到build目标目录，gulp-autoprefixer未执行CSS前缀自动补全处理
• 为styles任务配置gulp watch监听后，watch任务启动后持续挂起，不会正常结束执行

现有gulpfile.js代码 #

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('styles', function() {
    return new Promise(function(resolve, reject){
        gulp.src('style.css')
        .pipe(autoprefixer())
        .pipe(gulp.dest('build'))
       resolve();
    });
});

gulp.task('watch', function() {
    gulp.watch('style.css', gulp.series('styles'));
});

执行输出 #

在PS C:\Users\OneDrive\testGulp路径下执行gulp watch命令，终端返回如下内容：

[19:00:23] Using gulpfile ~\OneDrive\testGulp\gulpfile.js
[19:00:23] Starting 'watch'...

项目目录结构 #

问题定位与修复 #

autoprefixer不生效问题 #

根因是styles任务手动包裹了Promise，且在gulp流刚启动还没完成处理时就调用了resolve()，Gulp判定任务完成时，autoprefixer的处理逻辑还没执行完，文件就被直接复制到目标目录了。
Gulp 4原生支持直接返回流作为任务完成的信号，不需要手动封装Promise，修复后的styles任务代码如下：

gulp.task('styles', function() {
    return gulp.src('style.css')
        .pipe(autoprefixer({
            // 显式配置兼容的浏览器范围，避免新版本autoprefixer因无兼容目标不生成前缀
            overrideBrowserslist: ['last 2 versions', '> 1%']
        }))
        .pipe(gulp.dest('build'))
});

注：高版本gulp-autoprefixer默认读取项目browserslist配置，如果没有配置也没有传入参数，不会自动添加前缀，建议显式传入兼容范围配置。

watch任务挂起问题 #

这个是gulp watch的正常运行逻辑：watch本身是常驻监听进程，启动后会持续监听指定文件的变化，触发对应任务，本身设计就不会自动退出，不需要持续监听时按Ctrl + C手动终止进程即可。
如果要消除Gulp的任务完成警告，可以在watch任务中返回watch实例：

gulp.task('watch', function() {
    return gulp.watch('style.css', gulp.series('styles'));
});

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