How to become an author
Search
Write a publication
Pull to refresh

Comments 29

Попробовал только что. Запустил дефолтную задачу и при попытке изменить 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

Rating is hidden
Хмм… Странно. У меня всё работает. У кого-то ещё есть такая проблема?
Пришлите пожалуйста, что написано в gulpfile.js, который находится в корне проекта.
Rating is hidden
Пожалуйста
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'));
});

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

Строку 47 следует заменить на:
gulp.task('css', function () {
Rating is hidden
Пардон, конечно же:
gulp.task('postcss', function () {
Rating is hidden
UFO landed and left these words here
Большой разницы между препроцессором и PostCSS нет. Просто название такое. Профит от PostCSS в гибкости. Любую недостающую фичу можно реализовать уже сейчас, а не ждать, пока она появится в SASS. Стандартизация синтаксиса для коллективной работы — это уже дело другое.
Rating is hidden
А также скорость работы и более быстрое написание кода.
Rating is hidden
UFO landed and left these words here
PostCSS раз в 10-20 быстрее Ruby Sass. Обычно PostCSS так же в несколько раз быстрее libsass — но там результат уже зависит от плагинов, есть пару плагинов, которые очень неоптимально написаны.
Rating is hidden
C Emmet — преимущество написания с помощью сокращений сводится на нет.
И опять же подсветка ошибок в IDE
Rating is hidden
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 куча ошибок подсвечивается.
Rating is hidden
Автор поста зря не упоминал postcss-use — www.npmjs.com/package/postcss-use

Этот инструмент как раз решает обозначенную вами задачу — в начале каждого файла явно указываются плагины, которые для него нужны.
Rating is hidden
В целом — да, все задачи которые автор статьи решает с помощью PostCSS, можно решить и без PostCSS.

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

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

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

Третий пример — cssnext, чтобы уже сейчас писать на CSS4.
Rating is hidden
Да, спасибо. Я планирую расширить возможности сборки в ближайшее время некоторыми из перечисленных вами вещей. Опять же, сборку писал под себя и она отнюдь не претендует на звание единственно правильного способа использования PostCSS в работе.
Rating is hidden
Я бы про cssnext с радостью бы почитал, как оказалось много ещё не знаю. Если это будет в обновленной статье, буду признателен.
Rating is hidden
Именно!!!
Смысл PostCSS именно в модульности и расширяемости.
Легко написать плагин самостоятельно. Это же обычный JS
Например, я написала плагинчик, кототый меняет урлы изображений в соответствии со структурой моего проекта.
Исходные изображения лежат в одной папке — и при редактировании в IDE их урлы, да и размеры легко подставляются автоматом.
А при компиляции они в другую папку ложатся — и урлы в css конечном уже другие.
Rating is hidden
Важно понимать, что PostCSS — это препроцессор)
Rating is hidden
generator-alchemist и картинка до ката сразу наводят на мысль о Full Metal Alchemist
Rating is hidden
по-моему не больше — всё тоже самое, но за ссылку спасибо.
Rating is hidden
Что касается тех плагинов, что привели вы, то у меня гридная сетка уже изначально встроена в сборку. А вот с последним я был не знакомы и обязательно его включу.
Rating is hidden
Обновил статью ввиду обновления содержимого сборки новой версии.
Rating is hidden
В postcss меня отпугивает отсутствие умного extend, который есть в sass.
Rating is hidden
Sign up to leave a comment.

Articles

Your account

Sections

Information

Services

Support
© 2006–2025, Habr