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

【问题标题】：How do I create a sourcemap back to the original .less files from a minified CSS file?如何从缩小的 CSS 文件创建返回原始 .less 文件的源映射？
【发布时间】：2014-12-01 15:23:11
【问题描述】：

我正在使用 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 文件，而没有其他任何内容，但这似乎无法解决核心问题。

【问题讨论】：

标签： javascript css gulp source-maps gulp-less

【解决方案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));
});

【讨论】：