Sass(SCSS)の導入方法２（＋Gulp.jsについて）

どうも、Webデザイナーのレーウィンです。
以前、Rubyを使用したSass(SCSS)の導入方法を書いたけど、Gulpの方が実践向きだなということで再投稿。
初心者向けに書いたつもり。
ゴリゴリのフロントエンドエンジニアは「タスクランナーはプラグインへの依存が高い」という理由で使わないらしいけど、自分はそのレベルにはいってないです（汗）

今回はタスクランナー「Gulp.js」を使用してSass(SCSS)を導入してみる。
Sass(SCSS)？タスクランナー？って人向けに、少し解説。

先にあらかじめいっておくと、この記事での説明はかなりざっくりしたものにしている。
「林檎」ってどんなもの？って聞かれた時に、「赤くて丸い果物」って説明する程度にはざっくりで、青林檎の存在は意図的に隠してるような説明。

まず、Sass(SCSS)って何？

わかりやすく言うと、CSSを早く書くのを支援してくれるツール。
例えばで、こんなコードがあるとする。

#main {
  width: 940px;
}
#main p {
  font-size: 14px;
}
#main p:hover {
  color: #ddd;
}

これが、Sass(Scss)を使うことで、以下に省略できる。

#main {
 width: 940px;
 p {
   font-size: 14px;
   &:hover {
   	color: #ddd;
   }
 }
}

差がわかりにくいけど、上のような簡単なものでも文字数でいったら10文字程度の差がある。
CSSが長ければ長いほどその恩恵は大きく、通常書くよりも１００文字・２００文字・それ以上減らしたりすることが可能。
他にも、プロパティなどを変数にしたりできる。要するに、今まで繰り返し書いていたことをプログラムで自動で書いてくれるようにするって感じ。そう考えると、いろんな部分を簡略化できるね。

（ちなみに、Sass(SCSS)という風に書いている理由は、Sassの中でもSCSS記法の方を説明しているため。SassにはSass記法とSCSS記法があるけど、一般的にはSCSS記法が主流で、Sass＝SCSS記法のSassのことを指すことが多い。
詳しくは@m0nch1様が未経験者にもわかりやすく書いてくださっているので、そちらをどうぞ。
https://qiita.com/m0nch1/items/b01c966dd2273e3f6abe
素敵な記事をありがとうございます！）

ちなみに、Sass(SCSS)ファイルの拡張子は.scss。
以後、毎回Sass(SCSS)と書くのはめんどいのでSassで統一。

Sassってどうやって使うの？

CSSはhtmlファイルにlinkタグでリンクすれば読み込めるけど、Sassはどうなのよっていうと、残念ながら直接linkタグでリンクはできない。
対応して欲しい気持ちもあるけど現状ではできないので、SassファイルをCSSファイルにコンパイル（変換）する必要がある。
日本語しかわからない人に英語で書いてある文章渡しても「読めません」で終わるけど、英語を翻訳して日本語化してその人に渡せば読める。その、翻訳の部分がコンパイルにあたる。
そのコンパイルをするのにいくつか方法があるんだけど、今回はタスクランナーを使ってみる。

タスクランナーって何？

すんごいざっくり説明すると、いろんな便利ツールがまとめて入っている便利ツールキットのようなもの。

『机を作るとする。木材、部品はもうあるからあとは組み立てるだけ。
　まず、Aさんが作りはじめた。
　のこぎりが必要になった。のこぎりを取りにいってこよう。
　ドライバーが必要になった。ドライバーを取りにいってこよう。
　その先も、何か必要になる度にそのツールを取りに行った。
　時間はかかったけどようやく完成した。
　次にBさん。
　Bさんはのこぎり・ドライバー・その他ツールがまとめて入ったツールキットを持ってきて、それを展開し始めた。
　そして、机を作りはじめた。ツールは全て手元にあるのでさくさく作業を進められた。
　予定よりも早く完成した。』

AさんもBさんも机自体は完成しているが、作業時間がBさんの方が短いことになった。
これをWeb風に変換してみると・・・

『サイトを作るとする。psdデータ・サーバー情報はもうあるからあとは組み立てるだけ。
　まずAさんが作りはじめた。
　画像の圧縮が必要だ。tinypngで画像を軽くしよう。２０個ずつやろう。
　Sassのコンパイルが必要だ。Rubyを起動しよう。
　javascriptの圧縮が必要だ。圧縮サイトにアクセスしよう。
　その先も、何か必要になる度に違うツールを起動したりサイトにアクセスしていった。
　時間はかかったけど完成した。
　次にBさん。
　Bさんはあらかじめいろいろなプラグインがセッティングしてあるタスクランナーを持ってきて、それを起動し始めた。
　そして、サイトをツールは全て手元にあるのでさくさく作業を進められた。
　画像の圧縮が必要だったがタスクランナーが自動で圧縮してくれた。
　Sassのコンパイルが必要だったけどSassを保存したら勝手にやってくれた。
　javascriptの圧縮が必要だったけどコマンド１行でやってくれた。
　予定よりも早く完成した。』

こんな感じ。なんとなく便利であることは伝わったと思う。
（補足すると、タスクランナーがないとできない作業というものはおそらく存在しない。新技術ではなく、既存技術の時間短縮・効率強化という認識が正しい）

じゃあタスクランナー使うわ！教えて！ってことで、タスクランナーの中でGulp.jsを紹介。

Gulp.js（ガルプ）って何？

ガルプっていう釣り餌ともルアーともいえない釣りの最終兵器があったんだけど去年の１０月に生産終了してね・・・はい、タスクランナーの方ですね。すいませんでした。
タスクランナーといっても実はいくつか種類がある。Gulp、Grunt、WebPack等。
で、今回はGulpを学習する。なぜかというと、タスクランナーの中で学習コストが低くてできることが多いから。
まさにタスクランナーの入り口にはぴったり。
公式サイトはこちら
以前、RubyでのSassコンパイル方法を記事にしたけど、タスクランナー使うのと手間でいったら変わらないので、これを機にタスクランナーも学習しちゃいましょう。

Gulp.jsの仕組み

実は、Gulp.jsには最初からいろんなツールが入っているわけじゃない。
インストールしたからといってSassのコンパイルができるわけでもないし、javascriptの自動圧縮もしてくれるわけでもない。・・・すいません！石投げないで！
これはどういうことかというと、Gulp.jsは言ってしまえば大きな箱のようなものであり、その箱の中にGulp.js用プラグインをどんどん追加することで始めてタスクランナーとして動き出す。
なので、Sassのコンパイルを自動化したいなって思ったらSassコンパイルのプラグインをインストールする。
jsの圧縮を自動化したいなって思ったらjs圧縮のプラグインをインストールする。
Sublime text使ってる人ならわかると思うけど、最初あまり機能ないじゃん？そこにinstall packageでいろいろパッケージをインストールして自分好みのテキストエディタにしていくじゃん？それと似たような感じ。

なんとな～く説明したところで、本番の導入方法について

Node.jsの導入

Gulp.jsを使う前提としてNode.jsが必要なのでインストールしよう。
https://nodejs.org/en/
最新版をダウンロード。あとはなんとなくNextぽちぽちしてればインストールできる（雑）
Node.jsは、いろんなフレームワークを使うための前提の下地のようなものって認識で一旦大丈夫。
なんとなくインストールできたら、windowキー＋Rでファイル名を指定して実行ウインドウを立ち上げて「cmd」と入力。
するとターミナルが起動する(Macの場合はコマンドプロンプト)。黒くて怖い画面奴～。
まず、以下のコマンドを入力してみましょう。

node -v

これを入力（ペーストは右クリックでできる）してエンターキー。
v9.4.0みたいなのがでてきたら、ちゃんとNode.jsがインストールされている証拠。Errorが出たなら、コマンドミスかインストールが完了してないかのどちらか。
Node.jsの導入は以上。

npmの導入

npmはタスクランナーの下地のようなものって認識で一旦大丈夫。これも導入しないと始まらない。
まず、サイト制作のために作業するフォルダを作ろう。
今回はデスクトップに「gulp_test」フォルダを作ってその中でサイトを作る。
「gulp_test」フォルダの中にindex.html、「css」フォルダ（中身なし）、「sass」フォルダ（中身style.scss）、「js」フォルダ（中身scripts.js）を作成する。
style.scssはとりあえずこんな感じ。

#main {
 width: 940px;
 p {
   &:hover {
   	color: #ddd;
   }
   font: {
   	family: "Arial"
   }
 }
}

gulp_testフォルダ及び中身を一通り制作できたら、ターミナルでgulp_testにアクセスしよう。

cd C:\Users\○○○\Desktop\gulp_test

上記コマンドをターミナルに入力。cdはチェンジディレクトリの略だったはず（うろ覚え）
うまくいったら今までターミナルでC:\Users\○○○だった場所がC:\Users\○○○\Desktop\gulp_testになってると思う。
まず、npmをインストール。

npm init

なんかいろいろテキスト入力を求められるけど、全部エンターキー入力すればおっけい。
最後まで入力するとgulp_testフォルダ内にpackage.jsonができてると思う。
これが生成されてたらnpmは完了。

Gulp.jsの導入

やっとこさGulpをインストール。なげえ。

npm install gulp -g

npm install gulp --save-dev

２つあるけど、１つ目はグローバルインストール、２つ目はローカルインストールでこれ２つとも必要。
２つ目を入力するとgulp_testフォルダ内に新しいフォルダが生成されて、package.jsonにdevDependenciesが追加されてる。

次に、gulpfile.jsを作る。

var gulp = require("gulp");

だけ入力して、package.jsonと同じ階層に保存。
これでGulpの初期導入は完了。
今だと、こんな感じのファイル構成になってると思う。
/gulp_test/index.html
/gulp_test/css/
/gulp_test/sass/style.scss
/gulp_test/js/
/gulp_test/gulpfile.js
/gulp_test/package.json
/gulp_test/package-lock.json
/gulp_test/node_modules/…

Sassコンパイル用プラグインをインストールし、実行する

npm install gulp-sass --save-dev

npm installの後ろにパッケージ名（プラグイン名）コマンドを入力することでインストールできる。上記コマンドを入力してみよう。
紫の文字とかでがーってなってなんとなく終わってErrorの文字がなければインストール完了（雑の極み）
https://www.npmjs.com/package/gulp-sass
今回は上のプラグインをインストールしてみた。ちなみに、上ページにアクセスすればわかるけど、プラグイン詳細説明ページにもインストール用のコマンドが表示されている場合があるから、確認してみるといいかも。

わーい！インストールできたー！よし、これでコンパイルできる！・・・わけではない！！
プラグインを実行するための命令をしなければならない。
１行だけ入力されているgulpfile.jsがあると思うけど、あそこに

var sass = require("gulp-sass");
gulp.task("sass", function() {
    gulp.src("sass/**/*scss")
        .pipe(sass())
        .pipe(gulp.dest("./css"));
});

これを追記する。
なので、こんな感じになるはず。

var gulp = require("gulp");
var sass = require("gulp-sass");
gulp.task("sass", function() {
    gulp.src("sass/**/*scss")
        .pipe(sass())
        .pipe(gulp.dest("./css"));
});

ここで、ここに書いてある各行の説明。
require()は読み込むためのコード。１行目ではGulpそのものを、２行目ではgulp-sassプラグインを読み込んでいる。
gulp.taskは実際の命令（タスク）を書くためのコード。”sass”の部分はそのタスクの名前。それ以降にタスクの内容。
タスクの内容を上から読んでいくと・・・

gulp.src("sass/**/*scss")

sassフォルダ内にあるscss拡張子のものを対象に

.pipe(sass())

sass()を実行

.pipe(gulp.dest("./css"));

cssフォルダに書き出す

みたいな感じ。
さて、gulpfile.jsに先ほどのコードを書いて保存したら、コマンドで

gulp sass

これを実行してみよう。

そして、cssフォルダの中を開いてみよう。

style.cssがあるはず。
実行できました。

え、これ毎回手動なの？

って思うじゃん。理想としてはscssを上書き保存したら勝手にcssにコンパイルしてくれる状態じゃん。
はい、というわけでwatchの出番。

gulp.task("default", function() {
    gulp.watch("sass/**/*.scss",["sass"]);
});

上記をgulpfile.jsに追記してみましょう。
軽く説明すると、watchは監視用の記述で、今回でいうと
“sass/**/*.scss”に変更があれば”sass”を実行するという感じ。

これを保存して、コマンドで

gulp

を実行してみましょう。
すると、Usingほにゃらら、Stating’default’、Finished ‘default’ほにゃららって感じに書かれると思う。
その状態でstyle.scssを少し変更してみよう。

#main {
 width: 960px;
 p {
   &:hover {
   	color: #ddd;
   }
   font: {
   	family: "Arial"
   }
 }
}

widthを960にしてみた。この状態で保存をすると・・・保存した瞬間にコマンドがまたがりがり書かれたと思う。
無事にFinishedされたことを確認しつつ、style.cssを見てみると、なんと960pxになって保存されている！はず！
これで自動化ができた。
ちなみに、自動化の終了はターミナルでCtrl＋cを２連打でできる。

他にもいろいろできるけど、一旦ここまで

Sassのコンパイルができたところで今回はここまで。今回とかいって、次回書く予定ないけど。
基本的な部分がわかっていれば、jsの圧縮とかを追加するのは難しくないはず。難しかったら、調べてみてね。出てくるから。
多分、一部の人から「ここの説明が適切じゃない」とか「誤解を与える表現をするな」とか思われそうな気がするけど、入り口で詰まってる人の役にたったらいいなー。
タスクランナーの記事って専門用語とか、正確に表現するために少し難しい言葉で説明したりしてるのが多いんだけど、よくよく見たら難しいことはしてないよって記事でした。

ではでは。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。名前及びコメントは必須項目、メールアドレス及びサイトURLは任意です。