gulp-sourcemaps 在使用 gulp-less 和 gulp-minify-css 时不包括内容

Question

我有一个这样的Gulp taks：

var gulp = require('gulp');
var less = require('gulp-less');
var minifyCss = require('gulp-minify-css');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('less', function() {
    return gulp.src('./less/*.less')
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(minifyCss())
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./assets/css'));
});

将创建.css文件以及源映射文件。但是源映射没有内容（"sourcesContent"： [null，null,...,null]），这种情况应该是这种情况，因为源映射插件默认表示它将包含内容（我也尝试显式将包含内容设置为 true）。

当我删除 minify 步骤时，它运行良好，我可以看到原始较少文件的内容，所以我检查了 minify-css 是否支持源映射，并根据插件列表它应该。

我做错了什么吗？在生成源映射时，less和minify-css之间是否存在任何已知的不兼容性？

Answer 1

Sourecemaps在minifyCSS和Subseentyl gulp-minify-css中非常年轻，并且似乎在某种程度上仍然有缺陷。我没有在错误跟踪器中找到这种特殊情况，但在使用 Sass 时偶然发现了类似的问题。

我找到了使用基于 PostCSS 的类似插件的解决方法。它不像另一个那么优雅，但仍然比在 LESS 中包含 CSSClean 插件要好;-）

var less = require('gulp-less');
var sourcemaps = require('gulp-sourcemaps');
var postcss = require('gulp-postcss');
var csswring = require('csswring');
gulp.task('less', function() {
    return gulp.src('./bower_components/bootstrap/less/bootstrap.less')
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(postcss([csswring]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./assets/css'));
});

或者，如果您的设置允许，您可以仅为生产模式调用 minifyCSS，仅为 DEV 模式调用源映射。

我希望这有帮助！