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

Question

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

cssgulpgulp-sourcemapsclean-css

8

我正在寻找一组Gulp插件链，它提供：

源映射支持
less
压缩
合并
URL替换（重定位/连接）以解决重定位/合并问题

目前我已经有了前四个，但我找不到一组现有的插件组合，可以给我最后一个（URL重定位）。我没有找到任何输出sourcemap的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)"

非常抱歉，我继续使用“巫毒”（指之前的技术方案）了，但这是我的有效gulp管道：

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

正确的输出：

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

- shannon

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Romain Braun · Accepted Answer

我个人使用 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规则并重新定位相对URL