Autoprefixer结合gulp可自动为css添加浏览器前缀，提升兼容性与开发效率。通过npm安装gulp、postcss、autoprefixer后，在gulpfile.js中配置css任务调用autoprefixer插件，并使用overrideBrowserslist或.browserslistrc文件指定目标浏览器范围，如>1%、last 2 versions；watch任务监听src/css/目录下的CSS文件变化，自动重新编译并输出到dist/css目录。推荐使用.browserslistrc统一管理浏览器策略，简化配置。运行npx gulp css首次处理，npx gulp watch启动监听，实现构建流程自动化。
Autoprefixer 是一个基于 PostCSS 的 CSS 工具，能自动为 CSS 属性添加浏览器前缀（如 -webkit-、-moz- 等），确保样式在不同浏览器中兼容。结合 Gulp 构建工具使用，可以实现自动化处理 CSS 文件。
安装依赖
在项目目录下通过 npm 安装所需的模块：
npm install –save-dev gulp postcss gulp-postcss autoprefixer
确保已安装 Gulp，并创建 gulpfile.js 配置任务。
配置 Gulp 任务
在 gulpfile.js 中编写 Autoprefixer 处理流程：
立即学习“前端免费学习笔记（深入）”；
const gulp = require(‘gulp’);
const postcss = require(‘gulp-postcss’);
const autoprefixer = require(‘autoprefixer’);
gulp.task(‘css’, function() {
const plugins = [
autoprefixer({ overrideBrowserslist: [‘> 1%’, ‘last 2 versions’] })
];
return gulp.src(‘src/css/.css’)
.pipe(postcss(plugins))
.pipe(gulp.dest(‘dist/css’));
});
gulp.task(‘watch’, function() {
gulp.watch(‘src/css/.css’, gulp.series(‘css’));
});
说明：
- overrideBrowserslist 指定目标浏览器范围，也可写成 .browserslistrc 配置文件
- src/css/*.css 是源文件路径，dist/css 是输出目录
- watch 任务监听文件变化，自动重新编译
使用 .browserslistrc 文件（推荐）
在项目根目录创建 .browserslistrc 文件：
> 1%
last 2 versions
not dead
然后简化 Gulp 配置：
const plugins = [autoprefixer()];
Autoprefixer 会自动读取该文件中的浏览器策略，便于统一管理。
运行任务
执行以下命令启动监听和处理：
npx gulp css
npx gulp watch
每次修改 CSS 文件后，Gulp 会自动调用 Autoprefixer 添加所需前缀。
基本上就这些。配置一次后，就能在构建流程中全自动处理浏览器兼容性问题，提升开发效率。