使用gulp给css添加前缀以支持多浏览器(附源码)
之前遇到这样一个需求:已经运行的老项目(是用jquery开发的多页面)之前只是兼容chrome,现在样式需要兼容ie10+,safari等浏览器。因为less、css文件太多,一个一个手动添加前缀等不太现实,因为不需要重新编译js等其他资源,也不需要入口文件,因此没有使用webpack,而是使用更简单的gulp。 gulp中文官网
目录结构如下:
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"
}
}
执行:
cd css编译 // 进入编译目录
npm i // 安装依赖
npm run build // 开始编译
整个编译思路就是将www/static/css里面的css、sass、less生成到编译目录里的dist目录,可以根据需求自行修改。
发表评论 (审核通过后显示评论):