0

私は次のような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 ファイルとソース マップ ファイルが作成されます。ただし、ソース マップにはコンテンツ ("sourcesContent": [null,null,...,null]) がありません。これは、sourcemaps プラグインがデフォルトでコンテンツを含めると言う場合に当てはまります (私も明示的に試しましたincludeContent を true に設定します)。

minify ステップを削除すると、うまく機能し、元の less ファイルの内容を確認できるので、minify-css がソースマップをサポートしているかどうかを確認し、プラグイン リストに従ってサポートする必要があります。

私は何か間違ったことをしていますか？ソースマップを生成するときに、less と minify-css の間に既知の非互換性はありますか?

4

1 に答える 1

0

ソースマップは minifyCSS ではかなり新しく、その後gulp-minify-cssもまだある程度バグがあるようです。バグトラッカーでこの特定のケースは見つかりませんでしたが、Sass を使用しているときに同様の問題に出くわしました。

PostCSS に基づく同様のプラグインを使用して回避策を見つけました。他のものほどエレガントではありませんが、CSSClean プラグインを LESS に含めるよりはましです ;-)

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 を本番モードでのみ呼び出し、Sourcemaps を DEV モードでのみ呼び出すこともできます。

これが役立つことを願っています！

于 2015-04-28T19:08:39.793 に答える