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

Question

我有一个 Gulp 任务是这样的：

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 文件与源映射文件一起创建。然而，source map 没有内容（"sourcesContent": [null,null,...,null]），应该是这种情况，因为 sourcemaps 插件默认会包含内容（我也尝试将 includeContent 显式设置为 true）。

当我删除 minify 步骤时，它运行良好，我可以看到原始 less 文件的内容，所以我检查了 minify-css 是否支持 sourcemaps，根据 plugins list 它应该.

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

Answer 1

sourcemaps 在 minifyCSS 和 subsequentyl 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 模式调用 Sourcemaps。

希望对您有所帮助！

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

gulp-sourcemaps not including content when using gulp-less and gulp-minify-css

gulp

gulp-less

gulp-sourcemaps