Самый простой способ использовать autoprefixer?

Question

Что я хочу сделать, это просто иметь инструмент, который может смотреть и автоматически префикс моего CSS. Ранее я использовал http://pleeease.io/, для начинающих, таких как я, это очень просто, после установки через npm мне нужно создать файл опций (.pleeeaserc), а затем сделать

pleeease watch

После этого я могу сосредоточиться на своем CSS, каждый раз, когда я изменяю свой файл CSS, он обрабатывается и выводится.

К сожалению, кажется, что автор прекратил поддерживать его, когда я делаю

npm install pleeease

на моем новом сервере я получил много ошибок, и установка не удалась.

Я полагаю, что настало время для меня, чтобы узнать, как напрямую использовать autoprefixer, который, как я считаю, pleeease интегрирует как одну из его зависимостей.

Тем не менее, я считаю, что кривая обучения - это слишком много для меня: чтобы использовать авторефиксатор, мне нужно изучить PostCSS; и PostCSS обычно работает с Grunt или Gulp; чтобы использовать исполнителей задач, мне нужно знать кое-что о npm и node.js. Я знаю, что это все полезные инструменты, которые могут сэкономить много моего времени, с ними я могу сделать гораздо больше, чем просто автофиксирование. Позже я углублюсь в них, но под моим нынешним давлением мне действительно нужны ярлыки, такие как pleeease, чтобы запустить и запустить авторефиксатор без необходимости переваривать все документы и статьи о PostCSS. Я надеюсь, что смогу сделать что-то вроде

[postcss|autoprefixer|something else] watch

под моим scss папка и каждый раз, когда я делаю изменения и сохранить input.scss, output.scss файл будет создан.

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

1) Уточнить, какова связь между PostCSS а также PostCSS-cli? Последний зависит от первого или включает?

2) И делает ли установка последнего просто возможность использования postcss команда в интерфейсе командной строки?

3) я сделал npm install -g postcss-cli но я все еще не могу использовать postcss команда, что я сделал не так?

4) Чтобы следить за изменениями файлов и автоматически компилировать, нужно ли мне использовать бегунки задач, такие как Grunt или Gulp вместе с PostCSS?

5) В чем разница между npm install postcss а также npm install grunt-postcss?

Answer 1

"What I want to do is simply have a tool that can watch and auto prefix my css."

Да, вы можете сделать это легко с gulp, который вы можете запустить и запустить в считанные минуты. Есть много "начинающих" прохождений онлайн. Вам не нужно ничего знать о PostCSS, чтобы использовать автоматический префикс. Эта задача, приведенная ниже, скомпилирует все ваши sass, запустит autoprefixer и выведет соответствующий CSS-файл каждый раз, когда вы сохраняете файл.scss:

gulpfile.js

    var gulp = require('gulp'),
        $ = require('gulp-load-plugins')();


    gulp.task('watch', () => {
        gulp.watch('src/**/*.scss', ['sass']);
    });

    gulp.task('sass', () => {
        return gulp.src('src/**/*.scss')
            .pipe($.sass())
            .pipe($.autoprefixer())
            .pipe(gulp.dest('dest'));
    });

Answer 2

1) Чтобы выяснить, какова связь между PostCSS и PostCSS-cli? Последний зависит от первого или включает?

Ответ на вопрос 5 частично отвечает на этот вопрос, для чего используется postcss. Другой предназначен для запуска из командной строки. PostCSS-cli - это двоичный файл, другой - пакет NPM, написанный на Javascript.

2) А установка последнего просто позволяет использовать команду postcss в интерфейсе командной строки?

Да.

3) Я установил npm -g postcss-cli, но все еще не могу использовать команду postcss, что я сделал не так?

Лучше установить локально так:

npm i postcss-cli --save-dev

Тогда вы можете использовать так:

node_modules/postcss-cli/bin/postcss -c config.json

Или добавьте скрипт в package.json вот так:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "node_modules/postcss-cli/bin/postcss -c config.json",
    "watch": "node_modules/postcss-cli/bin/postcss -c config.json -w",
    "minify": "node_modules/postcss-cli/bin/postcss -c config-minify.json"
},

Примечание. Относительные пути в разделе сценариев не требуются. Я вставил их, чтобы показать местное использование postcss-cli, Вы можете просто использовать:

...
"build": "postcss -c config.json"
...

Затем вы можете запустить:

npm run build

4) Чтобы следить за изменениями файлов и автоматически компилировать, нужно ли мне использовать бегунки задач, такие как Grunt или Gulp вместе с PostCSS?

Нету. PostCSS-cli может сделать это:

node_modules/postcss-cli/bin/postcss -c config.json -w

Или добавить в качестве сценария package.json как видно из моего примера выше. Тогда вы просто запускаете:

npm run watch

5) В чем разница между npm install postcss и npm install grunt-postcss?

Последний используется для глотка, первый используется для построения grunt-postcss, postcss-brunch и т.п.

Использовать авторефиксер с postcss-cli в командной строке вы делаете:

postcss --use autoprefixer --autoprefixer.browsers "> 5%" -o output.css input.css

Это перечислено в документах и довольно легко следовать.