Question

我想要做的只是拥有一个可以监视并自动为我的CSS添加前缀的工具。以前我使用的是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和/或让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."

是的，您可以使用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中，非常容易理解。

使用自动修复器的最简单方法是？

2 个答案: