Как я использую PostCSS

[set]

Попробовал только что. Запустил дефолтную задачу и при попытке изменить css файл сразу же получил вот что:

[12:27:46] Task 'postcss' is not in your gulpfile
[12:27:46] Please check the documentation for proper gulpfile formatting
gulp.run() has been deprecated. Use task dependencies or gulp.watch task triggering instead.

Process finished with exit code 1

[azat-io]

Хмм… Странно. У меня всё работает. У кого-то ещё есть такая проблема?
Пришлите пожалуйста, что написано в gulpfile.js, который находится в корне проекта.

[set]

Пожалуйста

var autoprefixer = require('autoprefixer-core');
var center = require('postcss-center');
var clearfix = require('postcss-clearfix');
var colorshort = require('postcss-color-short');
var cssnano = require('cssnano');
var discardcomments = require('postcss-discard-comments');
var focus = require('postcss-focus');
var gulp = require('gulp');
var htmlhint = require('gulp-htmlhint');
var imagemin = require('gulp-imagemin');
var mediaminmax = require('postcss-media-minmax');
var pngquant = require('imagemin-pngquant');
var postcss = require('gulp-postcss');
var precss = require('precss');
var pxtorem = require('postcss-pxtorem');
var short = require('postcss-short');
var size = require('postcss-size');
var uglify = require('gulp-uglify')

gulp.task('default', function() {
  gulp.watch('src/html/**', function(event) {
    gulp.run('html');
  });
  gulp.watch('src/css/**', function(event) {
    gulp.run('postcss');
  });
  gulp.watch('src/js/**', function(event) {
    gulp.run('js');
  });
  gulp.watch('dist/images/**', function(event) {
    gulp.run('images');
  });
});


// HTML

gulp.task('html', function() {
  gulp.src('src/html/**/*.html')
      .pipe(htmlhint())
    .pipe(gulp.dest('dist/'))
});


// PostCSS

gulp.task('css', function () {
    var processors = [
        colorshort,
        focus,
        center,
        mediaminmax,
        precss,
        short,
        size,
        clearfix,
        pxtorem,
        discardcomments,
        autoprefixer({browsers: ['last 5 version', 'ie 8']}),
        cssnano
    ];
    return gulp.src('src/css/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('dist/css/'));
});

// JavaScript

gulp.task('js', function () {
    return gulp.src('src/js/*')
          .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

// Image files

gulp.task('images', function () {
    return gulp.src('src/images/*')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }))
        .pipe(gulp.dest('dist/images'));
});

[azat-io]

Понял. Спасибо, благодаря вам нашёл ошибку в версии сборки без Jade.

Строку 47 следует заменить на:

gulp.task('css', function () {

[set]

:) всегда пожалуйста.

[azat-io]

Пардон, конечно же:

gulp.task('postcss', function () {

[olegkrasnov]

Большой разницы между препроцессором и PostCSS нет. Просто название такое. Профит от PostCSS в гибкости. Любую недостающую фичу можно реализовать уже сейчас, а не ждать, пока она появится в SASS. Стандартизация синтаксиса для коллективной работы — это уже дело другое.

[azat-io]

А также скорость работы и более быстрое написание кода.

[Iskin]

PostCSS раз в 10-20 быстрее Ruby Sass. Обычно PostCSS так же в несколько раз быстрее libsass — но там результат уже зависит от плагинов, есть пару плагинов, которые очень неоптимально написаны.

[porcelanosa]

C Emmet — преимущество написания с помощью сокращений сводится на нет.
И опять же подсветка ошибок в IDE

[porcelanosa]

PreCSS плагин для PostCSS — это не совсем SASS.
Скорее это такой вариант SCSS — многое надо писать по-другому.

Т.е. другой синтаксис, например для Mixins

/* before */

@define-mixin icon $name {
    padding-left: 16px;

    &::after {
        content: "";
        background-url: url(/icons/$(name).png);
    }
}

.search {
    @mixin icon search;
}

/* after */

.search {
    padding-left: 16px;
}

.search::after {
    content: "";
    background-url: url(/icons/$(name).png);
}

… да и не все возможности SASS поддерживаются
И все бы хорошо, но как сказали выше — это вот когда ты один пишешь.
И кроме того в IDE куча ошибок подсвечивается.

[Iskin]

Автор поста зря не упоминал postcss-use — www.npmjs.com/package/postcss-use

Этот инструмент как раз решает обозначенную вами задачу — в начале каждого файла явно указываются плагины, которые для него нужны.

[Iskin]

В целом — да, все задачи которые автор статьи решает с помощью PostCSS, можно решить и без PostCSS.

Смысл PostCSS в другом — решать те задачи, которые нельзя решить на Sass. То есть это не вопросы синтаксического сахара.

Например, CSS Modules — как развитие идеи БЭМ, стал возможен только из-за PostCSS glenmaddern.com/articles/css-modules

Другой пример, минифиактор cssnano и исправление стиля код с помощью CSSfmt.

Третий пример — cssnext, чтобы уже сейчас писать на CSS4.

[azat-io]

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

[zavvla]

Я бы про cssnext с радостью бы почитал, как оказалось много ещё не знаю. Если это будет в обновленной статье, буду признателен.

[azat-io]

zavvla Про cssnext вот: https://habrahabr.ru/post/267181/

[porcelanosa]

Именно!!!
Смысл PostCSS именно в модульности и расширяемости.
Легко написать плагин самостоятельно. Это же обычный JS
Например, я написала плагинчик, кототый меняет урлы изображений в соответствии со структурой моего проекта.
Исходные изображения лежат в одной папке — и при редактировании в IDE их урлы, да и размеры легко подставляются автоматом.
А при компиляции они в другую папку ложатся — и урлы в css конечном уже другие.

[olegkrasnov]

.

[Diokuz]

Важно понимать, что PostCSS — это препроцессор)

[fareloz]

generator-alchemist и картинка до ката сразу наводят на мысль о Full Metal Alchemist

[porcelanosa]

Добавлю полезные плагины:
github.com/corysimmons/lost css grid в виде аля миксинов.
github.com/justim/postcss-svg-fallback Fallback для SVG —
github.com/hail2u/node-css-mqpacker группирует media queries и перемещает их в конец файла.
это то что сама использую.
А вообще вот github.com/postcss/postcss#plugins

[azat-io]

Там лишь самый смак. Больше плагинов тут: postcss.parts

[porcelanosa]

по-моему не больше — всё тоже самое, но за ссылку спасибо.

[azat-io]

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

[porcelanosa]

github.com/luisrudge/postcss-flexbugs-fixes — вот очень полезный плагин. Исправляет все баги с flex — коих тьма пока еще.
Почему-то изъяли из каталогов.

[azat-io]

Обновил статью ввиду обновления содержимого сборки новой версии.

[Finom]

В postcss меня отпугивает отсутствие умного extend, который есть в sass.