使用自动前缀的最简单方法？

Question

我想要做的只是拥有一个可以监视和自动为我的 css 添加前缀的工具。之前我用的是pleeease.io，对我这种初学者来说很简单，通过npm安装后，我要做的就是创建一个选项文件（.pleeeaserc），然后做

pleeease watch

之后，我可以专注于我的 css，每次我对我的 css 文件进行更改时，它都会被处理并输出。

不幸的是，当我这样做时，作者似乎已停止维护它

npm install pleeease

在我的新服务器上出现很多错误，安装失败。

我想是时候学习如何直接使用 autoprefixer 了，我相信 pleeease 将其集成为它的依赖项之一。

但是，我发现学习曲线对我来说有点太多了：要使用 autoprefixer，我需要学习 PostCSS； PostCSS 通常与 Grunt 或 Gulp 一起运行；要使用任务运行器，我需要了解一些关于 npm 和 node.js 的知识。我知道这些都是有用的工具，可以节省我很多时间，有了它们，我可以做的不仅仅是自动前缀。稍后我会深入研究它们，但在我目前的压力下，我真的需要一些捷径，比如 pleeease 来启动和运行 autoprefixer，而不必消化所有关于 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 的知识就可以使用 autoprefixer。下面的这个任务将编译你所有的 sass，运行 autoprefixer 并在你保存 .scss 文件时输出相应的 CSS 文件：

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 是一个二进制文件，另一个是用 Javascript 编写的 NPM 包。

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等

要在命令行上使用带有postcss-cli 的自动前缀：

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

这在the docs 中列出，很容易理解。