gulp配置postCss,处理浏览器私有前缀,像Sass的函数,将import引入的合成一个,优化,压缩,css Modules
"dependencies": {},
"devDependencies": {
"autoprefixer": "^8.0.0",
"cssnano": "^3.10.0",
"cssnext": "^1.8.4",
"gulp": "^3.9.1",
"gulp-postcss": "^6.0.1",
"postcss": "^5.0.0",
"postcss-import": "^11.1.0",
"postcss-modules": "^1.1.0",
"precss": "^3.1.1"
}
// 大漠postcss文章 https://www.w3cplus.com/blog/tags/517.html?page=1
var gulp = require('gulp')
var postcss = require('gulp-postcss')
var autoprefixer = require('autoprefixer') // 处理浏览器私有前缀
var precss = require('precss') // 像Sass的函数
var atImport = require('postcss-import') // 将import引入的合成一个
var cssnano = require('cssnano') // 优化,压缩等
var modules = require('postcss-modules') // 可以将类名等转换成hash值,从而避免样式冲突。
gulp.task('css', function () {
var processors = [
atImport,
autoprefixer({"browsers": ["> 1%","last 2 versions"]}),
// 指定浏览器版本 https://www.cnblogs.com/tinyphp/p/4738571.html
precss,
cssnano,
modules({"generateScopedName": '[name]_[local]_[hash:base64:5]'}) // https://github.com/css-modules/postcss-modules
];
return gulp.src('./src/index.css')
.pipe(postcss(processors))
.pipe(gulp.dest('./dist'))
})