Node.js+gulpを利用したSass利用環境の構築

# 1.はじめに

Node.jsとgulpを使用して、Sassの利用環境をローカルPCに構築した際の手順を備忘録として記述します。
Macを使って構築を行いました。

# 2.手順

下記手順に沿って進めてください。

## 2-1.Node.jsのインストール

[Node.jsの公式サイト](https://nodejs.org/ja/)からインストーラをDLします。
※今回は推奨版をインストールします。
![img_node.jpg](https://qiita-image-store.s3.amazonaws.com/0/191403/81bbd740-4470-76e6-038b-7c766ce5e8e3.jpeg)

インストーラを起動します。
![img_install_node_001.jpg](https://qiita-image-store.s3.amazonaws.com/0/191403/725c363b-893b-594c-48f9-5705f703b8bb.jpeg)

「続ける」を押下します。
![img_install_node_002.jpg](https://qiita-image-store.s3.amazonaws.com/0/191403/cbcd16cb-534c-fa7c-700f-56d28aa89673.jpeg)

「続ける」を押下します。
![img_install_node_003.jpg](https://qiita-image-store.s3.amazonaws.com/0/191403/da84ba0b-0b86-158a-157d-aaee5bafc62a.jpeg)

「インストール」を押下します。
![img_install_node_004.jpg](https://qiita-image-store.s3.amazonaws.com/0/191403/08347538-277c-b2b4-eba6-a752140177db.jpeg)

インストールが完了したら、「閉じる」を押下します。
![img_install_node_005.jpg](https://qiita-image-store.s3.amazonaws.com/0/191403/f86f3673-b5cf-f47e-604f-76fd07283eda.jpeg)

ターミナルを起動し、下記コマンドを実行し、Node.jsがインストールされていることを確かめます。
`node -v`

```terminal
vX.X.X
```
Node.jsのバージョンが表示されればインストールは正常に完了しています。

## 2-2.gulpのインストール

下記コマンドを実行し、gulp-cliをインストールします。
■Windows
`npm i -g gulp-cli`
■Mac
`sudo npm i -g gulp-cli`

プロジェクトを作成するフォルダを新規作成します。
ここでは例として、「sass_test」というフォルダを作成します。

```text
[sass_test]
```

上記ディレクトリに移動します。
`cd 〜`

package.jsonを作成します。
`npm init -y`
カレントディレクトリにpackage.jsonが作成されていれば成功です。

```text
[sass_test]
  ∟package.json
```

下記コマンドを実行し、gulpをインストールします。
`npm i -D gulp`
カレントディレクトリにnode_modulesフォルダとpackage-lock.jsonが作成されていれば成功です。

```text
[sass_test]
  ∟[node_modules]
  ∟package-lock.json
  ∟package.json
```

下記コマンドを実行し、gulp-sassをインストールします。
`npm i -D gulp-sass`

下記コマンドを実行し、gulpがインストールされていることを確認します。
`gulp -v`

```terminal
[23:46:32] CLI version X.X.X
[23:46:32] Local version X.X.X
```
gulpのバージョンが表示されればインストールは正常に完了しています。

gulpfile.jsを作成します。
コンパイル結果のCSSのインデントルールは、outputStyleから指定が行えます。
アウトプットスタイルは「nested」、「expanded」、「compact」、「compressed」の4種類があります。
実際の出力例は下の方で記載してあります。

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

// Sassをコンパイルする処理
gulp.task('sass', function() {
  // コンパイル元ディレクトリ
  return gulp.src('./sass/**/*.scss')
    // アウトプットスタイル
    .pipe(sass({outputStyle: 'expanded'}))
    // コンパイル先ディレクトリ
    .pipe(gulp.dest('./css'));
});
```

ここまでで、下記のようなディレクトリ構成になっているかと思います。

```text
[sass_test]
  ∟gulpfile.js
  ∟[node_modules]
  ∟package-lock.json
  ∟package.json
```

## 2-3.Sassのコンパイル

先ほど作成したプロジェクトフォルダ内に「sass」フォルダを新規作成し、その中に.scssファイルを新規作成します。

```scss:sample.scss
header {
  position: fixed;
  margin: 0 auto;
  padding: 0;
  .inner {
    padding: 0 4%;
    position: relative;
  }
  .h-logo-box {
    display: flex;
    height: 56px;
    width: 160px;
    align-items: center;
    h1 {
      font-size: 14px;
      a {
        display: block;
        img {
          width: 100%;
        }
      }
    }
  }
}
```

下記のようなディレクトリ構成になっているかと思います。

```text
[sass_test]
  ∟gulpfile.js
  ∟[node_modules]
  ∟package-lock.json
  ∟package.json
  ∟[sass]
    ∟sample.scss
```

下記コマンドを実行し、コンパイルを行います。
`gulp sass`

プロジェクトフォルダ内にcssフォルダが新規作成されており、その中にsample.cssが作成されていれば成功です。
アウトプットスタイルはgulpfile.jsで指定した下記4種類のいずれかになります。

```css:sample.css（nested）
header {
  position: fixed;
  margin: 0 auto;
  padding: 0; }
  header .inner {
    padding: 0 4%;
    position: relative; }
  header .h-logo-box {
    display: flex;
    height: 56px;
    width: 160px;
    align-items: center; }
    header .h-logo-box h1 {
      font-size: 14px; }
      header .h-logo-box h1 a {
        display: block; }
        header .h-logo-box h1 a img {
          width: 100%; }
```

```css:sample.css（expanded）
header {
  position: fixed;
  margin: 0 auto;
  padding: 0;
}

header .inner {
  padding: 0 4%;
  position: relative;
}

header .h-logo-box {
  display: flex;
  height: 56px;
  width: 160px;
  align-items: center;
}

header .h-logo-box h1 {
  font-size: 14px;
}

header .h-logo-box h1 a {
  display: block;
}

header .h-logo-box h1 a img {
  width: 100%;
}
```

```css:sample.css（compact）
header { position: fixed; margin: 0 auto; padding: 0; }

header .inner { padding: 0 4%; position: relative; }

header .h-logo-box { display: flex; height: 56px; width: 160px; align-items: center; }

header .h-logo-box h1 { font-size: 14px; }

header .h-logo-box h1 a { display: block; }

header .h-logo-box h1 a img { width: 100%; }
```

```css:sample.css（compressed）
header{position:fixed;margin:0 auto;padding:0}header .inner{padding:0 4%;position:relative}header .h-logo-box{display:flex;height:56px;width:160px;align-items:center}header .h-logo-box h1{font-size:14px}header .h-logo-box h1 a{display:block}header .h-logo-box h1 a img{width:100%}
```

## 2-4.Sassの変更を監視する

Sassを更新するたびにコンパイルコマンドを打つのはとても面倒です。
なので、gulpにSassが更新されたら自動的にコンパイルをしてもらうようにします。
gulpfile.jsに以下処理を追加します。

```javascript:gulpfile.js
// Sassの変更を監視する処理
gulp.task('sass:watch', function() {
  // 変更があればSassをコンパイルする処理を実行する
  gulp.watch('./sass/**/*.scss', ['sass']);
});
```

下記コマンドを実行します。
`gulp sass:watch`

Sassを更新するたびに、CSSに更新内容が反映されていれば成功です。

監視を止める場合は`Ctrl + C`を押下します。

# 参考

- [Web制作者のためのSassの教科書](https://www.amazon.co.jp/Web制作者のためのSassの教科書-改訂2版-Webデザインの現場で必須のCSSプリプロセッサ-Web制作者のための教科書シリーズ-平澤-ebook/dp/B075LCKFLL/ref=sr_1_1?ie=UTF8&qid=1538980532&sr=8-1&keywords=web製作者のためのsass)
- [ざっくりGulp.js入門（Mac向け）](https://qiita.com/kazukichi/items/884a1379eea5918689ed)