Sassにおける『ソースマップ』の役割や使い方【gulpでの設定も】

【ソースマップについて知りたい人】

「Sassをコンパイルした際に生成されるソースマップについて知りたいなぁ。ソースマップに関するgulpの設定方法も知りたい。」

こういった方向けの記事です。

本記事の内容

今回は、 Sassにおけるソースマップの役割や使い方から gulpでの設定方法までを過去にWeb制作会社でエンジニアとして勤務していたこの僕が解説します。

Sassにおけるソースマップの役割や使い方を解説

地図とコンパス

そもそもソースマップとは、コンパイル前のソースが書かれている場所を知ることが出来るものです。

こちらの具体的な説明は、文章で説明するよりも動画を観た方が分かりやすいと思うので、下記動画の【3:10 ~ 5:56】あたりを観てください。

ソースマップに関してはこの動画を観れば完璧です。

Sassのソースマップをgulpで設定する方法

先ほどのYouTubeでは VSCodeの拡張機能を使った方法でやっていましたが、ここではgulpを使った方法を解説します。（※gulpの場合、何も設定しないと mapファイルが生成されない。）

ちなみにまだ gulpのインストールが済んでいない方は下記の記事を参考にしてください。

≫【mac版】gulpのインストールから使い方までを解説【Web制作初心者向け】 ≫【gulp.watch】Sassの更新を監視して自動でコンパイルする方法 ≫ Sass（scss）のパーシャルファイルの使い方【globで一括読み込み】

では、上記の記事を読み終えたものとして進めていきます。

現在の『gulpfile.js』内のコードは下記のようになっているかと思います。

【gulpfile.js】

const gulp = require('gulp');
const sass = require('gulp-sass');
const sassGlob = require('gulp-sass-glob');
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');

gulp.task('sass', function() {
	return gulp.src('./sass/**/*.scss')
		.pipe(plumber({errorHandler: notify.onError(
			"Error: <%= error.message %>"
		)}))
		.pipe(sassGlob())
		.pipe(sass({outputStyle: 'expanded'}))
		.pipe(gulp.dest('./css'));
});
gulp.task('watch', function() {
	gulp.watch('./sass/**/*.scss', gulp.task('sass'));
});

それではまず「gulp-sourcemaps」パッケージをインストールします。下記のコマンドを実行して下さい。

npm i --D gulp-sourcemaps

インストールが出来たら、 gulpfile.jsの下記の3ヶ所にコードを追記します。

const gulp = require('gulp');
const sass = require('gulp-sass');
const sassGlob = require('gulp-sass-glob');
const sourcemaps = require('gulp-sourcemaps'); //①「gulp-sourcemaps」を読み込み
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');

gulp.task('sass', function() {
	return gulp.src('./sass/**/*.scss')
		.pipe(plumber({errorHandler: notify.onError(
			"Error: <%= error.message %>"
		)}))
		.pipe(sourcemaps.init()) //②追記
		.pipe(sassGlob())
		.pipe(sass({outputStyle: 'expanded'}))
		.pipe(sourcemaps.write()) //③追記
		.pipe(gulp.dest('./css'));
});
gulp.task('watch', function() {
	gulp.watch('./sass/**/*.scss', gulp.task('sass'));
});

ここまで出来たら、タスクを実行してみましょう。下記のコマンドを実行してください。

gulp sass

「あれ、、mapファイルが生成されない。。」

と思ったそこのあなた。大丈夫です、 cssファイルの最下部を見てください。

/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGUuY3NzIiwic291cmNlcyI6WyJzdHlsZS5zY3NzIiwiZm91bmRhdGlvbi9fYmFzZS5zY3NzIiwiZm91bmRhdGlvbi9fcmVzZXQuc2NzcyJdLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J・・・（省略）・・・ */

上記のような文字列が追記されていると思います。

mapファイルは生成させずに CSSファイル内に書き込みたい という方は、ここまでの手順で完了です。

mapファイルの書き出し

では次に、先ほどのように cssファイルに書き込まず、外部ファイルとして書き出したいという方向けの手順を解説します。

といっても簡単でして、

.pipe(sourcemaps.write())

上記のコードの（）内に、

.pipe(sourcemaps.write('./'))

上記のように書き出し先のパスを指定するだけです。

こちらは cssファイルから見たパスで書き出されるので、上記の例だと cssファイルと同じ階層 に生成されます。

Sassにおけるソースマップの役割や使い方を解説

Sassのソースマップをgulpで設定する方法

mapファイルの書き出し

About the author