如何从缩小的CSS文件创建源映射回原始.less文件？

Question

我正在和Gulp.js一起工作，在我做一个缩小步骤之后，我很难尝试让gulp-sourcemaps一直指向原来较少的文件。

由于gulp-minify-css不支持源图，我使用的是postcss和csswring。

理想情况下，我最终会：

• ss.css（未经宣传）
• ss.css.map（从ss.css指向原始.less文件）
• ss.min.css（缩小）
• ss.min.css.map（从ss.min.css指向原始.less文件）

现在，我已经停止尝试输出缩小和非缩小版本，但即使让缩小版本指向原始的.less文件似乎也不起作用。

如果不进行缩小步骤，我的.map文件效果很好，看起来像这样：

{"version":3,"sources":["ss.less"],"names":[],"mappings":";AAEA;...

当我进行缩小步骤时，它会更改地图以将缩小的文件指回编译的CSS，而不是原始的Less文件：

{"version":3,"sources":["ss-min.css"],"names":[],"mappings":";AAEA;...

这是我的gulpfile.js：

var csswring = require('csswring'),
    gulp = require('gulp'),
    less = require('gulp-less'),
    path = require('path'),
    postcss = require('gulp-postcss'),
    rename = require('gulp-rename'),
    sourcemaps = require('gulp-sourcemaps');

var sourceLess = path.join(__dirname, 'app', 'assets', 'less');
var targetCss = path.join(__dirname, 'app', 'assets', 'css');

// Compile Less to CSS and then Minify, Include Sourcemaps
gulp.task('less-and-minify-css', function () {
    return gulp.src(lessFiles)
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(rename({suffix: "-min"}))
        .pipe(postcss([csswring]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(targetCss));
});

一如既往，任何想法都赞赏！

我已尝试使用过滤器仅重命名生成的.css文件，而不是其他任何东西，但这似乎并不能解决核心问题。

Answer 1

经过更多的摆弄，我能够让它与缩小工作，虽然我仍然无法在一个任务中保存缩小和非缩小版本。

需要使用函数进行重命名，因为只需添加后缀，最后将地图命名为'file.css.min.map'而不是'file.min.css.map'，这是将它们带到配对。

我添加了gulpif来节省通过csswring命令运行.less文件的时间。

gulp.task('less-css-and-minify', function () {
    return gulp.src(lessFiles)
       .pipe(sourcemaps.init())
       .pipe(less())
       .pipe(gulpif('**/*.css', postcss([csswring])))
       .pipe(rename(function (path) {
          if (path.extname === '.map') {
             path.basename = path.basename.replace('.css', '.min.css');
          }
          if (path.extname === '.css') {
             path.basename += '.min';
          }
       }))
       .pipe(sourcemaps.write('.'))
       .pipe(gulp.dest(targetCss));
});