sassについてあれこれ。part2


[sassについてあれこれ。part1](http://qiita.com/hitomi5/items/11194711b9668987e1ea)
sassとは？からインストール、使い方の説明までは前回の記事をどうぞ。

さて、コンパイルを自動化してくれるツールの説明といきましょう！

#コンパイラ
ビルドツールですね！
ビルド・・？一連の作業をルールに従って自動でやってくれるということです(多分)。
[Grunt](http://gruntjs.com/)、[gulp.js](http://gulpjs.com/)、[Brunch](http://brunch.io/)などなど。
上記のコンパイラはターミナルで操作するCUIというもので、コマンドやだ・・・という方は、
[Koala](http://koala-app.com/)、[Codekit](https://incident57.com/codekit/)のGUIをどうぞ。

巷ではgulpが大人気らしく、私もgulpを導入しました。なのでここからgulpの説明になってしまいますが、何かしらの知識だけでもお持ち帰りいただければと思います・・・。

#gulp.jsとは？

Node.jsを使ったタスク自動化ツールです。(タスク=作業)
ちなみに『ガルプ』と読むそうです。グルプと呼んでた・・・。
.jsとあるのでjavascriptの記述を使います。が、ちょっとでいいんです！諦めないで！
Node.jsというサーバーサイドのJavaScriptの実行環境で動かします。待って、諦めないで！！
とりあえずnode.jsを入れるだけであっという間にgulpがインストールできるのでやっちゃいましょう！

#インストール
1.[Node.js](https://nodejs.org/en/)
はい、ターミナル。
最初にnvm（Node Version Manager）というnodeのバージョンを切り替えられるツールを入れます。常に最新のでいいんじゃないの？と思うかもしれませんが、バージョンによって動かない機能があるのでこれ、大事。
補足：バージョン管理するのはnvmだけでなくnodebrew、naveなどがありますが、zshを使わないならnvmでOK。もっとプログラミングしたい！という方はnodebrewがオススメらしい。使ったことないけど。

`$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash`
Gitというバージョン管理ツールからホームディレクトリにnvmをクローンします。
???という方は以下を参照！
>[イラストでわかる！git入門の入門](http://blog.asial.co.jp/894)


ちなみに上記のコマンドは自動インストールみたいなもので、手動だと
`$ git clone https://github.com/creationix/nvm.git ~/.nvm`
このコマンドです。

次に、ターミナル起動時に自動でnvmを読み込むように設定します。これしないと毎回`$ source ~/.nvm/nvm.sh`って打たないといかん。

`$ vi .bash_profile`　　//.bash_profileファイルを作って、viで編集
ターミナルがメモ帳になるので、焦らず下をコピペ！

```
[[ -s ~/.nvm/nvm.sh ]] && . ~/.nvm/nvm.sh
nvm use default
npm_dir=${NVM_PATH}_modules
export NODE_PATH=$npm_dir
```
escを押してコマンド状態、`:wq`と打ってEnter、保存終了。
コピペできない！って時はiを押して編集可能か確認を。そいで、

`$ source ~/.bash_profile`　//.bash_profileを適用！

これでnvmの読み込み自動化が設定できました。じゃあお待ちかねnodeのインスト！

`$ nvm ls-remote`　　//Node.jsのバージョンを一覧で表示。
めっさバージョンが出てきます。一番最後に出てきたのでいいでしょう。
`$ nvm install v5.7.0`　　//v5.7.0のNode.jsをインスト！
`$ nvm alias default v5.7.0`　　//デフォで使用するバージョン設定
`$ nvm use v5.7.0`　　//v5.7.0のバージョンを使用

・・・ふぅ。コマンド打つの楽しくなってきませんか？

2.[gulp.js](http://gulpjs.com/)

よし、gulp入れるぞ！

`$ npm install -g gulp`
npm(node package manager)はnodeをインストした時についてくるもので、nodeで何かしらやる際は文頭につけます。
-gはグローバルという意味で、インストール後はマシン全体でgulpコマンドを使えるようになります。
`$ gulp -v`
バージョンが表示されればOK!

と、これで大元は終わり。あっさりでしたね。
これからgulpでコンパイルをするのに、ディレクトリを作ってその中で実行していきます。

#gulpを使ってコンパイル
<img width="604" alt="スクリーンショット 2016-02-25 22.34.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/110274/3f2a74b4-ece6-d7ff-ca35-d52f9f77f716.png">

例えばこんな構成でディレクトリを作って、sassの中にscssファイルを作ります。
ターミナルでtestのとこへcd、コマンド！

`$ npm init`
すると、
`Press ^C at any time to quit.`
と出て色々聞かれますが10回くらいEnter！ここでエラーが出たらコマンドの打ち間違いか、ディレクトリ名に大文字が入ってるとかだと思います。
入力が終わるとpackage.jsonというファイルが出来ています。後々プラグインを使うとなると、これに何を使うかが自動的に記述されます。便利！

`$ npm install --save-dev gulp`　　//gulpを使うぜ
`$ npm install --save-dev gulp-sass`　　//gulpでsassを使うぜ
次にこれ。
--save-devをつけると、開発用のローカルインストールになります。チームのようになるというか・・・察してください。

`$ touch gulpfile.js`
まだまだコマンド。gulpfile.jsというファイルを作ります。これにタスクを書いていきます。

```js:gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');

// $ gulp sass で実行するタスク
gulp.task('sass', function () {
  gulp.src('sass/*.scss') //sassの中の.scss
    .pipe(sass({
        style : 'expanded', //cssに近い書き方で変換
    }))
    .pipe(gulp.dest('css/')); //cssに書き出し
});
// ついでに監視もお願いしとく
gulp.task('watch', function () {
    gulp.watch('sass/*.scss', ['sass']);
});
```
??と思ってもとりあえずコピペです。
今のとこはこんな感じ。
<img width="600" alt="スクリーンショット 2016-02-25 23.11.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/110274/4d9d2168-312f-a5da-5512-d45e254be37f.png">

style.scssを書きますか。

```sass:style.scss
.main {
    .box {
        padding-left: 20px;
	    margin-bottom: 50px;
	    .text {
		    font-size: 14px;
		}
		.span {
			color: red;
		}
	}
}
```

適当です。ネストだなーとだけ思ってください。
かけたらコンパイル！ドキドキ・・・

`$ gulp sass`

<img width="582" alt="スクリーンショット 2016-02-26 7.15.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/110274/e3762a97-86e7-077b-b7b3-d09ef5aa0f8f.png">
おお、出来てるぞ！きっとこうなってるはずです！

```css:style.css
.main .box {
  padding-left: 20px;
  margin-bottom: 50px; }
  .main .box .text {
    font-size: 14px; }
  .main .box .span {
    color: red; }

```

じゃあgulpfile.jsに書いた監視のお願いを実行！

`$ gulp watch`
これで保存するたびに自動的にcssにコンパイルしてくれます。やったー！
ちなみに監視停止はcont+c。

でもまだ問題・・・保存時にscssに変な記述があるとエラーとなって監視を辞めちゃいます。その度にまたコマンド・・・面倒！
何とかしてよ〜！
ててててってて〜プラグイン〜！

`$ npm install --save-dev gulp-plumber`
 
```js:gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber'); //追記

gulp.task('sass', function () {
  gulp.src('sass/*.scss')
    .pipe(plumber()) //追記
    .pipe(sass({
        style : 'expanded',
    }))
    .pipe(gulp.dest('css/'));
});

gulp.task('watch', function () {
    gulp.watch('sass/*.scss', ['sass']);
});
```
gulp-plumberはエラー出ても『ここ変だよ！』というお知らせだけして監視を続行してくれるプラグインです。
いやー快適！！

他にも便利なプラグインがあります。こちらのリンクを参照！
>[gulp.js その4 プラグイン一覧](http://qiita.com/oreo3@github/items/0f037e7409be02336cb9)

一通り説明をしましたが、いかがだったでしょうか？
私がsassとgulpをインストするときにやり方を調べたら、初心者には？？？なことが多かったので復習も兼ねてまとめました。
今後は他のツールを使ってみて比較とかしようと思います。
あとは〜mixinライブラリ、フレームワークの感想とかとか。
誰が見ても分かる語彙力つけて記事書いていきます！
閲覧ありがとうございました。