私は 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 ファイルの名前を変更するだけで実験しましたが、それはコアの問題を解決していないようです。