はじめに
Sassを使えるように環境を構築できたので、メモとしてこちらに記しておく。
ちなみにnode-sassでコンパイルしています。タスクランナーはgulpです！
バージョン
gulp.ver4
対象
ターミナルに抵抗のある駆け出しデザイナーやSassについて何も知らない方
目次
1,Sass環境構築において重要な用語・知識の説明
2,Sass環境構築の手順
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パッケージのインストールする。
"devDependencies": {
"gulp": "^4.0.2",
"gulp-sass": "^4.0.2"
}
↑するとpackage.jsonにこのように追記されるはずです。
⑸ 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にコンパイルすることができるようになりました。
何か間違っている点がありましたら、ご指摘よろしくお願いします。
次回はタスクランナーを使う必要性について考えてみようと思います。