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 回答