ブラウザの開発者ツールで表示されるソースコードはあくまでSassなどの出力結果になります。なので、出力結果がsassのソースのどの行に対応しているのかはわかりません。これでは開発時に不便ですので、「sourcemap(ソースマップ）」というプラグインがあります。
使い方（gulpでビルドしてる場合）
gulpでビルドしている場合ですが、「gulp-sourcemap」というプラグインを使います。
|
1 |
var sourcemaps = require('gulp-sourcemaps'); |
ビルドの箇所への指定
|
1 2 3 |
.pipe(sourcemaps.init()) ~~~~処理~~~~ .pipe(sourcemaps.write('./')) |
出力結果
ビルド後のファイルに「style.css.map」というファイルが追加されています。
それでブラウザを開いて開発者ツールを見るとsassの該当行が表示されるようになっています。
リリース時
開発時には便利ですが、リリース時には開発中のソースが見られてしまうので不要なので切る設定を忘れないようにしましょう。(gulpであれば、開発ビルドと本番ビルドを別々の設定にするなど）
ソースマップの種類
また、ソースマップにも様々な種類がありそれぞれ長所短所などがありますので機会があれば押さえておくようにしましょう。
- inline-sourcemap
- sourcemap(今回ご紹介させていただいたのはこれです。）
- hidden-sourcemap
inline-sourcemap
|
1 |
/*# sourceMappingURL=data:xxxxxx |
cssファイルの最下部に上記記述が追加されます。これがソースマップ（開発用コードとビルドコードの対応）そのものです。
実装方法
|
1 |
.pipe(sourcemaps.write('')) |
パスを指定しない。
sourcemap
cssの他に「xxx.css.map」というファイルが生成されます。
実装方法
|
1 |
.pipe(sourcemaps.write('./')) |
上記のように指定。
hidden-sourcemap
少なくともgulpでは対応していない。
ソースマップは昨今のフロントエンド開発においては汎用性が高い概念
ソースマップは昨今のフロントエンド開発においてはSaasやgulpだけでなくjavascriptやtypescriptやwebpackなどのバンドルツールなどにも使われいたりしていて汎用性が高い概念です。
この記事へのコメントはありません。