4

私は Gulp.js を使用していますが、縮小手順を実行した後、gulp-sourcemaps が元の少ないファイルを指すようにしようとして困惑しています。

gulp-minify-css はソースマップをサポートしていないため、postcss と csswring を使用しています。

理想的には、次のようになりたいと思います。

  • ss.css (未縮小)
  • ss.css.map (ss.css から元の .less ファイルを指す)
  • ss.min.css (縮小)
  • ss.min.css.map (ss.min.css から元の .less ファイルを指す)

今のところ、縮小版と非縮小版の両方を出力しようとするのをやめましたが、縮小版を元の .less ファイルに戻すことさえできないようです。

縮小ステップを実行しなくても、私の .map ファイルはうまく機能し、次のようになります。

{"version":3,"sources":["ss.less"],"names":[],"mappings":";AAEA;...

縮小ステップを実行すると、縮小されたファイルが元の Less ファイルではなく、コンパイルされた CSS を指すようにマップが変更されます。

{"version":3,"sources":["ss-min.css"],"names":[],"mappings":";AAEA;...

ここに私のgulpfile.jsがあります:

var csswring = require('csswring'),
    gulp = require('gulp'),
    less = require('gulp-less'),
    path = require('path'),
    postcss = require('gulp-postcss'),
    rename = require('gulp-rename'),
    sourcemaps = require('gulp-sourcemaps');

var sourceLess = path.join(__dirname, 'app', 'assets', 'less');
var targetCss = path.join(__dirname, 'app', 'assets', 'css');

// Compile Less to CSS and then Minify, Include Sourcemaps
gulp.task('less-and-minify-css', function () {
    return gulp.src(lessFiles)
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(rename({suffix: "-min"}))
        .pipe(postcss([csswring]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(targetCss));
});

いつものように、どんな考えでも大歓迎です!

フィルターを使用して、生成された .css ファイルの名前を変更するだけで実験しましたが、それはコアの問題を解決していないようです。

4

1 に答える 1