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

Question

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

1. 合并所有 CSS 文件（jQuery 插件）
2. 合并媒体查询
3. 缩小 CSS
4. 编写 sourcemap

之后我尝试在不同的文件夹中做其他事情

1. 少翻译
2. 合并媒体查询
3. 缩小生成的 CSS
4. 编写 sourcemap
5. 自动前缀的东西

看起来像这样：

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-autoprefixer
• gulp-combine-media-queries
• gulp-sourcemaps
• gulp-minify-css

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

感谢您的每一个建议！

Answer 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))
});