问题标签 [autoprefixer]

我正在学习网页设计。我找到了一个名为Autoprefixer的工具。 https://github.com/postcss/autoprefixer 我使用 Notepad++ 作为我的 html 和 css 编辑器。但是我找不到将Autoprefixer与 Notepad++ 一起使用的方法。Notepad++ 有插件吗？或者给我一个建议，我如何在我的网页中实现它。有没有Autoprefixer的 jQuery 插件？我知道如何使用 jQuery 插件。只是在我的html文件中添加一个脚本标签。或者请给我其他我容易理解的建议。提前谢谢。

我正在使用 autoprefixer 并认为 firefox 中的关键帧不必加前缀。（使用最新的FF38）

我原来的 CSS

由 autoprefixer 生成的 CSS

-moz那么如果使用了http://codepen.io/ArtemGordinsky/pen/GnLBq，为什么光标在动画时不动画

浪费了 3 天以上的故障排除；已经无处可去。在这一点上感谢任何帮助。这是我的代码：

我在指定的源目录中放置了一个 .css 文件，并添加了需要前缀的属性/值，例如：transform、column-count 和显示属性的“flex”值。

运行时，gulp 没有错误，没有文件被修改，几乎没有任何反应。我尝试指定输出文件的路径，从 prefixer() 调用中删除选项，将值硬编码到 .src() 和 .dest() 方法中，在单个文件中运行整个命令，在序列运行器，重新安装模块，更新包等等。

我已经从里到外阅读了文档，正在关注它们到“T”，甚至联系了模块作者查看我的代码，他说这对他来说看起来不错。我根本看不到我做错了什么。

我刚刚为 SASS 设置了以下 Gulp 任务，使用 gulp-autoprefixer 导致处理字体真棒图标“内容”时出现问题。

它的工作方式（没有 gulp-autoprefixer）

这工作正常，它输出我期望的结果。

用户图标的示例（没有 gulp-autoprefixer）：

它的破坏方式（使用 gulp-autoprefixer）

如果我现在将 autoprefixer 添加到此任务中-例如：

现在输出中断。这是我为 fa-user (使用 gulp-autoprefixer)得到的：

字符集（UTF-8 / UTF-16）似乎有问题。

是否有可能使用 gulp-autoprefixer 避免这种行为？

实在修不了。我多次删除了 node_modules 文件夹。还尝试替换： grunt.loadNpmTasks('/var/www/XXX/public/node_modules/autoprefixer-core');

=> 而不是 =>

grunt.loadNpmTasks('autoprefixer-core');

但没有任何帮助。但是，我的代码正在运行的美妙时刻：

我的意思是autoprefix-core正在工作

但不知何故给出错误。=(

请帮忙！

根据官方文档，这很简单：

用法：

但是，我很困惑我究竟做了什么来建立css要使用的对象process()。我尝试使用的结果，fs.readfile()但它似乎没有工作。我的服务器模块相当大，在这里省略代码可能会更好。我真的只需要知道如何创建css流程功能。

我是网页设计的新手，你可以想象，尝试成为一个拥有 SaSS、NPM 和 Grunt 等东西的全栈开发人员是一个巨大的学习曲线。我有一个样板的 WordPress 主题，它结合了一个带有 sass、一个 minifier、BrowserSync 和所有有趣的东西的 grunt 工作流。但它在工作流程中没有自动前缀，我想添加它，因为我想开始测试 FlexBox 设计，这需要大量前缀才能正常工作。我在网上搜索了如何简单地添加Auto Prefixer到gruntfile所有答案都非常模糊，如“只需将此代码添加到grunt.js文件中”之类的说明......好吧，文件中的确切位置？这应该是一个“后处理”，而grunt.js似乎是按照完成任务的顺序编写的。我也不熟悉任何语法，所以只是说“包含它”并没有帮助，我总是担心我没有正确地将它放在某个括号之后或分号之前。我只是希望有人明确告诉我我需要将代码放在grunt.js文件中的哪个位置。

作为奖励，我想将此添加到我的package.json文件中，以便将来当我开始一个新项目并运行我的初始“安装 npm”命令时，它将下载auto prefixer并准备好出门。

所以tldr; 如何下载自动前缀？（它是文件夹中的一组文件吗？文件文件夹应该在我的项目中的哪个位置，以防我最初通过命令行将它安装在错误的位置）我需要在哪里添加自动前缀代码我的Grunt.js档案？最后，当我第一次键入“install npm”时，我需要在我的文件中放入什么以及在哪里package.json确保 autoprefixer 包含在我未来的项目中？

我将包括我当前的Grunt.js文件和package.json文件，这样你们中的一个人就可以简单地为我复制/粘贴必要的代码。这将有助于我将来了解如何将新流程添加到我的工作流程中。

这是我的Grunt.js文件：

这是我的package.json文件：

我正在使用postcss并且autoprefixer-core无法使其正常工作。

css 正在输出到正确的文件，但 autoprefixer 没有任何效果。我已经使用 NPM 安装了 postcss 和 autoprefixer。它们在我的 gruntfile.js 文件中。Grunt 没有输出任何错误，所以很难调试。

这是我的代码：

我的代码与github上的演示的唯一区别是require('autoprefixer-core')({browsers: 'last 2 version'}). 演示包括.postcss最后。如果我这样做，我会收到一个错误：Fatal error: undefined is not a function.

我在这里想念什么？

所以，Autoprefixer 一直在让我使用更新后的 postcss 版本，所以我正在尝试更新我的 Gulp 文件。

问题是所有的例子都没有把 Sass 作为第一步；我使用 gulp-ruby-sass。

如果我在我的 sass 目录上运行我的 sass 任务（我需要在其中处理 2 个 scss 文件），这将有效并在 dest 目录中输出 2 个 css 文件：

但我的问题是如何集成下一部分，通过 autoprefixer 传递 CSS 并生成源映射？如果我按顺序运行下一个，这会导致对象不是函数错误：

我试图将它们作为一个序列运行，但宁愿整合它们：

我只是无法将让 ruby​​-sass、autoprefixer 和 sourcemaps 一起工作的管道放在一起。

更新：

好的，即使我决定将任务分开（如下面的@patrick-kostjens 建议），当我运行 Autoprefixer 任务时，我会收到此错误：

我按照建议尝试了 autoprefixer = autoprefixer-core 。

我对 grunt（和一般的 npm）很陌生，所以如果我错过了一些明显的东西，请原谅我！

我正在尝试设置我的 gruntfile（在我开始这个特殊的挑战之前一直工作得很好）来使用 autoprefixer 插件，我按照这个博客http://grunt-tasks.com/autoprefixer/上的说明进行操作，但我当我尝试初始化 grunt 时收到此错误：

这是我的 gruntfile ：

我错过了什么吗？（这是公然愚蠢的东西，比如放错地方的逗号不是吗！！）提前谢谢