gulp sass の設定

自身のメモとして、gulp での sass（scss）コンパイルの環境導入の手順をまとめます。
windowsでの対応です。

#■流れ

• １、Node.jsのインストール（npmを使う準備、ver管理として Nodist で インストール）

• ２、package.json ファイルの作成（npm init で初期化生成）

• ３、gulp のインストール（npm install -D gulp）

• ４、sacc のインストール（npm install -D gulp gulp-sass）

• ５、gulpfile.js を記載

• ６、gulpfile.js のある階層で、gulp 起動コマンド。

#■１、Node.jsのインストール
複数人で制作したり今後ページを運用していくにあたり、Node の ver を合わせることは大切になってきます。
Node の ver を切り替えることができるように windows では Nodist を使って、Node をインストールします。

▼Nodist は以下よりダウンロード
https://github.com/nullivex/nodist

#■２、package.json ファイルの作成（npm init で初期化生成）
下記コマンドで package.json ファイルを生成します。
以降の手順でインストールしていくプラグインを管理するファイルになり、インストールと一緒に随時記載されていきます。

npm init -y

-y は質問をすべてスキップするオプション。

#■３、gulp のインストール（npm install -D gulp）

フォルダ毎の制作環境を持てるように、ローカルインストール（指定したフォルダ以下で使えるようにインストール）します。

––save-dev、または省略系の –D をオプションとして指定します。

npm install -D gulp

#■４、sacc のインストール（npm install -D gulp gulp-sass）

npm install -D gulp gulp-sass

#■５、gulpfile.js を記載

コンパイル時のソースと、掃き出し先は下記通り。
[src]フォルダを基ソースに、[dis]の中に 吐き出します。

[dist]
　┗[css]
　　┗[test.css]

[src]
┗[scss]
　　┗[test.scss]

下記は gulpfile.js の中身です。

gulpfile.js

// プラグインの読み込み
const gulp = require('gulp');
const sass = require('gulp-sass');

// 掃き出し階層の指定を定義
const path = {
  src: './src/scss/**/*.scss',
  dist: './dist/css/'
}

// default のタスクを作成する
gulp.task("default", function () {
  return gulp.watch(path.src, function () {

    // ●●.scssファイルを取得
    return (
      gulp.src(path.src)

        // Sassのコンパイルを実行、error以降Sassのコンパイルエラーを表示(これがないと自動的に止まってしまう)
        .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))

        // cssフォルダー以下に掃き出し
        .pipe(gulp.dest(path.dist))
    );
  });
});

#■６、gulpfile.js のある階層で、gulp 起動コマンド。

gulp

タスク名'default'は、gulp コマンドのみで実行することができます。

また、Node.js（npm v5.2以上）であれば
npx コマンドを使うことができ、npx gulp で、'default'タスクを実行できます。
npx コマンドを使うと、Gulp を少ない手順で使えるようになるようです。

#■参考
https://ics.media/entry/3290/

▼「gulp-sass 5」でコンパイルエラー！
https://notes-de-design.com/website/gulp/error-gulp-sass-v5/