这个周末我开始玩 gulp。我想设置一个可以

• 编译我的 sass 文件
  • 如果我在 sass 文件中出错，请继续工作
  • 使用 sass Bootstrap
• 生成源图
• 附加浏览器前缀
• 在浏览器重新加载的情况下注入已编译的 css
• 快速（开发环境中 1-2 秒）

我完成了大部分步骤，但浏览器前缀让我很难过这是我到目前为止所得到的

问题是自动前缀给了我一个错误并弄乱了源映射

我得到的错误：“gulp-sourcemap-write：找不到源文件：C:\WEB\skilldrill_v1\skilldrill\sass\app.css”

所以出于某种原因，它试图在 sass 目录中找到 css 文件

[编辑]
我设法找到了问题，但还没有解决。这个东西工作的管道：gulp-autoprefixer -> 做一些事情 -> 前缀任务 -> 乙烯基-sourcemaps-apply

gulp-autoprefixer\index.js第35行：applySourceMap(file, res.map.toString()); 从这一点开始，vinyl-sourmaps-apply 了解当前文件（在我的例子中为 app.css）也成为了一个源。

以下是问题：a) 它认为 css 文件与 gulp.src() 中指定的文件夹位于同一文件夹中，这通常不是真的 b) 它不仅适用于 autoprefixer 添加的行，而是添加了引用到每一行

您对这些信息有什么想法吗？我开始挖掘 gulp-concat 可以正确处理类似问题。

我在我的项目中使用带有这些依赖项的 Grunt 0.4.5：

我刚刚注意到grunt-autoprefixer没有被添加到我的 package.json 文件中。那是因为它没有 grunt-contrib 前缀吗？无论如何，当我从监视任务中删除 autoprefixer 时，Source Maps 对我有用，但是一旦我再次添加它，编译的 css 文件末尾的注释就会被删除。

这是我的自动前缀配置：

我的 Sass 配置如下所示：

这是我的监视任务：

老实说，我完全不明白为什么 autoprefixer 必须干扰源映射，我尝试使用false而不是 true，按照 grunt-autoprefixer repo 中的示例手动指定源映射，但无论我做什么评论 -/*# sourceMappingURL=style.css.map */得到从文件中剥离，源映射在 chrome 中不起作用。

编辑：对不起，我刚刚通过使用它来工作：

我很想知道，出于性能原因，我现在是否需要费心在grunt-contrib-sass配置中指定 sourcemap 选项？编译大约需要 2.4 秒，所以每 0.1 秒都很重要！

好的，所以我可以理解我已将我的自动前缀设置为监视我的目录中的所有 CSS 文件，我的问题很可能来自这些文件。我只是很难弄清楚如何解决它。

这就是我的手表功能的样子，

这就是我的 autoprefixer 的样子，

当我在命令提示符下键入时，哪个有效，grunt autoprefixer或者grunt watch

当我键入时出现问题grunt watch。当我保存.scss文件时，它会编译为.css然后开始自动添加前缀，但自动前缀会循环并自动添加所有 css 前缀。这让制作对我来说真的很耗时。

有什么东西可以只允许更改为 autoprefix 的 css 文件，而 grunt 仍然能够观看所有其他.css文件？

使用本指南，我仍然无法使用带有指南针的 gem 安装自动前缀：

https://github.com/postcss/autoprefixer#compass

当我输入“gem install autoprefixer-rails”时，我在哪个目录有关系吗？我应该在我称之为“指南针手表”的目录中吗？

我将该函数添加到 config.rb 但 compass 仍未使用 autoprefixer 进行编译。

styles我的gulpfile 中有一个任务：

在控制台中生成：

如果我注释掉自动前缀器的管道，没有错误，一切都会编译。这是怎么回事？

请注意，我似乎也无法禁用源映射的写入。我尝试了 grunt-ruby-sass 的 repo 页面中的所有其他设置，但没有任何工作。

我可以在没有自动前缀的情况下生活，但很想让它工作......

我已经在我的 Mac OSX 上的包控制中安装了 Sublime Text 3 和 Autoprefix CSS 当我尝试在 CSS3 语法文件上运行 Autoprefix CSS 时，它根本什么都不做。

正如其他帖子中所建议的，我已将用户设置更改为：

但仍然什么都不做。

有什么建议么？

我有一个使用自定义 LESS 样式表的站点，它们包括 Bootstrap LESS 样式表。它全部编译成style.css带有源映射的最终文件style.css.map。

这就是我的 Gulpfile 的样子：

现在我想添加autoprefixer。这是我尝试过的，但它不起作用：

这是因为我正在将生成的源映射输入postcss其中，它无法处理它。所以我试过这个：

但是，仍然没有添加前缀。也许是因为 Bootstrap 的 CSS 已经加了前缀，这在某种程度上是个问题postcss？

如何使这项工作？

我在尝试sourcemaps为我的 CSS 文件生成时遇到问题。

我当前的堆栈是：

• 吞咽
• 手写笔
• 自动前缀

有两个编译步骤：

1. Gulp 预编译为 CSS；
2. Autoprefixer 后编译 CSS 以添加浏览器供应商前缀；

我无法sourcemaps在第一次编译时生成，因为第二次编译会在 CSS 中添加新行，而我对如何让它们相互“交谈”感到很迷茫。

这是我到目前为止得到的。

（已经找到以下所有设置信息真是一团糟：-/）

我可以让 autoprefixer 与 docpad 一起运行，但我（我猜我）没有成功设置browsers值......

我的环境：

• 文档板 6.69.1
• IE 11、FF 31.0 + 萤火虫

到目前为止我尝试过的（使用插件安装 docpad ：jade，less，livereload，marked）：

简单安装工作（默认browsers设置）：

1. docpad install autoprefix

我得到了一些style.css.less文件，其中包含一些导入，尤其是一些background: radial-gradient(...) ; background: linear-gradient(...)规则。

2. 我将我的重命名style.css.less为style.css.autoprefix.css.less（style.css.autoprefix.less没用）

直到这里，它只在警告less->css或css->autoprefix转换没有做任何应该没问题的事情的情况下工作。

autoprefixer 在上面添加了一些-webkit...我的...gradient...规则版本。

browsers没有 docpad 手写笔插件就无法设置？

......在我看来......所以我继续这样：

3. docpad install stylus

4. 将 autoprefixer stylus 设置添加到我的docpad.coffee设置文件中：

   /li>

效果是，现在 mystyle.css显然又是自动前缀了，但是在上面的选项之间切换没有效果。

如何browsers从这里进行设置？

我从不同来源收集到的所有设置信息，所以我可能错过了一些东西。也许已经可以在没有手写笔插件的情况下配置browsers设置？

这里或多或少帮助我达到这一点的来源：

• https://www.npmjs.com/package/docpad-plugin-autoprefix
• https://www.npmjs.com/package/autoprefixer
• https://www.npmjs.com/package/docpad-plugin-stylus
• https://www.npmjs.com/package/autoprefixer-stylus
• http://blog.sapegin.me/all/css-workflow
• https://github.com/kizu/docpad-test/blob/master/docpad.coffee

我的主要测试用例

在我的 css 中手动添加附加-moz-radial-gradient.../规则会显示正确的渐变。-moz-linear-gradient...删除它们不会显示任何渐变（甚至不显示标准语法并且独立于使用自动前缀...这可能是一个无关/遗留问题，因为我希望更复杂的style.css可以更改上述browsers选项至少逐渐改变。）

当我启动 Rails 服务器以及资产预编译时，我得到了这个异常

宝石文件

此错误的原因可能是什么？