与Gulp相连/将CSS文件重新定位

Question

我正在寻找一个与Gulp一起使用的插件链：

• 源地图支持
• 少
• 缩小
• 串联
• URL替换（rebase）以解决重定位/concat

我目前有前四个，但是我找不到现有插件的组合，这些插件也将为我带来最后的（URL重新打击）。我还没有找到任何发出Sourcemaps的URL重新打击插件。

要清楚，我的问题是，当我从项目开发文件夹中编译多个小型CSS文件并将其输出到一个公共文件夹中时，串联破坏相对URL所产生的移动，例如背景图像。<<<。/p>

编辑：

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

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

• Clean-CSS＃152：重新打击功能非常令人沮丧
• Clean-CSS＃195：Windows上的root选项
• Clean-CSS＃263：如何获得Relativeto选项与不同路径中的CSS文件一起工作
• http://adilapapaya.com/docs/clean-css/#howtorebaserelativeimageurls
• grunt cssmin重新添加相对uri？

不幸的是，没有任何答案实际上解释了语法，他们只是演示了伏都教。所以我不知道为什么以下内容不起作用。如果我能得到解决问题，我会回到这里，并将其标记为表明此工具链的确确实有我需要的东西。

源文件：

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

湾任务：

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)"

Answer 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-so-use-us-s-clean-clean-clean-clean-clean-clean-clean-clean-clogrammatically-P>

值得注意的是：

• rebase-设置为false至跳过URL重新签名
• relativeTo-解决相对@Import规则和URL的路径
• restructuring-设置为false至"禁用高级重组"优化
• root-解决绝对@Import规则和反向相对的路径URL