Question

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

源地图支持
少
缩小
级联
用于解决重定位/连接的URL替换（rebase）

我目前拥有前四个，但是我找不到现有插件的组合，这些插件也会给我最后一个（URL rebasing）。我找不到任何发布源图的网址底层插件。

为了清楚起见，我的问题是，当我从项目开发文件夹中编译多个小CSS文件并将它们输出到公共文件夹时，连接产生的移动会破坏相对URL，例如背景图像的URL。 / p>

编辑：

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

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

不幸的是，没有答案实际解释语法，他们只是展示伏都教;所以我不知道以下为什么不起作用。如果我能够解决它，我会回到这里并标记这一点，以表明这个工具链确实做了我需要的工作。

源文件：

/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'));
});

输出，网址损坏。注意多个缺陷。虽然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
      }));
  });

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

值得注意的是：

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

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

1 个答案: