gulp常用插件之gulp-postcss使用
更多gulp常用插件使用请访问:gulp常用插件汇总
** gulp-postcss**这是一款通过多个插件通过管道传递CSS,但是仅解析一次CSS。
安装
一键安装不多解释
npm install --save-dev gulp-postcss
使用
单独安装所需的postcss插件。例如,对于autoprefixer,您需要安装autoprefixer软件包。
基本用法
postcss(options)
options
(参数)
类型:Array
ornull
配置是从自动加载postcss.config.js
如这里描述的,所以你不必指定任何选项。
var postcss = require('gulp-postcss');
var gulp = require('gulp');
gulp.task('css', function () {
return gulp.src('./src/*.css')
.pipe(postcss())
.pipe(gulp.dest('./dest'));
});
直接传递插件
var postcss = require('gulp-postcss');
var gulp = require('gulp');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
gulp.task('css', function () {
var plugins = [
autoprefixer({browsers: ['last 1 version']}),
cssnano()
];
return gulp.src('./src/*.css')
.pipe(postcss(plugins))
.pipe(gulp.dest('./dest'));
});
将其他选项传递给PostCSS
gulp-postcss
的第二个可选参数传递给PostCSS。
例如,这可用于启用自定义解析器:
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var nested = require('postcss-nested');
var sugarss = require('sugarss');
gulp.task('default', function () {
var plugins = [nested];
return gulp.src('in.sss')
.pipe(postcss(plugins, { parser: sugarss }))
.pipe(gulp.dest('out'));
});
使用自定义处理器
var postcss = require('gulp-postcss');
var cssnext = require('postcss-cssnext');
var opacity = function (css, opts) {
css.eachDecl(function(decl) {
if (decl.prop === 'opacity') {
decl.parent.insertAfter(decl, {
prop: '-ms-filter',
value: '"progid:DXImageTransform.Microsoft.Alpha(Opacity=' + (parseFloat(decl.value) * 100) + ')"'
});
}
});
};
gulp.task('css', function () {
var plugins = [
cssnext({browsers: ['last 1 version']}),
opacity
];
return gulp.src('./src/*.css')
.pipe(postcss(plugins))
.pipe(gulp.dest('./dest'));
});
源地图支持
默认情况下,源地图是禁用的,以与gulp-sourcemaps一起提取地图。
return gulp.src('./src/*.css')
.pipe(sourcemaps.init())
.pipe(postcss(plugins))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./dest'));
高级用法
如果要在每个文件基础上配置postcss,则可以传递一个回调,该回调接收vinyl 文件对象并返回 { plugins: plugins, options: options }
。例如,当您需要不同地解析不同的扩展名时:
var gulp = require('gulp');
var postcss = require('gulp-postcss');
gulp.task('css', function () {
function callback(file) {
return {
plugins: [
require('postcss-import')({ root: file.dirname }),
require('postcss-modules')
],
options: {
parser: file.extname === '.sss' ? require('sugarss') : false
}
}
}
return gulp.src('./src/*.css')
.pipe(postcss(callback))
.pipe(gulp.dest('./dest'));
});
使用可以实现相同的结果 postcss-load-config,因为它ctx
与上下文选项和乙烯基文件一起接收。
var gulp = require('gulp');
var postcss = require('gulp-postcss');
gulp.task('css', function () {
var contextOptions = { modules: true };
return gulp.src('./src/*.css')
.pipe(postcss(contextOptions))
.pipe(gulp.dest('./dest'));
});
module.exports = function (ctx) {
var file = ctx.file;
var options = ctx.options;
return {
parser: file.extname === '.sss' ? : 'sugarss' : false,
plugins: {
'postcss-import': { root: file.dirname }
'postcss-modules': options.modules ? {} : false
}
}
})