一键安置不久不多解释

npm install --save-dev gulp-postcss 使用

单独安置所需的postcss插件。例如，对付autoprefixer，您需要安置autoprefixer软件包。

根基用法

postcss(options)

options(参数)
类型：Array or null

配置是从自动加载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 } } })

gulp常用插件之gulp-postcss使用