The easiest way to use autoprefixer?

Question

What I want to do is simply have a tool that can watch and auto prefix my css. Previously I was using pleeease.io, it is very straightforward for beginners like me, after install it through npm, what I need to do is to create an option file(.pleeeaserc), then do

pleeease watch

Afterwards, I can focus on my css, every time I make change to my css file, it gets processed and output.

Unfortunately it seems the author has stopped maintaining it, when I do

npm install pleeease

on my new server I got lots of errors and the installation failed.

I guess it is time for me to learn how to directly use autoprefixer, which I believe pleeease integrates as one of its dependencies.

However, I find the learning curve is a little too much for me: To use autoprefixer, I need to learn PostCSS; and PostCSS usually runs with Grunt or Gulp; to use task runners, I need to know something about npm and node.js. I know these are all useful tools which can save lots of my time, with them I can do much more than just autoprefixing. I will make deep dive into them later but under my current pressure I really need some shortcut like pleeease to get autoprefixer up and running, without having to digest all the documents and articles about PostCSS. I hope I can do something like

[postcss|autoprefixer|something else] watch

under my scss folder and every time I make change to and save input.scss, a output.scss file will be generated.

So I have some questions, in part of my effort on learning PostCSS and/or getting autoprefixer work as easy as possible:

1) To clarify, what is the relationship between PostCSS and PostCSS-cli? Does the latter depend on or include the former?

2) And does installing the latter merely enable the ability to use postcss command in command-line interface?

3) I did npm install -g postcss-cli but I still can't use postcss command, what did I do wrong?

4) To watch file change and automatically compile, do I need to use task runners like Grunt or Gulp along with PostCSS?

5) What is the difference between npm install postcss and npm install grunt-postcss?

Answer 1

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

Yes you can do this easily with gulp, which you can get up and running in minutes. There are plenty of "getting started" walkthroughs online. You don't really need to know anything about PostCSS to use autoprefixer. This task below will compile all your sass, run autoprefixer and output a corresponding CSS file anytime you save a .scss file:

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) To clarify, what is the relationship between PostCSS and PostCSS-cli? Does the latter depend on or include the former?

The answer to question 5 partly answer this question to what postcss is used for. The other is intended to be ran from the command line. PostCSS-cli is a binary, the other is an NPM package written in Javascript.

2) And does installing the latter merely enable the ability to use postcss command in command-line interface?

Yes.

3) I did npm install -g postcss-cli but I still can't use postcss command, what did I do wrong?

It's better to install locally like so:

npm i postcss-cli --save-dev

Then you can use like so:

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

Or, add a script in package.json like so:

"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"
},

Note: Relative paths are not required in the scripts section. I put them in to show local usage of postcss-cli. You could simply use:

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

You can then run:

npm run build

4) To watch file change and automatically compile, do I need to use task runners like Grunt or Gulp along with PostCSS?

Nope. PostCSS-cli can do this:

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

Or, add as script to package.json as can be seen in my example above. Then you just run:

npm run watch

5) What is the difference between npm install postcss and npm install grunt-postcss?

The later is used for gulp, the former is used to build grunt-postcss, postcss-brunch etc.

To use autoprefixer with postcss-cli on the command line you do:

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

This is listed in the docs and is pretty easy to follow.