2021/01/04 （最終更新日：2021/10/27）

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

Web制作・ﾌﾟﾛｸﾞﾗﾐﾝｸﾞ

※本サイトはアフィリエイト広告を利用しています。

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

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

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

本記事の内容

Sassにおけるソースマップの役割や使い方を解説
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ファイル内に書き込みたい
という方は、
ここまでの手順で完了です。