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

Question

Что я хочу сделать, просто есть инструмент, который может смотреть и автоматически префикс моего css. Раньше я использовал pleeease.io, он очень прост для начинающих, как я, после того, как установить его через НПМ, что мне нужно сделать, это создать файл опций (.pleeeaserc), а затем сделать

pleeease watch 

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

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

npm install pleeease 

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

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

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

[postcss|autoprefixer|something else] watch 

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

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

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."

Да, вы можете сделать это легко с глотком, который вы можете получить и работает в течение нескольких минут. Есть много «начатых» пошаговых руководств в Интернете. Вам не нужно ничего знать о PostCSS, чтобы использовать autoprefixer. Эта задача ниже будет компилировать все ваши 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-кли? Влияет ли последнее на прежнее?

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

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

Да.

3) Я сделал npm install -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) Для того, чтобы следить за изменение файла и автоматически компилировать, нужно ли мне использовать бегуны задачи как Грунт или Глоток вместе с PostCSS ?

Nope. PostCSS-кли может это сделать:

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

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

npm run watch 

5) В чем разница между НПМ установить postcss и НПМ установить черновую-postcss?

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

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

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

Это перечислен в the docs и является довольно легко следовать.