gulp常用插件之gulp-postcss使用

更多gulp常用插件使用請訪問：gulp常用插件匯總

---

** gulp-postcss**這是一款通過多個插件通過管道傳遞CSS，但是僅解析一次CSS。

更多使用文檔請點擊訪問gulp-postcss工具官網。

安裝

一鍵安裝不多解釋

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
        }
    }
})