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-postcsspostcss-brunch

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

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

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

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