将供应商 CSS 与 LESS 结合后以及 gulp-minify 后 Sourcemap 错误

Posted 2023-02-23

【中文标题】将供应商 CSS 与 LESS 结合后以及 gulp-minify 后 Sourcemap 错误

【英文标题】：Sourcemap wrong after combining vendor CSS with LESS and after gulp-minify

【发布时间】：2014-10-08 03:37:41

【问题描述】：

我正在尝试执行以下操作：

合并所有 CSS 文件（jQuery 插件） 组合媒体查询 缩小 CSS 编写源图

之后我尝试在不同的文件夹中执行其他操作

翻译 LESS 组合媒体查询 缩小生成的 CSS 编写源图 自动前缀的东西

看起来像这样：

gulp.task('styles', function() 
  var streamCSS = gulp.src(sources.css)
    .pipe(sourcemaps.init())
    .pipe(concat('vendor.css'))
    .pipe(cmq())
    .pipe(minify( keepSpecialComments: '*' ))
    .pipe(sourcemaps.write());

  var streamLESS = gulp.src(sources.less)
    .pipe(plumber( errorHandler: errorHandler ))
    .pipe(sourcemaps.init())
    .pipe(less())
    .on('error', swallowError)
    .pipe(cmq())
    .pipe(minify( keepSpecialComments: '*' ))
    .pipe(sourcemaps.write())
    .pipe(prefix("last 2 versions", "> 1%", "ios >= 6",  map: true ))
    .on('error', swallowError);

  return es.merge(streamCSS, streamLESS)
    .pipe(plumber( errorHandler: errorHandler ))
    .pipe(concat('main.css'))
    .pipe(gulp.dest(destinations.css))
    .pipe(connect.reload());
);

我唯一的问题是生成的源映射是错误的，并且总是引用错误的 LESS 文件。

我使用以下库来实现这一点：

gulp-concat 一饮而尽 gulp-autoprefixer gulp-combine-media-queries gulp-sourcemaps gulp-minify-css

我知道如果我省略了供应商的东西，它会起作用，但我希望只有一个结果样式表。

感谢您的每一个建议！

【参考方案1】：

你能在调用 sourcemap 初始化函数之前尝试合并流吗？

我还没有机会测试以下代码（省略了许多要求），但您可以有一个想法：

var filter = require('gulp-filter');

var lessFilter = filter('**/*.less');

gulp.task('styles', function() 
    return gulp.src([sources.css, sources.less])
        .pipe(sourcemaps.init())
        .pipe(lessFilter)
        .pipe(less())
        .pipe(filter.restore())
        .pipe(minify( keepSpecialComments: '*' ))
        .pipe(concat('main.css'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(destinations.css))
);