1,Sass環境構築において重要な用語・知識の説明

node-sass

LibSassをNode.jsで動作できるようにしたライブラリ

Node.js

JavaScriptで作られたサーバーサイド環境（現在のモダンフロントエンド開発に不可欠）。
インストールすると同時にパッケージマネージャ（npm）が使えるようになる。

npm

npmの正式名称は、Node Package Manager。Node.jsのパッケージ（Package ）を管理する（Manager）ツール。

タスクランナー

様々な処理を自動化してくれるツール。例えばコンパイルなどの処理。
今回はgulpで開発。他にはWebpack,Gruntなどがある。僕がgulpを使った理由は参考書に書いてあるからです笑。でも参考書によるとgulpfile.jsが書きやすいみたいです。

2,Sass環境構築の手順

⑴　Node.jsをインストールする。

こちらの左のボタンからダウンロードします。 ↓こちらのコマンドを入力して正常にインストールされているか確認してみてください。

node -v

このように表示されていたら、インストール完了。

v6.数字.数字

「node: command not found」と表示されてしまう場合は、PATHが正しく設定されているか確認してみてください。

⑵　gulp-cliをインストールする。

npm install --global gulp-cli

これで「マシン（mac）に対してgulp-cliをインストールさせる」という意味です。macにインストールをしているので、どのディレクトリ下でもgulpコマンドが使えるようになりました。

gulpがインストールされているか確認してみてください。

gulp -v

バージョンが表示されていたらインストール完了です。
「gulp: command not found」を表示される場合は正しくPATHが設定されているか確認してみてください。

⑶　Sassを使いたいディレクトリ下でpackage.jsonの作成

npm init -y

↑こちらのコマンドでpackage.jsonの作成する。

⑷　同じディレクトリでgulpパッケージとgulp-sassパッケージのインストール

npm install --save-dev gulp 
npm install --save-dev gulp-sass

↑こちらのコマンドでgulpパッケージとgulp-sassパッケージのインストールする。

package.json

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

↑するとpackage.jsonにこのように追記されるはずです。

⑸　gulpfile.jsの作成

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function() {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest('./css'));
});

gulp.task('sass:watch', function() {
  gulp.watch('./sass/**/*.scss', gulp.task('sass'));
});

⑹ セットアップした環境を一括でインストールする

npm install

このコマンドによって「node_modules」がディレクトリに追加されます。
ここでインストールしたパッケージはpackage.jsonに記述されています。（今回だとgulp,gulp-sassパッケージなど）

おわりに

以上でSassをcssにコンパイルすることができるようになりました。
何か間違っている点がありましたら、ご指摘よろしくお願いします。
次回はタスクランナーを使う必要性について考えてみようと思います。