ブログ 
2018年版！ Sass（とGlup）を使おう
CSSをSassで書き、自動コンパイルするのための環境構築が成功したのでメモ。黒い画面（コマンドライン）を叩きに叩いていきます。macOS Hight Sierra で作業しました。
以下に実行コマンドを掲載していきますが、$はターミナルに打ち込まないこと。超初心者の私は$をターミナルにコピーしエラーを何度も吐きました。
1 Homebrewをインストール
2 Nodebrewをインストール
3 Node.jsをインストール
4 Glupのインストール
5 glupfile.jsを作成する
6 glup-sass のインストール
7 タスクを実行する
1 Homebrewをインストール
macOS 用パッケージマネージャーです。
x-codeをインストール
x-codeのインストールが必須とのこと。AppStoreからダウンロードします。
インストールできたら、メニューの「Xcode」→「Preferences…」→「Locations」→「Command Line Tools」→「Xcode x.x.x」を選択します。
Homebrewをインストール
- Homebrewの最上部に掲載されているスクリプトをターミナルに貼り付け実行します。
- Enterを２回くらい押すとmacのパスワードを求められるので入力。
- そのあと、$ which brewをターミナルで実行し、保存場所が表示されたらOK.
2 Nodebrewをインストール
node.jsのバージョン管理ツールです。
Nodebrewをインストール
- $ brew install nodebrew
- インストールできない場合はsudoをつけてインストール。
NodebrewのPATHを通す
- ホームディレクトリ直下にある設定ファイル~/.bash_prifileにexport PATH=$HOME/.nodebrew/current/bin:$PATHという記述を追加。
- ~/.bash_prifileという設定ファイルにファイルがない場合は、ターミナルで$touch ~/.bash_prifileを実行。
- $source ~/.bash_prifileを実行
- $which nodebrewを実行しpathが表示されたらNodebrewのインストール完了。
3 Node.jsをインストール
- $ brew install nodeを実行します。
- インストールできない場合はsudoをつけてインストール。
- $node -vを実行して、バージョンが表示されたらインストール完了。
npmのインストール
- $npm -vを実行し、npmがインストールされているか確認後、されていなかった場合は$npm installを実行します。
- $npm -vを実行し、バージョンが表示されたらOK。
- インストールできない場合はsudoをつけてインストール。
- エラーを吐いたら、エラー文を読んでそこに書いてあるコマンドを実行。
4 Glupをインストール
Glupはグローバルとローカルの両方にインストールします。
グローバルインストール
- まずはグローバルインストール。$npm install -g gulp-cliを実行してインストールします。
- インストールできない場合はsudoをつけてインストール。
ローカルインストール
- 作業用のディレクトリに移動して、gulpをローカルインストールします
- $ cd (作業用ディレクトリ)を実行し、作業用のディレクトリに移動します。
- ターミナルのユーザー名の前にフォルダ名がついたら移動完了。
package.jsonを作成
- Node.jsでプログラムを動かすために必要なパッケージマネージャーです。
- 手動あるいは下記の方法により自動で作成できます。
- $npm initを実行し、package name:XX（任意の名前）などの情報を入力し、Enterを押します。
- $ npm install gulp –save-devを実行してGulpをインストールします。
- インストールできない場合はsudoをつけてインストール。
5 glupfile.jsを作成する
Glupのタスクを設定するためのファイルです。作業ディレクトリに手動で作成します。
設定した「SassとCssを保存するフォルダ」も手動で作成しておきましょう。
const sass = require(‘gulp-sass’);
gulp.task(‘default’, function () {
gulp.watch(‘scss/**/*.scss’, function () {
gulp.src(‘scss/**/*.scss’)
.pipe(sass({
outputStyle: ‘expanded’
})
.on(‘error’, sass.logError))
.pipe(gulp.dest(‘css’));
});
});
6 glup-sassをインストール
- $ npm install gulp-sass –save-devを実行。
- できない場合は、$npm install -D gulp-sassを実行。
- うまくいっていたらpackage.jsonに “gulp-sass”: “バージョン”が表示されます。
7 タスクを実行する
- 「Sassを保存するフォルダ」にsass（.scss）ファイルを作っておきましょう。上記で「*.scss」と指定した場合は任意の名前で保存します。内容も任意のsassで書かれたCSSを用意してください。
- ターミナルで$ npx gulpを実行すると自動でCSSが作成されているはずです！
お疲れ様でした
自動でコンパイルされるSassファイルを作ることができました！
ちなみに上記の内容でglupgile.jsを作成した場合には、Sassファイルが自動でコンパイルされる設定になっています。
あー、時間かかったなぁ〜。お疲れ様でした！
補足
うまくコンパイルされないときに見直して見ましょう。特にSCSS文法ミスのエラーに注意。
①.sassと.scssを間違えている
②ターミナルで実行後、.scssファイルを上書きするとエラーになる（scss文法のミス）
