Skip to content

Instantly share code, notes, and snippets.

@kyaido

kyaido/sourcemap.md

Last active August 29, 2015 14:23
Show Gist options
  • Save kyaido/0c5680b8a63920e60eb7 to your computer and use it in GitHub Desktop.
Save kyaido/0c5680b8a63920e60eb7 to your computer and use it in GitHub Desktop.
Download ZIP
sourcemap
Raw
sourcemap.md

sourcemap について調べた

sourcemapとは 仕様 gulp-sourcemapのオプションとかを理解する gulp-sourcemapを使う 多段souremapの問題、sass→autoprefixerもこれか？

試す

インラインなら多段もOKなのか？

参考

仕様 https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit

Source Map Revision 3 Proposal (Ver. November 18, 2013) 抄訳メモとリンク http://qiita.com/kozy4324/items/1a0f5c1269eafdebd3f8

JavaScriptのSource Mapの内部表現について http://safx-dev.blogspot.jp/2013/08/javascriptsource-map.html

JSオジサンで Source Map について話してきました http://imaya.blog.jp/archives/7169783.html

多段SourceMapの対応方法とライブラリ http://efcl.info/2014/09/03/multi-stage-sourcemap/

gulp-sourcemaps https://github.com/floridoo/gulp-sourcemaps

sourcemap を使いたい http://qiita.com/yokoh9/items/bc948a6ea7dd21f9c31d

Gulp, Sass, Autoprefixer, Sourcemaps! http://fettblog.eu/blog/2014/04/10/gulp-sass-autoprefixer-sourcemaps/

【gulp】gulp-pleeease 1.2.0 と gulp-sourcemaps を併用すると sourceMappingURL が二つ追加される件 http://2no.hatenablog.com/entry/2015/06/06/182732

issue sindresorhus/gulp-autoprefixer#1 dlmanning/gulp-sass#51 sindresorhus/gulp-autoprefixer#10 (comment) sindresorhus/gulp-autoprefixer#8

http://stackoverflow.com/questions/26203086/gulp-sass-autoprefix-sourcemap

https://github.com/ByScripts/gulp-sample/blob/master/gulpfile.js

dlmanning/gulp-sass#296

http://stackoverflow.com/questions/30805146/sourcemaps-content-same-as-compiled-output-on-windows

dlmanning/gulp-sass#106

mozilla/source-map#91 これや！

minifyしなけりゃこれでいける、minifyするとマッピングがずれる

gulp.task('sass', function() {
  var filter = gulpFilter(['*.css', '!*.map']);
  return gulp.src('src/scss/**/*.scss')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass({
      errLogToConsole: true
      // outputStyle: 'compressed'
    }))
    .pipe(sourcemaps.write({includeContent: false}))
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist/css/'));
});

minifyをプラグインに任せたらこれでいける うーん、まだ理解できてない…

gulp.task('sass', function() {
  var filter = gulpFilter(['*.css', '!*.map']);
  return gulp.src('src/scss/**/*.scss')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass({
      errLogToConsole: true
      // outputStyle: 'compressed'
    }))
    .pipe(sourcemaps.write({includeContent: false}))
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(minify({advanced: false}))
    .pipe(sourcemaps.write({includeContent: false}))
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist/css/'));
});

gulp-sassでコンプレスにするとずれるなー それ以外の出力結果なら上のやつでいける

gulp-sass単体で動かしてみてもコンプレスだとずれてるからそういう問題かな

windowsの問題とかいう説があるんだけど

・windows固有の問題 ・gulp-sassのコンプレスがなんか悪い説 ・sourcemapの仕様とかオプション調べればなんか解決する説

ミニマムなテストファイルを作ってみてwinとmacで試してみる

libsass/node-sassでimportがあってcompressedの場合か？

node-sass単体でコンプレスとソースマップのオプションつけてやったら問題なかった…なんでだーじゃあどこが問題なんだー てことはgulp-sassかgulp-sourcemapsが問題？もしくはgulp-sassで使ってるnode-sassのバージョンが古いとか？ 単体で動かしてるnode-sassは3.2.0、gulp-sassのほうは3.0.0だけども

じゃあ単体のほうを3.0.0に落としてやってみるか └問題なくできちゃったー

windowsの問題説再燃 テストファイルをmacで試してみたらうまくできた…

なんかsourcemapのパスがwindowsのものに対応してないみたいなissueがいろんなとこにあって責任がわからん… でもそれだけなら、コンプレスした時だけダメな理由がわからんなー

なんかsourcemapのsourcesのとこにフルパスのファイルが入ってくるのダメだよな…、別問題な気もするけどそれもだめだよな

sourcerootを適切に設定すればパスはつながって参照はできるなー でもフルパスで入ってくるとこはだめですなそらそうだ

問題が多すぎてどんどん深みにはまっていくのだけど

・importしたファイルと直に読み込んでいるファイルで、mapのsourcesのパスの書き方に違いが出て元のファイルを読みにいけない問題 └たぶんwinのみ └ブラウザでファイルを参照することができないだけでそこまで問題ではない

・importしたファイルがあって、node-sassで、compressedだとソースマップの行数がずれる問題 └winのみ？ └ソースマップが使い物にならないので大問題

gulp-sassのindex.jsの77行目を sassFileSrc = file.path.split('/').pop(); sassFileSrc = file.path.replace(/\\/g, '/').split('/').pop(); としたら全てがうまくいった パス問題も解決したしマッピングのずれも解決した

だけどあれだな、autoprefixer通すとコンプレスしてるとだめっぽいな

とりあえずまとめると、gulp-sassだけであれば、winの問題を解決できればsourcemapは使える、コンプレスしてても。 そこからautoprefixerを通すとまた別の問題が出てくるっぽい。その先は未検証。

win問題、なんかfirefoxで解決してるんですけど…なにそれ 確かに39に今日アップデートしたけどそういう問題？ブラウザの問題なの？ chromeはだめなままだけど

まーパスが間違ってるのは厳然とした事実だけどブラウザによってsouremapの結果が違うとかそういうもんなの？

firefoxのリリースノートとか見てもsourcemapのことなにも載ってないですだよ

逆にindex.jsをいじって出力したらfirefoxでずれるようになったのだけど！！ chromeは直る、なにこれもうやだ

chromeは43です

ちょっとnpm installからやり直してみよう、node-sassが入ってたりしてあれだったから

winではやっぱfirefox39がOK、chrome43がNGですた

gulp-sass 1.3ならいけるのか？そもそも1.3じゃコンプレスできねーよな

コンプレスの問題だとnode-sassかlibsassの問題な気がするからmacでもう一回試してみたほうがいいかもなー

sourceRootがsourceだとdevtoolで勝手にうまいことパスがあってなくても読み込んでくれてるっぽい気がする sourceRootをデフォルトのsourceにするにはsourceContentをtrueにする必要があるから、オプションは何もつけなくていいんじゃないか説

ていうことは別にsourceのパスはどうでもいいからwindowsでも関係ないのか？いやそんなことはないな、source/....scssとsource/c:/....scssができあがるもんなたぶん

コンプレスしなければ、winでもmacでもfirefoxでもchromeでも問題はない コンプレスするとずれる

77行目、プルリク出てる dlmanning/gulp-sass#314 sassFileSrc = file.relative;

compressedをminifycssに任せたらautoprefixerかましても問題ない、ただしwinのfirefoxをのぞく つまり基本的にはこれでいけるはず、もちろんadvancedはfalseにして、そうしないとまたずれる ずれるというか、ずれる？

プルリク出てる件はwinだけの問題っぽいからmacは関係ないっぽい

これで基本的なことはかけるかな？コンプレスするとずれるよって

firefox問題はdevtoolのsourcemapの設定がオフになってただけだった… まじかよ…

これでじゃあブラウザ間の問題は解消のはず

sourcemaを吐き出す場所問題 生成元と同じディレクトリ内を指定するとだめになるみたい、不具合かどうかはわからんが 例）src/scss/ に吐き出すように指定するとか

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment