【初心者向け】はじめてのGulpでのSassトランスパイル

Gulp手順

1. Node.js導入

①Node.js導入
公式サイトより安定版パッケージをダウンロードしインストールする
https://nodejs.org/ja/
node-v12.16.1.pkg（2020/02/24時点）

②Node.jsの存在確認

node -v

③デスクトップにテスト用のGulpディレクトリを作成

cd desktop
mkdir sample-gulp
cd sample-gulp

2. Gulp実行

①npmパッケージマネジャーにて初期化

npm init -y

②Gulpプラグインをインストール(※1 Mac OSでエラー)
Sassトランスパイルを実現したいので今回B手順を実施。

A.gulpをインストールする場合

npm install -D gulp

B.gulpとgulp-sassをインストールする場合

npm install -D gulp gulp-sass

※1 Mac OSでエラー
■課題
Catalina macOS 10.15にnpm installが失敗し次のエラーが出る（2020/02/24時点）
No Xcode or CLT version detected!

■対策
「Xcodeをインストールして、Command Line ToolsをXcode同梱版に切り替えてみた。」を参考にした。
https://qiita.com/UTA6966/items/6f8b1fd21c2dc9591488

手順①App StoreでXcodeをインストール
手順②ターミナルにてnode-gypをインストール

$ sudo xcode-select --switch /Applications/Xcode.app

$ npm install node-gyp

③トランスパイル対象フォルダを用意
・cssフォルダを作成
desktop/sample-gulp/css

・SCSSファイルを用意
style.scssファイルを作成
desktop/sample-gulp/css/style.scss

// ネストのテスト
div {
  p {
    font-weight: bold;
  }
}

// 変数のテスト
$fontColor: #525252;

h1 {
  color: $fontColor;
}

④タスクランナー処理記述
・gulpfile.js処理の記述
プロジェクトファイル直下にgulpfile.jsというファイルを作成

gulpfile.js

// gulpプラグインの読み込み
const gulp = require("gulp");
// Sassをコンパイルするプラグインの読み込み
const sass = require("gulp-sass");

// style.scssをタスクを作成する
gulp.task("default", function() {
  // style.scssファイルを取得
  return (
    gulp
      .src("css/style.scss")
      // Sassのコンパイルを実行
      .pipe(sass())
      // cssフォルダー以下に保存
      .pipe(gulp.dest("css"))
  );
});

⑤タスク実行（トランスパイル）

npx gulp

参考サイト

絶対つまずかないGulp 4入門（2019年版）インストールとSassを使うまでの手順
https://ics.media/entry/3290/

macOS 10.15 Catalinaをクリーンインストール後のnode-gypインストール
https://qiita.com/UTA6966/items/6f8b1fd21c2dc9591488

【デザイナー向け】gulpでかんたん画像圧縮
https://qiita.com/MikaShirahama/items/ab91624709510c496e53