1

我想要做的只是拥有一个可以监视和自动为我的 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 和/或让 autoprefixer 工作尽可能简单：

PostCSS1）为了澄清，和之间的关系是什么PostCSS-cli？后者是依赖于还是包括前者？

2）安装后者是否仅启用postcss在命令行界面中使用命令的能力？

3）我做了npm install -g postcss-cli，但我仍然不能使用postcss命令，我做错了什么？

4) 要查看文件更改并自动编译，我是否需要使用 Grunt 或 Gulp 等任务运行器以及 PostCSS？

npm install postcss5)和有什么区别npm install grunt-postcss？

4

2 回答 2

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'));
    });
于 2016-07-17T05:36:00.800 回答
0

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，前者用于 buildgrunt-postcss等postcss-brunch。

postcss-cli要在命令行上使用 autoprefixer，请执行以下操作：

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

这在文档中列出并且很容易理解。

于 2016-08-04T00:29:55.213 回答