问题标签 [gulp-clean-css]

我使用 NPM 和 Gulp 作为我的包管理器和构建系统。我已经安装了“gulp-sass”来支持 sass，并安装了“gulp-clean-css”以便我可以@import css 文件内联。我在“_frontend/scss/**/*”中捕获我的 SCSS 文件，并将其编译为单个文件作为“assets/frontend/css/styles.css”。在输出位置，我还有其他重要的资源文件夹，它们是“css”的兄弟：“fonts”、“img”和“js”。

我的问题是当我导入“* .css”文件时，我无法正确获取指向目标的 url() 相对路径。但是，当我导入“.scss”文件时没问题。

这是我的代码（我拿出了源图、错误日志等来简化问题）：

GULPFILE.JS

主文件

以下是可以的

输出似乎带有正确的相对路径 示例输出： url(../fonts/FontAwesome/fontawesome-webfont.eot?v=4.6.1)

以下不是

示例输出： url(../node_modules/jquery-ui/themes/base/images/animated-overlay.gif) ^^ 以上以某种方式附加了“../node_modules”。 我希望它以某种方式将其设置为“../img/vendor/jquery-ui/what/ever/i/like/here”

这是我的目录结构。

如果有人能在这方面提供帮助，那就太好了。

如何在 gulp 中配置嵌套插件的选项？我有一个 gulp 任务，它使用 gulp-inline 内联任何 css 和 js。

gulp-inline 具有设置 css 处理器的选项

理想情况下，在运行任务时，我想为 css 和 js 声明配置选项

我对 scss 上的 @extend 有一个奇怪的问题。当我扩展一些具有重复属性的 %placeholder 时，gulp-clean-css 会合并它们，我不希望这种情况发生。

这是一个例子： foo.scss

foo.min.css

为什么会这样？

如果有帮助，这是我的 gulp 任务：

有没有其他更好的插件可以使用？我不希望它删除重复的属性。如果你问我为什么，那是因为旧浏览器支持而不是可能不支持remor calc，或其他“新奇属性”；）

谢谢 ：）

我对 gulp 真的很陌生，我正在努力制作一个看起来相当简单但我无法破解的构建过程。

我想要实现的是我所有的 js 和 css 文件被捆绑并被命名为all_*.min.js where *当前时间戳并删除旧all_*.min.js包。

我的另一个挑战是，当 bundle 的一个文件在没有监视的情况下被更改时，如何检测 bundle 的变化。简而言之，这就是我想要实现的目标。任何建议都会有很大帮助。

提前致谢。

我用 Gulp 创建了一个任务，它应该：

1. 加入多个 CSS 文件；
2. 缩小+删除不必要的CSS；
3. 修复url()指令和其他的路径；
4. 生成源图；

我目前的代码是：

url()路径示例，取自文件Resources/Include/ionicons/css/ionicons.css：

这是我当前的文件结构：

测试文件夹：https ://dl.dropboxusercontent.com/u/2333896/gulp-path-test.zip （安装然后运行gulp deploy-css）。

几乎一切都按预期工作，除非 CSS 文件包含使用该url()选项对图像或字体的引用。运行任务（并style.min.css创建）后，这些引用被破坏 - 原始 CSS 文件上的路径没有更改。

不cleanCSS应该检查引用文件的位置并自动修复路径吗？选项不是用来控制的吗target？relativeTo

我怎样才能解决这个问题？谢谢你。

目前我正在使用以下插件：

gulp-clean-css

这是我的布局：

然后在我的 CSS 中：

问题是当我运行优化的代码时，（缩小）第二个选择器没有被考虑在内。虽然它存在于样式表中

有任何想法吗？

将多个 css 文件压缩为一个的最佳方法是什么？

下面的 gulp 任务在缩小和连接后导致两个问题：

1. 我使用的引导字形图标已经消失。
2. 我的一些风格被打破了。该任务似乎重新安排了某些样式的位置，例如.footer{...}放置在下方html{...}但现在位于上方html{...}。我怎样才能阻止它重新排列它们？

吞咽文件：

有任何想法吗？

我的一个同事给了我一个名为 gulpfile.js 的文件，其中包含以下代码。它会在保存时监视并编译我的 scss 文件。

但是，我现在希望使用 npm 包“gulp-clean-css”（https://www.npmjs.com/package/gulp-clean-css）来缩小我的 css 输出。如何将其添加到上面现有的 gulpfile 中？

到目前为止，我已经 cd 进入我的 Wordpress 主题目录并运行npm install gulp-clean-css --save-dev- 所以我假设我只需要以某种方式对其进行编码？

需要更多信息吗？

此致，

奥利弗

我有一个 gulp 任务来构建为 dev 运行的所有内容（工作正常）。在发布 gulp 任务时，我们会执行相同的操作，但还会添加一个捆绑任务，该任务也会缩小 css。

我只想缩小 css 内联，这意味着文件的 src 和 dest 相同；但是，我在运行时收到以下错误。

错误：EACCES：权限被拒绝，打开

我认为我没有遇到任何竞争条件，因为我的构建任务在缩小开始之前显示为已完成

有问题的任务是：

如果我指定了一个备用目标路径，它工作正常，但我不想这样做。如何解决此访问问题？

所以，下面是我的整个 gulp 文件。我的样式/src 文件夹中有一个 style.css，我希望 gulp 在我的样式/dist 文件夹中输出一个 style.min.css 文件。gulp-clean-css 生成缩小文件，gulp-rename 添加 .min 后缀。

当我有一个空的 dist 文件夹并运行 gulp 时，它成功地在 dist 中创建了缩小的 css 文件，但随后对 style.css 的每次编辑（由观察者监视）都会导致 min 文件被擦除，并且此后永远不会正确填充。

为了进一步增加混乱，我将 Atom 用于我的 IDE，当我在 Atom 中进行编辑时，gulp 将清除 .min 文件以清除任何不是初始编辑（创建 .min 文件）的编辑，但是如果我在 CLI 上使用 nano 进行所有编辑，则 .min 文件每次都会正确填充。也许我应该找一个新的IDE？