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

Я просто хочу иметь инструмент, который может смотреть и автоматически добавлять префиксы к моему CSS. Раньше я использовал pleeease.io, это очень просто для новичков, таких как я, после установки через npm, что мне нужно do - это создать файл параметров (.pleeeaserc), а затем выполнить

pleeease watch

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

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

npm install pleeease

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

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

Однако я считаю, что время обучения для меня слишком велико: чтобы использовать autoprefixer, мне нужно изучить 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?


postcss gulp autoprefixer gruntjs pleeease
person shenkwen    schedule 15.07.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

Да, вы можете легко сделать это с помощью gulp, который можно запустить за считанные минуты. В Интернете есть множество пошаговых руководств по началу работы. Вам действительно не нужно ничего знать о 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'));
    });
person Barryman9000    schedule 17.07.2016
comment
Да. Пользователю нужен самый простой инструмент, который будет следить за CSS и автоматически исправлять его. Я предоставил то, что я считаю самым простым инструментом, с образцом кода, который будет отслеживать и автоматически исправлять CSS. Вопросы 1-3, 5 в сообщении не имеют отношения к моему ответу, потому что в моем не используются postcss-cli или grunt. - person Barryman9000; 04.08.2016

arrow_upward
0
arrow_downward

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

Ответ на вопрос 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) Нужно ли мне использовать средства запуска задач, такие как 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?

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

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

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

Это указано в документации, и за ним довольно легко следовать.

person BugHunterUK    schedule 04.08.2016
comment
Так как же проще всего использовать автопрефиксатор? Вы не ответили на это. - person Barryman9000; 04.08.2016
comment
Здорово. А теперь как насчет того, чтобы вы удалили тот голос "против", который вы мне дали, потому что я ответил на главный вопрос ОП. - person Barryman9000; 05.08.2016