使用gulp给css添加前缀以支持多浏览器（附源码）

之前遇到这样一个需求：已经运行的老项目（是用jquery开发的多页面）之前只是兼容chrome，现在样式需要兼容ie10+，safari等浏览器。因为less、css文件太多，一个一个手动添加前缀等不太现实，因为不需要重新编译js等其他资源，也不需要入口文件，因此没有使用webpack，而是使用更简单的gulp。 gulp中文官网

目录结构如下：

image.png

gulpfile.js

const gulp = require('gulp');

const pump = require('pump') // 辅助模块pump可以使我们更容易找到代码出错位置.

// 添加css前缀,postcss算是一种平台，可以使用插件来处理css，它提供了一个解释器，能够将css解释为抽象语法树
// const autoprefixer = require('gulp-autoprefixer'); // 不使用postcss直接使用gulp-autoprefixer也可以
const postcss = require('gulp-postcss'); // 使用postcss加载autoprefixer等插件更好，推荐使用
const autoprefixer = require('autoprefixer');

const less = require('gulp-less');
const sass = require('gulp-sass')(require('sass'));

const clean = require('gulp-clean');// 清理文件或文件夹

let _src = '../www/static/css/'

let _output = './dist/'

gulp.task('clean', function () {
    // task任务里要加上return 不然还是会异步执行
   return gulp.src(_output, {read: false})
        .pipe(clean());
})

// 公共处理css前缀方法
let afn = function () {
    return postcss([
        autoprefixer({
            overrideBrowserslist: ['last 2 versions', 'iOS >= 8', 'Firefox >= 20', 'Android > 4.0'],
            cascade: true //是否美化属性值 默认：true 像这样：
        })
    ])
}

// 编译css
gulp.task('css', function () {
    return gulp.src(_src + '*.css')
        .pipe(afn())
        .pipe(gulp.dest(_output));
});

// 编译less
gulp.task('less', function () {
    return gulp.src(_src + '*.less')
        .pipe(less())
        .pipe(afn())
        .pipe(gulp.dest(_output));
});

// 编译sass
gulp.task('sass', function () {
    return gulp.src(_src + '*.scss')
        .pipe(sass())
        .pipe(afn())
        .pipe(gulp.dest(_output));
});

gulp.task('default', gulp.series('clean','css', // 先执行css，后面若less或者sass生成了同名文件将覆盖，less，sass生成的文件优先级最高
    gulp.parallel('less', 'sass'),
));

package.json

{
  "name": "y",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "clean": "gulp clean",
    "build": "gulp default"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^8.0.0",
    "gulp-clean": "^0.4.0",
    "gulp-less": "^5.0.0",
    "gulp-postcss": "^9.0.1",
    "gulp-sass": "^5.0.0",
    "pump": "^3.0.0"
  },
  "dependencies": {
    "autoprefixer": "^10.4.0",
    "sass": "^1.43.4"
  }
}

image.png

执行：

cd css编译 // 进入编译目录
npm i // 安装依赖
npm run build // 开始编译

整个编译思路就是将www/static/css里面的css、sass、less生成到编译目录里的dist目录，可以根据需求自行修改。