GulpでSassをコンパイル（環境構築）

• Gulp導入に必要なNode.jsとnodebrewについてはこちら
  nodebrewでNode.jsをインストール（初心者向け）

Gulp.jsのインストール

1.まずは、Webサイトのファイル一式が保存されるフォルダーを作成します

任意の場所にフォルダーを作成してください。
ここでは「testproject」をDocuments（Macの「書類」ディレクトリ）に作成します。

2.ターミナルを開いてフォルダー（testproject）の場所へ移動します

ターミナルにcdと打ってから、フォルダーをターミナルにドラッグ&ドロップしてreturnキーを押すとドロップしたフォルダーが現在地になるよ！

3.package.jsonを作成します

ターミナルで以下を実行して下さい。

npm init -y

• package.jsonとは
  プロジェクトの名前やバージョン、どのパッケージ（gulpとかgulp-sassとか）を使っているか管理しているファイルです。 エディタで開いてみると、以下のように記載されていることがわかります。

{"name":"testproject","version":"1.0.0","description":"",...

4.gulpとgulp-sassをローカルインストール

まずはgulpからインストールします。

npm install--save-dev gulp

続いてgulp-sassをローカルインストールします。

npm install--save-dev gulp-sass

package.jsonには以下のようにgulpとgulp-sassのバージョンが記載されます。

"devDependencies":{"gulp":"^4.0.2","gulp-sass":"^4.0.2"}

これでgulpとgulp-sassのローカルインストールは完了です。

5.gulpfile.jsの作成

gulpfile.jsとは、gulpの詳細な処理内容について設定するためのファイルです。
基本的には、gulp-sassのnpmページに記載されているコードを流用でいけますが、以下のコードはそちらを元にgulp-sass:watchをgulp4.0対応のコードに編集しています。
自分で編集しないといけないところはコメントを記載しているので、環境によって変えてね。

'use strict';vargulp=require('gulp');varsass=require('gulp-sass');sass.compiler=require('node-sass');gulp.task('sass',function(){returngulp.src('./sass/**/*.scss')// コンパイル元となるsassファイルのパスを入れる.pipe(sass({outputStyle:'compressed'}).on('error',sass.logError))// outputStyle（どのような記述形式でコンパイルするか）の指定.pipe(gulp.dest('./css'));// コンパイルで生成されるcssファイルの出力先となるパスを入れる});gulp.task('sass:watch',function(){gulp.watch('./sass/**/*.scss',gulp.series('sass'));// コンパイル元となるsassファイルのパスを入れる});

outputStyleは以下から選択すべし。

• nested
  一般的なcss記法＋ネスト。個人的にはあまり使ったことがない。
  

body{color:#333;}bodyh1{background:#fff;}

• expanded
  一般的なcss記法。Sassを使っていないクライアントにはexpanded形式でコンパイルされたcssを納品しています。
  

body{color:#333;}bodyh1{background:#fff;}

• compact
  一般的なcss記法＋改行無し。個人的にはあまり使ったことがない。
  

body{color:#333;}bodybackground{color:#fff;}

• compressed
  minifyにより軽量化＋難読化。個人的に一番馴染みがある形式。サイト高速化にも繋がるのでこれが好き。
  

body{color:#333}bodybackground{color:#fff}

6.gulpの実行〜sassのコンパイル

gulpをローカルインストールしているので、パスを通すために以下コマンドを.zshrcに追記します。

export PATH=$PATH:./node_modules/.bin

gulpを実行してsassをコンパイルするには、cdでプロジェクトのあるディレクトリに移動して、以下コマンドを打ちます！

gulp sass

sassファイルの変更を自動で検知してコンパイルするには、以下コマンドを打ちます！！

gulp sass:watch

7.完了

パスを通すところでつまづきまくり〜…環境構築は難しいですね。

8.豆知識

処理を止めたい時はctrl + cやで〜！