Установка плагинов PostCSS

В этой статье мы научимся устанавливать плагины для PostCSS

После прочтения цикла статей:

Смело переходите к прочтению этой статьи, а для начала установки запустите Node.js command prompt.

Установка плагинов

Установим плагины на которых мы делали обзор в самой первой статье Ознакомление

Установка CSSnext

CSSnext уже включает в свой состав плагин Autoprefixer. Что-бы установить выполните команду установки модуля:

npm i postcss-cssnext

Далее откройте файл gulpfile.js, добавьте переменную плагина и укажите её в параметрах обработки, то есть у вас должен получиться следующий код:

var gulp = require('gulp');
var postcss = require('gulp-postcss');

var cssnext = require('postcss-cssnext')();

gulp.task('css', function() {
    var plugins = [cssnext];

    return gulp.src('./src/*.css')
    .pipe(postcss(plugins))
    .pipe(gulp.dest('./dest'));
});

Желательно что бы переменные соответствовали названию плагина. Сохраните файл.

Дополнительно Репозиторий и Сайт

Установка CSSnano

Команда: npm i cssnano
Переменная: var cssnano = require('cssnano'); которую нужно указать в параметрах, через запятую.

Ещё у плагинов есть дополнительные параметры. Например CSSnano удаляет не используемые свойства @font-face. Что бы отключить это действие, укажите в параметрах discardUnused: {fontFace: false} а так-же отключим autoprefixer: false так как он и сюда входит в состав.

А что бы передать параметры, их нужно указать в дополнительных скобках переменной, получится следующий код:

var gulp = require('gulp');
var postcss = require('gulp-postcss');

var cssnext = require('cssnext')();
var cssnano = require('cssnano')({discardUnused:{fontFace: false}, autoprefixer: false});

gulp.task('css', function() {
    var plugins = [ cssnext, cssnano];

    return gulp.src('./src/*.css')
    .pipe(postcss(plugins))
    .pipe(gulp.dest('./dest'));
});

Репозиторий и Сайт

Установка Modules

Команда: npm i postcss-modules
Переменная: var modules = require('postcss-modules');
Так же укажите переменную в параметрах.
Репозиторий

Установка Px-to-em

npm i postcss-px-to-em
var pixem = require('postcss-px-to-em');
Репозиторий

Заключение

Кстати в CSSNext уже встроен AutoPrefix, поэтому его нужно убрать. Что бы в итоге получился следующий код:

var gulp = require('gulp');

var postcss = require('gulp-postcss');

var cssnext = require('postcss-cssnext');
var cssnano = require('cssnano')({discardUnused: {fontFace: false}, autoprefixer: false });    
var modules = require('postcss-modules');
var pixem = require('postcss-px-to-em');

gulp.task('css', function() {
    var plugins = [cssnext, cssnano, modules, pixem];

    return gulp.src('./src/*.css')
    .pipe(postcss(plugins))
    .pipe(gulp.dest('./dest'));
});

теперь мы научились устанавливать плагины в PostCSS, а также передавать параметры плагинам. В следующих обзорах не забывайте указывать переменные в параметрах.

Продолжение Сборка проекта

Комментарии - 0
для добавления комментария
пожалуйста войдите или зарегистрируйтесь
Хостинг от uCoz