在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):postcss/gulp-postcss开源软件地址(OpenSource Url):https://github.com/postcss/gulp-postcss开源编程语言(OpenSource Language):JavaScript 100.0%开源软件介绍(OpenSource Introduction):gulp-postcssPostCSS gulp plugin to pipe CSS through several plugins, but parse CSS only once. Install
Install required postcss plugins separately. E.g. for autoprefixer, you need to install autoprefixer package. Basic usageThe configuration is loaded automatically from var postcss = require('gulp-postcss');
var gulp = require('gulp');
gulp.task('css', function () {
return gulp.src('./src/*.css')
.pipe(postcss())
.pipe(gulp.dest('./dest'));
}); Passing plugins directlyvar 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'));
}); Using with .pcss extensionFor using gulp-postcss to have input files in .pcss format and get .css output need additional library like gulp-rename. var postcss = require('gulp-postcss');
var gulp = require('gulp');
const rename = require('gulp-rename');
gulp.task('css', function () {
return gulp.src('./src/*.pcss')
.pipe(postcss())
.pipe(rename({
extname: '.css'
}))
.pipe(gulp.dest('./dest'));
}); This is done for more explicit transformation. According to gulp plugin guidelines
Passing additional options to PostCSSThe second optional argument to gulp-postcss is passed to PostCSS. This, for instance, may be used to enable custom parser: 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'));
}); Using a custom processorvar postcss = require('gulp-postcss');
var cssnext = require('postcss-cssnext');
var opacity = function (css, opts) {
css.walkDecls(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'));
}); Source map supportSource map is disabled by default, to extract map use together with gulp-sourcemaps. return gulp.src('./src/*.css')
.pipe(sourcemaps.init())
.pipe(postcss(plugins))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./dest')); Advanced usageIf you want to configure postcss on per-file-basis, you can pass a callback
that receives vinyl file object and returns
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'));
}); The same result may be achieved with
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
}
}
}) Changelog
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论