Sass用のソースマップを作成してコーディング作業を更にもっと爆速化だ!【Gulp Sass向け】 | Garney.Web

Sass用のソースマップを作成してコーディング作業を更にもっと爆速化だ!【Gulp Sass向け】

スポンサーリンク

20160608_1-min

Sassって便利便利って言われてるから、「そんなに便利なんやったら試してみても良いかな」と思って触ってみたものの「やっぱり今までどおりでいいや」とそのまま放置してました。

だってデベロッパーツールからCSSの適応場所が分かりにくすぎるんだもん。
ただ、これは自分が無知なだけでした。ソースマップを使えば一瞬で解決らしい。
しかしこのことを知るのは少し先の話……

※SassとはCSSのメタ言語と言われてて、CSSをより簡単に素早く書けるようにした便利言語みたいなもの。今ではCSSで書くよりSassで書くのがデフォルトスタンダードになってる気がする。

SassでCSSを書くなら必須のソースマップとは?

ソースマップっていうのはなんぞ?って話し。

Source Mapsとは、Sass、LESS、CoffeeScript、TypeScript、Closure Compiler、UglifyJS2、GruntのJSMinなど、コンパイルや圧縮されて難読化されたコードがオリジナルファイルの何行目になるのか、マッピング情報が書かれたファイルであり、元の読みやすい状態にしてくれる方法です。

引用:SassのデバッグにSource Mapsを使うべきたくさんの理由 – ROCHAS

ソースマップがないと、GoogleChromeのデベロッパーツール等で目的のスタイルをどこに書いたのかが分からなくなってしまうのです。
いや分からないことはないけど結構迷子になる。

ソースマップを知るまでは、
なんやかんや普通のCSSでも特に不便してないし、むしろSassに変えることで学習コストがかさんでちょっと面倒いなって思ってました。

自分はCSSのスタイルがコードの何行目に適応されているかを高速で知るために、クロームのデベロッパーツールを活用しまくってる。こんなやつ。
20160608_3-min

囲っている所で、どのCSSファイルのどの行に目的のスタイルが書かれているか判断します。
デベロッパーツールは本当に便利で使ってる人も多いと思うし、自分みたいな使い方してる人も沢山居ると思うけど…どう?もっと良いの使ってる?。

でも普通に使ってるとデベロッパーツールから何行目にCSSが適応されているかを知ることができないんだよ・・・由々しき事態だ!

SassでCSSを扱うならソースマップも一緒に活用せよ

「由々しき事態だ!」な〜んて言いつつ、こういうのは大抵同じように思ってる人がいて、
誰かが解決策を考えてくれてたり、公式で対応していてくれたりするものなんだよなあ。

案の定。デベロッパーツールとSassを紐つけるにはソースマップを書き出しておけば解決することを知りました。こんなのあるの全然知らなかったよ。

ソースマップを作成していないと
CSS適応箇所の確認だけで時間が無駄に掛かってしまう。

コンパイル前のSassコードやSassファイル内での行番号を知るために、ラインコメントを出力して確認していませんか?

引用:現場で役立つ実践Sass(1)Sassの環境を整える | Adobe Creative Station
あぁそんな対応している人も居るんだ。
でもこうでもしないと時間かかるよなぁ。気持ちはわかるわ〜。

SassはささっとCSS書けちゃうけど、書いた後がよろしく無かった。
でもよろしくなかったのは、何も対策を知らなかったから。
これはソースマップを作成することで対応できたんです。

ちなみに、ソースマップを作成していないと、CSSの適応場所の確認作業に沢山の手順を踏まないといけません。

デベロッパーツールで目的のスタイルが適応されている場所をさがし、クラス名を頭で覚え、Sassを開き、ファイルの上からざっと大体のところまで移動し、そこから細かく探す。

抽象的に書いてるけど、この作業で大体10秒〜20秒かかるかと思います。
その確認作業だけで10秒も20秒も掛けたくないんですよ。5秒位で終わらせたいですよね〜

ソースマップを使っていればデベロッパーツールを開いた時点で、Sassファイルの何行目に書いてあるかが出るので、その行番号へジャンプすればいいだけなんです。
5秒から10秒もあれば見つけ出せますね。作業時間半減!ざっくりだけどね。

たかが5秒10秒ですけど、マークアップ作業からブラッシュアップ作業ではこれを何十回、
もしかすると何百回もするかも。
1回の確認作業時間が例え数秒でも馬鹿にできないんだよなあ。

ソースマップファイルの作成はどうすればいいのか

調べた所によると

v3.3.0以降のSassは、コンパイルするとソースマップファイル(.map)という、Sassコードが記述されていたファイル名と行数が書かれたファイルを書き出します。

Chrome, Safari, Firefox, Edgeなどの最新ブラウザーは全てソースマップに対応しており、定義もとのファイル名と行数が表示されます。

引用:現場で役立つ実践Sass(1)Sassの環境を整える | Adobe Creative Station

なるほどな。自動で書き出されるのか〜簡単!やったぜ!

10秒後……

コンパイルしても書き出されなかったが?(白目)
普通に使ってる人は書き出されるのでしょう。普通に使ってる人はこれでお終い!

自分はgulpからsassを使用しているからだろうか。
何度コンパイルしようとソースマップを吐き出す気配がない。
新しい事に挑戦するときはこんな感じで一筋縄ではいかないのです……

Gulp Sassでソースマップを作成する方法

Gulp Sassではそのままでソースマップを吐き出してくれないそうにない。
( GulpについてはLIGさんのこの記事参照。ここに書いてある以上のことはやってません。
Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG )

npmにgulp-sourcemapsという専用パッケージがあって、これを使うといい様だ
何を使えばいいか解った所で、後はインストールするだけですね。

npmからgulp-sourcemapsをインストールする

黒い窓(ターミナル等)を開いて、目的のディレクトリに移動し

npm install –save-dev gulp-sourcemaps

このコマンドを打ち込んでください。
20160608_2-min
インストールが終わったら次はgulpfile.jsを編集していきます。

gulpfile.jsを編集してソースマップを書き出せるようにしよう

gulpfile.jsを編集したらお終いすね。あともう一息だ〜。

var gulp = require("gulp");
var sass = require("gulp-sass");
var sourcemaps = require("gulp-sourcemaps");
var autoprefixer = require("gulp-autoprefixer");
var frontnote = require("gulp-frontnote");
var browser = require("browser-sync");
var plumber = require("gulp-plumber");
gulp.task("server", function() {
    browser({
        server: {
            baseDir: "./"
        }
    });
});

gulp.task("sass",function(){
  gulp.src("sass/**/*scss")
    .pipe(plumber())
    .pipe(frontnote({
	  css: '.assets/css/style.css'
	}))
	.pipe(sourcemaps.init())
	.pipe(sass())
	.pipe(autoprefixer())
	.pipe(sourcemaps.write("../maps/"))
	.pipe(gulp.dest("./assets/css"))
	.pipe(browser.reload({stream:true}));
});

gulp.task("default",["server"],function() {
  gulp.watch(["./assets/js/**/*.js","!./assets/js/min/**/*.js"],["js"]);
   gulp.watch("sass/**/*.scss",["sass"]);
});
これでお終い。
重要なのは、gulp.task(“sass”,function()の中身ですね。
.pipe(sourcemaps.init())これと、.pipe(sourcemaps,write(“../maps/”))ここ。
この2つでソースマップを作成し、mapsディレクトリにソースマップを保存するという命令を書いています。
sourcemaps.write()の中にダブルクォーテーションを書き、その中にパスを記入することで、自由にソースマップの保存先を変更することができます。

sourcemaps.writeで指定するパスに注意

.pipe(gulp.dest(“./assets/css”))に注目して欲しいのですが、ここはSassをコンパイルした先に書き出されるディレクトリを示しています。

style.scss(自分はscss記法で書くので拡張子は.scss)をコンパイルすると./assets/css/ディレクトリに、style.cssが書き出されます。

さて、sourcemaps.writeはこの./assets/css/ディレクトリを見ている様で、もしmapsディレクトリをassets/ディレクトリ内に置きたいなら
.pipe(sourcemaps,write(“../maps/”))こう書く必要があります。
(cssから一階層上がってからmapsファイルを置きたいので。)
gulpfile.jsからパスを見ているのかと思っていると、gulpfile.jsの置き場によっては罠にハマるので注意してください。まんまと罠にはまったから言っとくわ。
(あれ書き出されねぇ!あれ?あれれ?ってなって焦った!!)

sourcemaps.init()とsourcemaps.write()の書き場所に注意

sourcemaps.init()とsouremaps.write()が離れた位置に書かれてるのが分かるかと思います。
これ連続して書いちゃダメなんですよ。以下ダメな例

pipe(sourcemaps.init())
  .pipe(sourcemaps.write("../maps/"))
  .pipe(sass())
  .pipe(autoprefixer())
	

必ずsourcemaps.init()とsourcemaps.write()の間に必要な処理を書いて挟んでやってください。こっちは良い例

pipe(sourcemaps.init())
  .pipe(sass())
  .pipe(autoprefixer())
  .pipe(sourcemaps.write("../maps/"))	

自分は今回autoprefixerというパッケージを使っているので、ソースマップを書き出す前に
sass()とautoprefixer()を実行しています。

もし何も追加のパッケージも使っていないなら、sass()だけ実行してからソースマップを書き出すと上手くいくのかなと思います。

最後にgulp sassを実行し
ソースマップが書き出されたら終わり

はい。これでお終いです。これで黒い窓というかターミナル等でgulp sassと叩いて実行してやれば自動で書き出しされてサクサク快適!。
(タスクの監視も自動で行っているので、実際はgulpと叩いておいて、scssファイルを保存したら自動でソースマップも書き出されるようにしてる。)

試しにデベロッパーツールで確認してみましょう。
20160608_4-min

.title-section .title-textのスタイルはstyle.scssの136行目に書かれていることが解りました!やったぜ!

これからはずっとSassで書きます。デベロッパーツールさえ見方につければそれで良いのだ・・百人力だあああ!

っていうそんなこんな。

もっと自転車旅を知りたい人向け有料マガジンやってます。

もっと自転車旅を知りたい人向け!
有料マガジンやってます。

自転車世界一周マガジンについて詳しくはこちら

スポンサーリンク

フォローする

ツイッターやっています。


Profile

プロフィール

Profile びゃす

名前 びゃす
現在自転車で世界中旅しています。
スタートはアメリカ合衆国アラスカ州。
南米最南端を目指して毎日ひたすら前進中!。

自転車を漕ぎ、見た世界について感じたことをブログで発信しています。
詳しいProfileはこちら


Instagram
follow us in feedly
Followボタンからお気に入りブログを
登録する方法