使用 Gulp 连接/重定位 CSS 文件答案

【问题标题】：Concatenate/relocate CSS files with Gulp使用 Gulp 连接/重定位 CSS 文件
【发布时间】：2015-07-31 22:59:06
【问题描述】：

我正在寻找与 Gulp 一起使用的插件链，它提供：

源地图支持
少
缩小
串联
URL 替换（变基）以解决重定位/合并

我目前拥有前四个，但我找不到现有插件的组合也可以为我提供最后一个（URL 变基）。我没有找到任何发出源映射的 URL 变基插件。

需要明确的是，我的问题是，当我从项目开发文件夹中编译多个小 CSS 文件并将它们输出到一个公共文件夹中时，连接导致的移动会破坏相对 URL，例如背景图像的 URL。

编辑：

听起来我目前使用的工具链已经打算解决这个问题。所以，这表面上是答案。但是，这引发了另一个问题，即所需的语法应该如何工作。

这个问题理论上有很多重复的地方：

不幸的是，没有答案能真正解释语法，他们只是演示了伏都教；所以我不知道为什么以下不起作用。如果我能解决它，我会回到这里并标记它已接受，以表明此工具链确实可以满足我的需要。

源文件：

/assets
    /site
        styleInput1.less "url(../site/logo.png)"
        logo.png
        background.png
    /application
        styleInput2.less "url(../site/background.png)"

gulp 任务：

gulp.task(filename, function () {
    return gulp.src(files)
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(minifyCss({ relativeTo: './compiled' }))
        .pipe(concat(filename))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./compiled'));
});

输出，带有损坏的 URL。注意多个缺陷。尽管 CSS 相对于所需资产提升了一个目录级别，但已添加了一个额外的父目录 (!)。此外，其中一个 URL 的硬资产文件夹名称已更改 (!)。很奇怪：

/compiled
    styleOutput1.css "url(../../compiled/logo.png)"
    styleOutput2.css "url(../../site/background.png)"

我很抱歉继续使用巫术，但这是我的工作中的吸管：

.pipe(minifyCss({ relativeTo: './compiled', target: './compiled' }))

以及正确的输出：

/compiled
    styleOutput1.css "url(../assets/site/logo.png)"
    styleOutput2.css "url(../assets/site/background.png)"

【问题讨论】：

标签： css gulp gulp-sourcemaps clean-css

【解决方案1】：

我个人使用 gulp-minify-css 并指定 relativeTo 属性。

gulp.task('css', function() {
    gulp.src('./assets/css/main.css')
// Here I specify the relative path to my files
      .pipe(minifyCSS({keepSpecialComments: 0, relativeTo: './assets/css/', processImport: true}))
      .pipe(autoprefixer({
        browsers: ['last 2 versions'],
        cascade: false
      }))
      .pipe(gulp.dest('./assets/css/dist/'))
      .pipe(notify({
          "title": "Should I Go?",
          "subtitle": "Gulp Process",
          "message": '<%= file.relative %> was successfully minified!',
          "sound": "Pop",
          "onLast": true
      }));
  });

如果这对您不起作用，他们还有很多其他参数可以重新定位 URL：https://github.com/jakubpawlowicz/clean-css#how-to-use-clean-css-programmatically

值得注意的是：

rebase - 设置为 false 以跳过 URL 变基
relativeTo - 解析相对 @import 规则和 URL 的路径
restructuring - 设置为 false 以禁用高级重组优化
root - 解析绝对 @import 规则和 rebase relative 的路径网址

【讨论】：

太好了，我已经在使用gulp-minify-css了！我没有意识到它有这个功能，但我现在正在尝试。
这很有趣，我现在看到它的核心是clean-css，因此我一直在寻找基于该工具的插件。
呃，这些 gulp 路径关系配置命令都没有解释清楚。 relativeTo 没有达到我的预期，我也从文档中不明白它与 root 和 target 有何不同。
是的，但我不知道它为什么会起作用。我不得不使用 2 个参数。据我所知，在大多数情况下，应该为relativeTo、target 和root 参数指定输出文件夹。文档很清楚，target 用于相对 URL，root 用于绝对 URL，relativeTo 以某种方式与前者交互。但它没有解释如何。有关我的修复的信息，请参阅我的 OP 编辑。
感谢@RomainBraun 花了几个小时试图弄清楚我的 URL 发生了什么rebase: false 工作得很好。