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

Question

我正在使用 Gulp.js，在执行缩小步骤后，我很难尝试让 gulp-sourcemaps 一直指向原始的 less 文件。

由于 gulp-minify-css 不支持 sourcemaps，我使用的是 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

经过更多调整后，我能够让它与缩小一起使用，尽管我仍然无法在单个任务中保存缩小和非缩小版本。

需要使用函数进行重命名，因为仅添加后缀最终会将 map 命名为“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));
});