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]），这应该是这样的，因为源映射插件默认情况下会包含内容（我也明确尝试过）将includeContent设置为true）。

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

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

Answer 1

在minifyCSS和后续gulp-minify-css中，Sourecemaps相当年轻，并且在某种程度上似乎仍然存在问题。我还没有在bug跟踪器中找到这个特例，但在使用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-less和gulp-minify-css时，gulp-sourcemaps不包括内容

1 个答案: