Как написать postcss плагин

1) Скачиваем postcss (и несколько плагинов, для примера)


npm install gulp-postcss postcss-mixins postcss-simple-vars postcss-nested autoprefixer-core --save-dev

2) Добавляем настройки в gulpfile.js и создаем сам плагин, выглядит это примерно так:


var
gulp = require('gulp'),
postcss = require('gulp-postcss'),
processors = [
require('postcss-mixins'),
require('postcss-simple-vars'),
require('postcss-nested'),
// Добавляем наш плагин.
function(css) {
// sans-serif fallback
css.eachDecl('font-family', function(decl) {
decl.value = decl.value + ', sans-serif';
});
}
];

Плагин это простая JavaScript функция, которая в качестве аргумента принимает css код и имеет собственное API

3) После, вызываем это штуку:

gulp.task('css', function() {
return gulp.src('source/css/styles.css')
.pipe(postcss(processors))
.pipe(gulp.dest('dest/styles/'));
});

4)??????
PROFIT

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *