縮小された CSS ファイルのソースマップを Chrome で動作させることができないようです。ここに私のgulpfile.jsがあります:
var gulp = require('gulp'),
gp_concat = require('gulp-concat'),
gp_rename = require('gulp-rename'),
gp_cssmin = require('gulp-cssmin'),
gp_uglify = require('gulp-uglify'),
gp_sourcemaps = require('gulp-sourcemaps')
;
var src_dir = '../../assets/';
var paths = {
dir_src: path_dir_src,
files_css: [src_dir+'css/main.c.src.css'],
dir_dest: 'src_dir/',
dir_dest_css: src_dir+'css/'
};
gulp.task('build-css', function(){
return gulp.src(paths.files_css)
.pipe(gp_sourcemaps.init())
.pipe(gp_concat('main.c.raw.css'))
.pipe(gulp.dest(paths.dir_dest_css))
.pipe(gp_rename('main.c.css'))
.pipe(gulp.dest(paths.dir_dest_css))
.pipe(gp_rename({suffix: '.min'}))
.pipe(gp_cssmin({sourceMap: true}))
.pipe(gp_sourcemaps.write('./'))
.pipe(gulp.dest(paths.dir_dest_css))
;
});
これを実行すると、ソースマップが作成されます (元のソースを参照します{...,"sources":["main.c.src.css"],...
)。ただし、縮小された CSS ファイル (main.c.min.css) を参照する HTML ページを Chrome で開くと、元のソース ファイル (main.c.src.css) の行番号が表示されません。
どうすればこれを修正できますか?