0

我有一个像这样的 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 是否支持 sourcemaps 并根据插件列表它应该。

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

4

1 回答 1

0

在 minifyCSS 和后续系统中，Sourecemaps 还很年轻，而且在某种程度上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。

我希望这有帮助！

于 2015-04-28T19:08:39.793 回答